Navigating between different Stack screens in react native navigation causes component to have reduced opacity

28 views Asked by At

I have been building my first React native app with Expo the last two weeks and this issue stumped me as I could not find anyone else mentioning it.

I have my Navigation setup using react navigation v6

const Tab = createBottomTabNavigator<RootStackParamList['MainTab']>()
const Stack = createNativeStackNavigator<RootStackParamList>()

export default function BottomNav() {
  return (
    <NavigationContainer theme={navTheme}>
      <Stack.Navigator>
        <Stack.Screen name='MainTab' component={BottomTab} options={{ headerShown: false }} />
        <Stack.Screen
          name='SingleTrack'
          component={SingleTrackScreen}
          options={{
            headerTitle: 'Play',
            headerTintColor: 'white',
            headerStyle: {
              backgroundColor: '#27272a',
            },
            headerTitleAlign: 'center',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

The MainTab Screen is a bottomtabnavigator with 4 screen and navigating between them has caused no issues. However when I try to navigate from one of the pages in the MainTab screen to the SingleTrackScreen, I have experienced a very strange bug when testing on an actual phone(Samsung a53 on the latest android version). Sometimes it will render as intended, but other times all the content except the screen header will have a very reduced opacity, seems to be about 60%. What could the cause of this be?

I have tried stripping the SingleTrackScreen component to just a simple View with a Text inside, the view is then rendered with reduced opacity sometimes. To navigate I am using the navigation prop passed to each screen in the tab component, then I go back using the arrow in the header, try to open the single track page again and there comes the issue about 50% of the time.

After setting the animation to 'none' in the screen options of the Stack.Navigator the issue has dissapeared, but I would like the transition to be animated. Am I simply out of luck?

Would appreciate if anyone else has experienced something like this and could share the solution.

0

There are 0 answers