React Native Expo - Some Pages Become Transparent During Page Transitions

63 Views Asked by At

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!

0

There are 0 best solutions below