Customize the navigation animation bug

Current behavior

I used the official example to customize the navigation animation. On my Android device, when I click on the screen to go back, there is a white flashing bar on the left side of the screen. When the two screens have the same background color, it can See very clearly.

Code:

import React, {useRef, useState, useEffect} from 'react'; import { View, Button, Text ,Animated} from 'react-native'; import { NavigationContainer} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; function Home({ navigation }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'blue' }}>

  <Text>Home screen</Text>
  <Button
    title="Go to Profile"
    onPress={() => navigation.push('Profile')}
  />
</View>

); } function Profile({ navigation }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>

Profile screen

  <Button
    title="Go to Chat"
    onPress={() => navigation.push('Chat')}
  />
  <Button title="Go back" onPress={() => navigation.goBack()} />
</View>

); } function Chat({ navigation }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>

Chat screen

  <Button title="Go back" onPress={() => navigation.goBack()} />
</View>

); } const Stack = createStackNavigator(); const cardStyleInterpolator = ({ current, next, inverted, layouts: { screen } }) => { const progress = Animated.add( current.progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }), next ? next.progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }) : 0 );

return { cardStyle: { transform: [ { translateX: Animated.multiply( progress.interpolate({ inputRange: [0, 1, 2], outputRange: [ screen.width, // Focused, but offscreen in the beginning 0, // Fully focused //I changed this line only screen.width * -0.3 // Fully unfocused ], extrapolate: "clamp" }), inverted ) } ] } }; };

function MyStack() { return ( <Stack.Navigator screenOptions={{ headerShown: false, //Optional cardStyle: { backgroundColor: "transparent" }, //Optional cardStyleInterpolator }}

); }

export default function App() { return (

); }

https://github.com/react-navigation/react-navigation/assets/9425087/83454549-985b-4473-bea3-10bd9d57a05e

Expected behavior

bug

Reproduction

https://snack.expo.dev/@liuyisong/navdemo?platform=android

Platform

[X] Android
[ ] iOS
[ ] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[ ] @react-navigation/drawer
[ ] @react-navigation/material-top-tabs
[X] @react-navigation/stack
[X] @react-navigation/native-stack
[ ] react-native-tab-view

Environment

[] I've removed the packages that I don't use

package	version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn

react-navigation / react-navigation