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>
);
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With