I'm encountering an issue in my React Native Expo app where some pages become slightly transparent during page transitions, as shown in the screenshot. I'm using React Navigation version 5.0.0 for navigation. When I disable transition animations with <Stack.Navigator screenOptions={{ animation: "none" }}> it works fine, but I'd like to use transparency animations.
how it looks after transition how it looks initially
Here's the code for my App.js:
// ... (existing code)
export default function App() {
// ... (existing code)
return (
<SafeAreaView behavior="padding" className="flex-1">
<NavigationContainer
ref={navigationRef}
onStateChange={async () => {
setPage(navigationRef.getCurrentRoute().name);
}}
>
<Stack.Navigator screenOptions={{ animation: "simple_push" }}>
<Stack.Screen
name="Welcome"
component={WelcomePage}
options={{
title: "Добро пожаловать",
}}
/>
{/* ... (other Stack.Screen components) */}
</Stack.Navigator>
{token && <FloatingNav />}
</NavigationContainer>
</SafeAreaView>
);
}
Has anyone encountered a similar issue when using React Navigation, and if so, how did you resolve it? I'd appreciate any guidance on how to prevent these pages from becoming transparent during transitions. Thank you!