Transform <G> with setNativeProps possible?

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] })

[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,
  },
});