SVG components disappearing on navigating back for Android

[fedpre]

Description

I have written a custom SVG component to apply an overlay fading

          <Svg
            pointerEvents="none"
            height="100%"
            width="100%"
            style={[StyleSheet.absoluteFillObject, styles.svg]}>
            <Defs>
              <LinearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <Stop offset="0" stopOpacity={0} />
                <Stop offset="0.4" stopOpacity={0.3} />
                <Stop
                  offset="0.8"
                  stopColor="rgb(50, 50, 50)"
                  stopOpacity={0.7}
                />
                <Stop
                  offset="1"
                  stopColor="rgb(10, 10, 10)"
                  stopOpacity={0.8}
                />
              </LinearGradient>
            </Defs>
            <Rect width="100%" height="100%" fill="url(#grad)" />
          </Svg>

 const styles = StyleSheet.create({
  svg: {
    zIndex: 99,
    pointerEvents: 'none',
  },
});

I am on the latest react-native-svg version to date (15.4.0) and I am still experiencing the issue reported in this older issue here where a glitch happened just before navigating back. I checked the code that resulted in a fix in that issue and it's mostly present in the library, although there have been a regression change a whilte ago (you can check the history in the issue).

Am I missing something? As you can see from the video, the SVG is clearly disappearing and it is happening to each SVG fading overlay that I use in the app. If you slow down the video, you can easily see that.

Is it possible that something got broken while making the change? Am I doing something wrong? Any possible solutions? Thanks!

https://github.com/user-attachments/assets/ada17f04-da58-4a94-8064-3d9f18b6235b

Steps to reproduce

1. Create an SVG element
2. Use navigation to go back
3. the SVG disappears slightly before the animation is finished

Snack or a link to a repository

https://snack.expo.dev/tWw6cZwRQ4Cngs0gRrrMu

Screens version

3.32.0

React Native version

0.73.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

Pixel 4a

Acknowledgements

Yes

[kkafar]

Hi @fedpre, is there something that indicates that the issue is caused by react-native-screens? Have you tried disabling screens (uninstalling it & using regular JS based stack)?

[fedpre]

Hi @fedpre, is there something that indicates that the issue is caused by react-native-screens? Have you tried disabling screens (uninstalling it & using regular JS based stack)?

Hi @kkafar, yes, if I use the normal JS stack I do not get the odd behaviour, which means that it works correctly. That's why I believe it is a react-native-screens issue?

[rk779]

Hey maybe it could be related to this https://github.com/software-mansion/react-native-screens/issues/2065 since the svg view also has absolute position

[maciekstosio]

Hey maybe it could be related to this #2065 since the svg view also has absolute position

Could you check if the element disappears or just the zIndex doesn't work? (for example by making underling views semi-transparent). What I observed in #2065 is that views aren't sorted properly by zIndex when animating exit, but they are there.

[maciekstosio]

Btw. @fedpre could you provide a minimal repo in a snack? Current snack does not work. And If it's the problem with #2065 moving overlay as the last element should work as a fix.