White flicker between screens in createMaterialTopnavigator React Navigation v5

Question

There is a white flicker between the screens in the materialTopNavigator while swiping between screens. There is a drawer navigator which nests a stack navigator which further nests the tab navigator.

TabView Code (Where flickr occurs)

const TabView = createMaterialTopTabNavigator();
export const MyTabView = props => {
  return (
    <TabView.Navigator
      initialLayout={{ width: Dimensions.get('window').width, backgroundColor: '#121212' }}
      tabBarOptions={{
        activeTintColor: '#FF8458',
        inactiveTintColor: '#FF845840',
        labelStyle: {
          fontSize: 12,
          fontStyle: 'italic',
          fontWeight: 'bold'
        },
        style: { backgroundColor: '#361B0F' },
        indicatorStyle: { backgroundColor: '#FF845880' }
      }}
    >
      <TabView.Screen name="Movies" component={DashBoard} />
      <TabView.Screen name="TVShows" component={TvShowTab} />
    </TabView.Navigator>
  );
}

score 2 · Accepted Answer · answered Apr 08 '20 at 14:20

By passing a background color in the materialTopNavigator's sceneContainerStyle prop fixed 90 percent of the flicker.

export const MyTabView = props => {
  return (
    <TabView.Navigator
      initialLayout={{ width: Dimensions.get('window').width, backgroundColor: '#121212' }}
      sceneContainerStyle={{
        backgroundColor: '#361B0F',
      }}
      tabBarOptions={{
        activeTintColor: '#FF8458',
        inactiveTintColor: '#FF845840',
        labelStyle: {
          fontSize: 12,
          fontStyle: 'italic',
          fontWeight: 'bold'
        },
        tabStyle: {

        },
        style: { backgroundColor: '#361B0F', },
        indicatorStyle: { backgroundColor: '#FF845880' }
      }}
    >
      <TabView.Screen name="Movies" component={DashBoard} />
      <TabView.Screen name="TVShows" component={TvShowTab} />
    </TabView.Navigator>
  );
}//MyTabView

is there a way to add a gradient as the background using sceneContainerStyle? — Aldor, Feb 15 '21 at 09:08

White flicker between screens in createMaterialTopnavigator React Navigation v5

1 Answers1