React Native Svg Linear Gradient Not loading when redirecting to bottom navigation tab

[oliviercperrier]

Bug

I have a SVG with a Linear Gradient Bg, when i use a flat color bg everything is fine.

I have this router (using expo-router):

• Tab Nav
  • Page One
  • Page Two

Some Details:

• The SVG is on Page One.
• The root of my app is redirecting the user to page Two in the Tab Nav (First page that should be shown).

If i open my app from the root (localhost:8081/), i get to Page Two and when i get to page one (by click in the tab nav), the SVG doesn't load, but the SVG element is in the DOM.

if i open my app from page two (localhost:8081/two) and then go to page one, the SVG load correctly.

I Added a video here: Screen Recording 2024-02-19 at 2.01.11 PM.zip

In the video i first:

• Load the app from root and show the svg not loading,
• Then i load the app from page two and show that the svg is loading correctly

Steps To Reproduce

1. git clone https://github.com/oliviercperrier/react-native-svg-linear-gradient-repro
2. npm install
3. npm run web
4. Load the app from the root `localhost:8081/`
5. Go to page one
6. SVG should be loading (but its not)

[oliviercperrier]

Up this is a big issue for my team