CODEWITHSUNDEEP
javascriptexporeact-nativereact-native-navigation
KoolKoderKev
KoolKoderKev

Reputation: 13

Expo Android there is a white flicker when switching from bottom tab navigator to material top tab navigator

White flicker when switching from bottom tab navigator to top tab navigator

This white flicker is much more noticeable outside of this gif. But I am using an Expo managed React Native project and when I switch from my Bottom tab navigator to my Top tab navigator the screen flickers white. This issue only occurs on Android. On top of that, when you press a TextInput to open the keyboard, the screen turns white in the section the keyboard takes up while the keyboard animation is occuring. Here are my navigators in App.js

const AuthTabs = createMaterialTopTabNavigator();
const AuthStackScreen = () => (
      <AuthTabs.Navigator tabBarOptions={options}>
          <AuthTabs.Screen name="Sign In" component={SignInScreen} />
          <AuthTabs.Screen name="Sign Up" component={SignUpScreen} />
      </AuthTabs.Navigator>
    );

const Tab = createBottomTabNavigator();
  const MainStack = () => (
    <Tab.Navigator>
      <Tab.Screen name="Deals" component={DealsStackScreen} />
      <Tab.Screen name="Categories" component={CategoriesStackScreen} />
      <Tab.Screen name="My Account" component={MyAccountStackScreen} />
    </Tab.Navigator>

  const RootStack = createStackNavigator();
  const Root = () => (
      <RootStack.Navigator headerMode="none" cardStyle={{opacity: 1}} >
          <RootStack.Screen name="Home" component={MainStack}/>
          <RootStack.Screen name="Auth" component={AuthStackScreen}/>
      </RootStack.Navigator>
  );

    return (
      <AuthContextProvider>
        <NavigationContainer theme={{ colors: {background: `${Colors.surface}` }}}>
          <Root />
        </NavigationContainer>
      </AuthContextProvider>
    );

I tried adding my theme color to the NavigationContainer but this did not fix the issue. Also link shows the GIF of what is happening.

Upvotes: 1

Views: 2750

Answers (2)

MobileMon
MobileMon

Reputation: 8661

for me how i had to set the theme on the navigation container

const navigationTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: 'red, //your color here
    },
  };

then

    <NavigationContainer theme={navigationTheme}>

Upvotes: 1

Kartikey
Kartikey

Reputation: 4992

Yes, you have to wrap your RootStack around a View with backgroundColor as theme's backgroundColor

Your RootStack would look something like this now

import { useTheme } from '@react-navigation/native';

... 

const { colors } = useTheme();

const RootStack = createStackNavigator();

const Root = () => (
  <View style={{ flex:1, backgroundColor: colors.background }}> // This is the catch..Also it needs flex:1
    <RootStack.Navigator headerMode="none" cardStyle={{ opacity: 1 }}>
      <RootStack.Screen name="Home" component={MainStack} />
      <RootStack.Screen name="Auth" component={AuthStackScreen} />
    </RootStack.Navigator>
  </View>
);

Upvotes: 6

Related Questions