Transform <G> with setNativeProps possible?

[msageryd]

I need to move and scale individual<G> elements with setNativeProps. Nothing I've tried seems to work.

I tried:

setNativeProps({x: newX, y: newY})

setNativeProps({x: newX.toString(), y: newY.toString()})

setNativeProps({transform: [{translateX: newX}, {translateY: newY}])

If I use setNativeProps directly on a <Circle> for example, everything works fine.

• Does G implement setNativeProps?
• What syntax should I use for setting scale and position on a group?

[msand]

@msageryd You probably need to use something like:
setNativeProps({ matrix: [scaleX, skewY, skewX, scaleY, translateX, translateY] })

[msageryd]

Thank you so much! It works great.

[msageryd]

BTW. I had this on SO as well. I you'd like to chime in there I'll accept your answer.
https://stackoverflow.com/questions/47981530/transform-g-with-setnativeprops-possible-with-react-native-svg/47991473#47991473

[msand]

Great, posted a slightly more thorough answer there: https://stackoverflow.com/a/47995367/1925631

[msand]

Cross-posting here for reference:

The VirtualNode (android) and RNSVGNode (ios) implementations have setMatrix methods. Give new property values by sending a column-major array representation of a transform matrix definition over the bridge. As in:

setNativeProps({ matrix: [scaleX, skewY, skewX, scaleY, translateX, translateY] })

[msand]

The thing to note is that the composition of skews, rotations and translations is non-commutative, i.e., the result depends on the order of the transforms. And the six values do not correspond to parsing any kind of composition of these or angle interpretations, merely as scalar values using straight matrix interpretation. Thus the labels are slightly misleading, but gives at least some clues for how to interpret/adjust them if you want to bypass the transform parser.

[muratozgul]

Hi @msand , if you have time can you please post a simple example of a component (Circle in a G) using an Animated value. Thanks

[msand]

https://snack.expo.io/@msand/shallow-celery

import React, { Component } from 'react';
import { StyleSheet, View, Animated } from 'react-native';
import { Svg, Circle, G } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

function getInitialState() {
  const anim = new Animated.Value(0);
  const fillOpacity = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });
  const offset = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 10],
  });
  const strokeOpacity = anim.interpolate({
    inputRange: [0, 0.9],
    outputRange: [0, 1],
    extrapolateRight: 'clamp',
  });
  const strokeWidth = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0', '5'],
  });
  return { anim, fillOpacity, offset, strokeOpacity, strokeWidth };
}

export default class App extends Component {
  state = getInitialState();

  componentDidMount() {
    const { anim } = this.state;
    Animated.timing(anim, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    const { fillOpacity, offset, strokeOpacity, strokeWidth } = this.state;
    return (
      <View style={styles.container}>
        <Svg width="100%" height="100%" viewBox="0 0 100 100">
          <G>
            <AnimatedCircle
              cx="50"
              cy="50"
              r="45"
              height="90"
              stroke="blue"
              fill="green"
              strokeDasharray="1 1"
              strokeWidth={strokeWidth}
              strokeDashoffset={offset}
              strokeOpacity={strokeOpacity}
              fillOpacity={fillOpacity}
            />
          </G>
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
    flex: 1,
  },
});