[9.2.0] alongside rn0.58 throws error when using `rotate: 90deg`

I updated to latest versions of react-native and react-native-svg And am now receiving following error

JSON value ‘{ rotate = 90deg }’ of type NSMutableDictionary cannot be converted to NSNumber

I don’t think error is related to upgrading react-native as I can successfully use deg strings in other places of the app. Error happens when using style object on SVG element like so

<Svg style={styles.container}>
 //...
</Svg>

// ...

/**
 * Styles
 */
const styles = StyleSheet.create({
  container: {
    transform: [
      {
        rotate: '90deg'
      }
    ]
  }
});

[msand]

Published v9.2.2 with a few fixes for the new optimizations, here’s an example showing off some of it, and native animated transforms on the root element:

import React, { Component } from 'react';
import Svg, {
  Rect,
  Circle,
  Path,
  G,
  Defs,
  LinearGradient,
  Stop,
} from 'react-native-svg';
import { colorNames } from 'react-native-svg/lib/extract/extractColor';
import { Animated } from 'react-native';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);

const colors = Object.keys(colorNames).map(name => colorNames[name]);
const { blue, black, white, red } = colorNames;
const numColors = colors.length;
const initialColor = red;
const initialIndex = colors.indexOf(initialColor);

const viewBox = [0, 0, 100, 100];
const path =
  'M55.192 27.87l-5.825-1.092a17.98 17.98 0 0 0-1.392-3.37l3.37-4.928c.312-.456.248-1.142-.143-1.532l-4.155-4.156c-.39-.39-1.076-.454-1.532-.143l-4.928 3.37a18.023 18.023 0 0 0-3.473-1.42l-1.086-5.793c-.103-.543-.632-.983-1.185-.983h-5.877c-.553 0-1.082.44-1.185.983l-1.096 5.85a17.96 17.96 0 0 0-3.334 1.393l-4.866-3.33c-.456-.31-1.142-.247-1.532.144l-4.156 4.156c-.39.39-.454 1.076-.143 1.532l3.35 4.896a18.055 18.055 0 0 0-1.37 3.33L8.807 27.87c-.542.103-.982.632-.982 1.185v5.877c0 .553.44 1.082.982 1.185l5.82 1.09a18.013 18.013 0 0 0 1.4 3.4l-3.31 4.842c-.313.455-.25 1.14.142 1.53l4.155 4.157c.39.39 1.076.454 1.532.143l4.84-3.313c1.04.563 2.146 1.02 3.3 1.375l1.096 5.852c.103.542.632.982 1.185.982h5.877c.553 0 1.082-.44 1.185-.982l1.086-5.796c1.2-.354 2.354-.82 3.438-1.4l4.902 3.353c.456.313 1.142.25 1.532-.142l4.155-4.154c.39-.39.454-1.076.143-1.532l-3.335-4.874a18.016 18.016 0 0 0 1.424-3.44l5.82-1.09c.54-.104.98-.633.98-1.186v-5.877c0-.553-.44-1.082-.982-1.185zM32 42.085c-5.568 0-10.083-4.515-10.083-10.086 0-5.568 4.515-10.084 10.083-10.084 5.57 0 10.086 4.516 10.086 10.083 0 5.57-4.517 10.085-10.086 10.085z';

export default class App extends Component {
  state = {
    color: initialColor,
    index: initialIndex,
    initAnim: new Animated.Value(initialIndex),
  };

  animate(index) {
    Animated.timing(this.state.initAnim, {
      toValue: index + 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  }

  componentDidMount() {
    this.animate(this.state.index);
  }

  onPress = () => {
    this.setState(({ index }) => {
      const newIndex = (index + 1) % numColors;
      this.animate(newIndex);
      return {
        color: colors[newIndex],
        index: newIndex,
      };
    });
  };

  render() {
    const { initAnim, color } = this.state;
    return (
      <AnimatedSvg
        width="100%"
        height="100%"
        viewBox={viewBox}
        style={{
          transform: [
            {
              rotate: initAnim.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '360deg'],
              }),
            },
          ],
        }}
      >
        <Defs>
          <LinearGradient
            id="grad"
            x1={0}
            y1={0}
            x2={100}
            y2={0}
            gradientUnits="userSpaceOnUse"
          >
            <Stop offset={0} stopColor={blue} />
            <Stop offset={1} stopColor={red} />
          </LinearGradient>
        </Defs>
        <G>
          <Rect
            y={5}
            x={5}
            width={90}
            height={90}
            stroke={black}
            strokeWidth={3}
            fill="url(#grad)"
          />
          <Rect x={5} y={5} width={55} height={55} fill={white} />
          <Path d={path} fill={blue} />
        </G>
        <G transform={[1, 0, 0, 1, 18, 18]}>
          <Circle
            cx={32}
            cy={32}
            r={4}
            fill={color}
            onPress={this.onPress}
          />
        </G>
      </AnimatedSvg>
    );
  }
}

[0xAsimetriq]

9.2.1 fixes the issue, thank you.