Screen does not appear but is still mount (combination NativeStackNavigator and TabNavigator)

This issue is linked to the issue I opened in react-navigation/navigation-ex : link

I am combining a BottomTabNavigator and a NativeStackNavigator in my app, and when I start on the tab, and then go on a screen that is in the NativeStackNavigator, and then go back to the BottomTabNavigator, the screen is not changed.

You can see it in the GIF below :

In this GIF, the configuration is like this:

TabNavigator:

• Tab A
• Tab B
• Tab C

NativeStack:

• The TabNavigator
• Screen 2

When I do Tab A => Tab B => Tab C no problem Then when I do Tab C => Screen 2 => Tab C still no problem And it is after that, I can’t go on Tab A and Tab B, even if the TabBar notice me that I am on Tab A or Tab B.

I have a function executed on each tab when it is focused, and for all the tabs it is executed even if it is not shown which is also weird. So somehow the screens are changing but I can’t see it on the screen.

The issue that I have created in react-navigation/navigation-ex shows an other case with a NativeStackNavigator nested in a BottomTabNavigator, and the problem is really similar.

I have created a snack https://snack.expo.io/@alexandremaistret/reactnavigation-issue with the code that I executed but the problem does not appear in the snack.

It seems it only appears on a react-native init project, and the problem appears only with react-native-screens@2.0.0-alpha.22, and not with react-native-screens@2.0.0-alpha.17.

I have another project with react-native 0.60.5, and I have exactly the same problem.

Here is my code with react-native 0.61.5 and react-native-screens@2.0.0-alpha.22 on which I have the issue:

import * as React from 'react';
import {
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';

enableScreens();

function TabA() {
  return (
    <View style={[styles.ScreenStyle, {
        backgroundColor: 'red',
      }]}
    >
      <Text>TAB A</Text>
    </View>
  );
}

function TabB() {
  return (
    <View style={[styles.ScreenStyle, {
        backgroundColor: 'blue',
      }]}
    >
      <Text>TAB B</Text>
    </View>
  );
}

function TabC({ navigation }) {
  return (
    <View style={[styles.ScreenStyle, {
        backgroundColor: 'yellow',
      }]}
    >
      <TouchableOpacity
        onPress={() => navigation.navigate('Screen2')}
        style={{
          padding: 10,
          backgroundColor: 'red',
        }}
      >
        <Text>TAB C</Text>
      </TouchableOpacity>
    </View>
  );
}

function Screen2({ navigation }) {
  return (
    <View style={[styles.ScreenStyle, {
        backgroundColor: 'green',
      }]}
    >
      <Text>Screen 2</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="TABA" component={TabA} />
      <Tab.Screen name="TABB" component={TabB} />
      <Tab.Screen name="TABC" component={TabC} />
    </Tab.Navigator>
  );
}

const MainStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationNativeContainer>
      <MainStack.Navigator>
        <MainStack.Screen name="MainTab" component={MainTab} />
        <MainStack.Screen name="Screen2" component={Screen2} />
     </MainStack.Navigator>
    </NavigationNativeContainer>
  );
}

const styles = {
  ScreenStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

[r0b0t3d]

@guptaamol you could try my fork to see if it work for you.

"react-native-screens": "https://github.com/r0b0t3d/react-native-screens.git#my-fix",

[ALexandreM75013]

Ok small update, because I found something else really weird.

Indeed, I reinstall react-native-screens@2.0.0-alpha.17 but instead of using yarn, I used npm, and with npm I have exactly the same problem than when I am using react-native-screens@2.0.0-alpha.22 (note when I installed alpha.22, I was using yarn, so the issue still exist on alpha.22)

So I really don’t have any clue why with npm I have the issue, and not with yarn when I am using react-native-screens@2.0.0-alpha.17. It was so weird, than I checked 3 times just to be sure, and all the time with only npm I had the issue.