search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.69k stars 1.79k forks source link

Tab bar navigation display hides svg element #2718

Closed UnderTheMoonspell closed 1 month ago

UnderTheMoonspell commented 2 months ago

Is there an existing issue for this?

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.

image image image

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 commented 1 month ago

For whoever needs it, this is related to: https://github.com/software-mansion/react-native-svg/issues/2225.

The workaround fixed it for us