[Android] Visibility Artifact During Page Transition in Latest Android Default Animation

[alabsi91]

Bug summary

Hello, I encountered an issue while transitioning between pages using react-navigation with the latest Android default transition animation. Although this issue might exist in older default transition animations, it is more noticeable in the latest one. The problem is that a white or black layer appears between the screens during the transition.

Repo: https://github.com/alabsi91/splash-screen-android-issue

Note In the following examples to make the animation more obvious, I adjusted the animation durations in the files located at node_modules\react-native-screens\android\src\main\res\v33\anim-v33.

without bootsplash

https://github.com/zoontek/react-native-bootsplash/assets/58077449/4d03bfda-ca03-4eb5-8a27-8409943f2164

with bootsplash

https://github.com/zoontek/react-native-bootsplash/assets/58077449/456e401b-4b63-461f-a3ef-19648a4359e4

Library version

5.1.1

Environment info

Android 13

Steps to reproduce

1. setup bootsplash
2. use react-navigation

Reproducible sample code

https://github.com/alabsi91/splash-screen-android-issue

[zoontek]

@alabsi91 Thanks for the repository, I will investigate.

[zoontek]

@alabsi91 I tried to see the difference by totally removing react-native-bootsplash on your reproduction repository and I always get the white screen behind (I tweaked the animation duration too). Are you still this is the only difference between your 2 examples? 🤔 (same react-native-screens version?)

[alabsi91]

@zoontek My bad, sorry for taking your time. So, the issue is with react-native-screen. I think bootsplash had the fix all along. You couldn't replicate it because I didn't fully remove bootsplash; I just deleted the import from MainActivity.java. Anyway, I figured out why it worked when using the style from bootsplash only. Here's what I did:

1. Created a file at android\app\src\main\res\drawable\alpha_screen.xml with this inside:

   
   <?xml version="1.0" encoding="utf-8"?>

2. Added this line to `android\app\src\main\res\values\styles.xml`:
```diff
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+   <item name="android:windowBackground">@drawable/alpha_screen</item>
</style>

Sorry again! You can close this issue now. But, fixing this might help others. Should we make a pull request in react-native-screens?

[zoontek]

@alabsi91 I think, or at least open an issue there 🙂