Using flex: 1 as a style on an Svg seems to have broken in 12.0.0+

[tom-overton]

Bug

When upgrading the version of react-native-svg in our app from 11.0.1 to 12.1.1, the animation on one of our loading bar SVGs started to look strange. We believe it's because of differences in how flex: 1 is being interpreted when applied as a style to an Svg, since removing flex: 1 from the style fixed the issue.

Environment info

react-native: 0.63.4
react-native-svg version: 11.0.1 -> 12.1.1

Steps To Reproduce

The easiest way to reproduce the issue is simply to look at the Snacks I post in the section below. But in case you for some reason can't look at them, I'll try to summarize:

1. Use react-native-svg version 11.0.1
2. Make an animated Svg that uses flex: 1 in its style
3. Tweak it so it looks good
4. Upgrade to react-native-svg version 12.1.1 (it was the latest version at the time of our upgrade)

Expected:

• The animation would look the same after the upgrade

Actual:

• The animation looked different

It should be noted that flex is actually not in the "Common Props" section of the README so perhaps I shouldn't expect it to work across updates. If that's the case, feel free to close this issue.

Short, Self Contained, Correct (Compilable), Example

I've made Snacks which show something very similar to the loading bar we use in our app. Two examples are completely identical in terms of code, but demonstrate different behavior in 11.0.1 versus 12.0.0. Note that 12.1.1 (the version that Expo wants me to use) and 12.2.0 (the next version) have the same behavior as the 12.0.0 example:

https://snack.expo.dev/@toverton/functioning-loading-bar-on-react-native-svg-11-0-1
https://snack.expo.dev/@toverton/broken-loading-bar-on-react-native-svg-12-0-0

Make sure to use iOS/Android previews to see the issue properly, since it doesn't look quite right in the Web view. Note that this doesn't exactly match how we handle the loading bar in our app. The comment in handleLayout explains how we actually handle it in our app and the workaround I'm using here. The fact that we track the width via state is important for the next section.

Steps to workaround this issue

We already fixed this in our app by simply not using flex: 1 as a style. Instead of doing this:

<Svg style={styles.flexOne} preserveAspectRatio={'none'} viewBox="0 0 750 6">

We instead did this:

<Svg style={{width: this.state.width, height: BAR_HEIGHT}} preserveAspectRatio={'none'} viewBox="0 0 750 6">

This code works using react-native-svg versions 11.0.1, 12.1.1, and 12.2.0. As I said before, perhaps flex simply wasn't supposed to be used and it was just accidentally working before.

[bohdanprog]

Hello @tom-overton,
I couldn't reproduce that issue, if you still have that problem, feel free to open a new issue.
Thank you.