React navigation V6 flashes white on slide between screen-CodePudding

I am using react navigation V6. And I have 6 components. But when I navigate from the first to the sixth: the transition goes through all the active components and flashes white. I would like to either remove the white flash or change the effect of the slide transition to fade. Thank you.

      <View style={{flex: 1, borderTopWidth: 1, borderTopColor: '#5656582b'}}>
        <Tab.Navigator
          initialRouteName="Tous"
          
          screenOptions={{

            tabBarScrollEnabled: true,
            tabBarIndicatorStyle: {
              backgroundColor: '#60103b',
              height: 4,
            },
            tabBarActiveTintColor: '#60103b',
            tabBarInactiveTintColor: 'black',
            tabBarLabelStyle: { fontSize: 17,color: 'black',fontWeight: "500",letterSpacing: 1},
            tabBarItemStyle: {width: 'auto', padding: 10},
            lazy:true,
            swipeEnabled:false,
            


          }          
          }
          sceneAnimationEnabled = {false}

          //animationEnabled: false}          
          >
          <Tab.Screen name="Tous" initial component={Home} />
          <Tab.Screen name="Livres" component={LivreHome} />
          <Tab.Screen name="Livres Audios" component={LivreAudio} />
          <Tab.Screen name="Podcasts" component={PodcastHome} />
          <Tab.Screen name="Magasines" component={MagasineHome} />
          <Tab.Screen name="Documents" component={DocumentHome} />
        </Tab.Navigator>
      </View>

CodePudding user response：

First of all wrap <Tab.Navigator> in NavigationContainer

For remove white flash there is a way by giving dark theme to NavigationContainer

Example code

import {
  NavigationContainer,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
 
  return (
    <NavigationContainer theme={DarkTheme}>
      {/*Other Tab.Navigtor content*/}
    </NavigationContainer>
  );
};

CodePudding user response：

        <NavigationContainer theme={DarkTheme} >
            
            {userDataSelect.hasOwnProperty('access_token')?
                 <MainNavigation /> : <AuthNavigation />
            }
       
        </NavigationContainer>

When I navigate on 2 successive screens, for example 1 to 2 or 2 to 3, there is no flash. But when I navigate from 1 to 5 I always have the white flash as if the navigation goes through all the components of the browser