[Android] Visibility Artifact During Page Transition and Possible Solution

The Issue

In the new Android 13 screen transition, an issue arises when the new screen pushes the old one, causing a white or black layer to appear between them. While this problem may exist in the old screen transition, it becomes more noticeable in the new version.

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.

• GitHub repository (with the fix):
  https://github.com/alabsi91/rn-screens-android-transitions-animation-fix

Default	Fixed

The Fix

Fortunately, I have fixed this issue by implementing the following changes:

1. Step One: Create a file at android\app\src\main\res\drawable\alpha_screen.xml.

<?xml version="1.0" encoding="utf-8"?>
<layer-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:opacity="opaque">
    <item android:gravity="fill">
        <color android:color="@android:color/transparent" />
    </item>
</layer-list>

2. Step Two: Add the following line to the file at android\app\src\main\res\values\styles.xml.

<resources>
    <!-- Base application theme. -->
    <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>
</resources>

3. Step Three: For older Android versions, you might have to make the default navigation background color transparent:

<NavigationContainer>
    <Stack.Navigator
       screenOptions={{contentStyle: {backgroundColor: 'transparent'}}} // 👈  add this
       initialRouteName="screen1">
       <Stack.Screen name="screen1" component={Screen1} />
       <Stack.Screen name="screen2" component={Screen2} />
    </Stack.Navigator>
</NavigationContainer>

Steps to reproduce

1. Setup a new project with react-navigation

Snack or a link to a repository

https://github.com/alabsi91/rn-screens-android-transitions-animation-fix

Screens version

3.27.0

React Native version

0.72.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Android 13

Acknowledgements

Yes

Start by reproducing the transition on Android 13 with React Native 0.72.6 and react-native-screens 3.27.0, then inspect the Android v33 animation resources under node_modules/react-native-screens/android/src/main/res/v33/anim-v33. Compare the reported alpha_screen.xml, styles.xml, and NavigationContainer contentStyle changes with the linked example; done means the white or black layer no longer appears during transitions.