Tab bar navigation display hides svg element

[UnderTheMoonspell]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

In our react native web app our Linear Gradient SVGs are being hidden by an inactive page.

So if we have first, and default, tab A hidden, while showing tab B, the div of tab A is display: none and z-index: -1, while tab B is display: flex and z-index:1;

In Tab B we have a SVG with a linear gradient that is not showing ONLY on the web. If I switch the display: none of Tab A to display: block in the developer tools, the SVG shows. This doesnt happen with svg icons, only gradients as far as I know, but it happens to ALL the linear gradient svgs that are not on the first tab.

Expected behavior

Svg should be displayed

Steps to reproduce

React native: 0.73.9
React native web: 0.19.2

Test case

https://codesandbox.io/p/sandbox/tab-svg-linear-grad-8rwkt3?file=%2Fsrc%2FApp.js%3A9%2C10

Additional comments

No response

[UnderTheMoonspell]

For whoever needs it, this is related to: software-mansion/react-native-svg#2225.

The workaround fixed it for us