Transform = matrix() prop to Rect not working in React Native

Question

I want to transform the Rect.

I have svg image. In that I have small rectangles which i want to rotate. the image is perfectly working on web. but it gives problem on react native android app.

below is the svg image xml

<Svg version="1.1" id="Layer_1"  x="0px" y="0px"
                 width="135" height="39" viewBox="0 0 135 39" enable-background="new 0 0 135 39" >
              <Rect x="71.411" y="17.171" transform="matrix(-0.7072 0.707 -0.707 -0.7072 142.588 -17.6385)" fill-rule="evenodd" clip-rule="evenodd" fill="#FDC28E" width="7.07" height="7.07"/>
              <Rect x="57.244" y="17.172" transform="matrix(-0.707 0.7072 -0.7072 -0.707 118.3964 -7.6375)" fill-rule="evenodd" clip-rule="evenodd" fill="#FDC28E" width="7.072" height="7.07"/>
              <Rect x="83.946" y="19.874" fill-rule="evenodd" clip-rule="evenodd" fill="#d3d3d3" width="40.833" height="1.667"/>
              <Rect x="9.946" y="19.874" fill-rule="evenodd" clip-rule="evenodd" fill="#d3d3d3" width="40.833" height="1.667"/>
              </Svg>

I get the warning

Warning: Failed prop type: Invalid prop `transform` of type `string` supplied to `Rect`, expected `object`.

I use react-native-svg (https://github.com/react-native-community/react-native-svg) for displaying svg content.

I tried to pass var object but it didnt work out.

Please guide me. I am new to react-native development.

Answer 1

Replace transform with Transform in the Svg component. This will fix all the transform warning occurring in react-native-svg (https://github.com/react-native-community/react-native-svg)