White Blinking/Flashing occurs when switching tabs / Material Top Tabs Navigator

[patissier-boulanger]

trafficstars

Current behavior

https://user-images.githubusercontent.com/67054959/154223706-17509b46-40f3-42af-915c-5cb04c91e6e6.mov

A flashing occurs when going from a screen to another screen. This only occurs when there are at least two screens.

import {Text, View} from 'react-native';

import 'react-native-gesture-handler';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const Stack = createNativeStackNavigator();
const Tab = createMaterialTopTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

const Home = () => {
  return (
    <View
      style={{
        flex: 1,
      }}>
      <Tab.Navigator
        initialRouteName="Screen1"
        screenOptions={{
          tabBarLabelStyle: {fontSize: 12},
          tabBarItemStyle: {width: 100},
          tabBarStyle: {backgroundColor: 'powderblue'},
        }}>
        <Tab.Screen name="Screen1" component={Screen1} />
        <Tab.Screen name="Screen2" component={Screen2} />
        <Tab.Screen name="Screen3" component={Screen3} />
      </Tab.Navigator>
    </View>
  );
};

const Screen1 = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>SCREEN_1</Text>
    </View>
  );
};

const Screen2 = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'blue',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>SCREEN_2</Text>
    </View>
  );
};

const Screen3 = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'purple',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>SCREEN_3</Text>
    </View>
  );
};

Expected behavior

No flashing when navigate from a screen to another screen.

Reproduction

https://snack.expo.dev/@juhyoungjung/flashing

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-bottom-tabs
• [X] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [ ] @react-navigation/native-stack

Environment

"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/material-bottom-tabs": "^6.1.1",
"@react-navigation/material-top-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"@react-navigation/stack": "^6.1.1",
"react": "17.0.2",
"react-native": "0.67.2",
"react-native-gesture-handler": "^2.2.0",
"react-native-pager-view": "^5.4.11",
"react-native-paper": "^4.11.2",
"react-native-safe-area-context": "^3.4.0",
"react-native-screens": "^3.11.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0"

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[patissier-boulanger]

initialRouteName , initialLayout lazy setting backgroundcolor for sceneContainerStyle didn't help at all.

[sevicbb]

Any updates on this issue?

[zackify]

same issue here, with a stack nav inside of the tabs

[zackify]

<NavigationContainer
        theme={{ colors: { background: theme.screenBackground } }}
      >

setting a background on the navigation container fixes the problem for me.

[okwasniewski]

Hey @patissier-boulanger,

This issue should be fixed. Please update to the latest tab-view and pager-view.

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.