reactjs - Nested navigation -- Stack within Tab or Tab within Stack -- in React Native

Question

Stacked navigation is not working properly within tab navigation.

  <Tab.Navigator>
    <Tab.Screen name={routes.Area1} component={Area1Navigator}/>
    <Tab.Screen name={routes.Area2} component={Area2Navigator}/>
    <Tab.Screen name={routes.Area3} component={Area3Navigator}/>
  </Tab.Navigator>

const Area2Navigator = () => (
  <Stack.Navigator
    mode='modal'
    screenOptions={{
      headerStyle: { backgroundColor: defaultStyles.colors.bgHighlightColor },
      headerTintColor: defaultStyles.colors.black,
      headerBackTitleStyle: { color: defaultStyles.colors.headerBackTitleColor }
    }}>
    <Stack.Screen name={routes.Area2} component={Area2Screen} options={{
      headerTitleAlign: 'center',
      headerShown: true,
      title: 'My Books'
    }} />
    <Stack.Screen name={routes.AREA2_DETAILS} component={Area2DetailsScreen} options={{
      headerShown: false
    }} />
  </Stack.Navigator>
)

The problem that I'm having relates to stack navigation nested within tab navigation through the Expo simulator on an iPhone. For example, Area2 has nested stack navigation. The touch functionality stops working in Area2 if ever I navigate to the third tab and then back to the second tab. This problem does not exist in the Android simulator. Has anyone ever encountered this anomaly? I'm worried that this problem would also occur in the real iPhone version of the app and not just in the simulated version.

question from:https://stackoverflow.com/questions/65868343/nested-navigation-stack-within-tab-or-tab-within-stack-in-react-native

Answer 1

Ok, this problem with nested navigation--either stack navigation nested within tab navigation or the reverse--that appears in the Android simulator or (in my case) with the Expo iOS simulator is due to incompatible library references within package.json. As of today, the following collection allows both the Expo/iOS and Android simulators to function properly:

"dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/bottom-tabs": "^5.4.4",
    "@react-navigation/native": "^5.3.2",
    "@react-navigation/stack": "^5.3.5",
    "babel-preset-expo": "~8.1.0",
    "expo": "~37.0.3",
    "expo-constants": "^9.0.0",
    "expo-image-picker": "~8.1.0",
    "expo-location": "~8.1.0",
    "expo-permissions": "~8.1.0",
    "formik": "^2.1.4",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-web": "~0.11.7",
    "yup": "^0.28.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6"
  },