1

I have my nested stack navigation set up like this. Drawer navigator is my root component made up of a stack navigator which has a tab navigator nested inside of it

const AppStack = () => {
  const navigation = useNavigation<any>()

  const TabStack = () => (
    <Tab.Navigator screenOptions={screenOptions}>
      <Tab.Screen
        name="Home"
        component={HomeStack}
      />
      <Tab.Screen
        name="Trending"
        component={TrendingScreen}
          headerShown: true,
          headerTintColor: getColor('white'),
          headerStyle: tailwind('bg-purple-800'),
          headerTitleAlign: 'center',
        }}
      />
      <Tab.Screen
        name="Post"
        component={PostScreen}
        
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
     
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
      />
    </Tab.Navigator>
  )

  const MainStack = () => (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Explore" component={TabStack} />
      <Stack.Screen
        name="Messages"
        component={MessagesScreen}
       
      />
      <Stack.Screen
        name="Notifications"
        component={NotificationsScreen}
      
      />
      <Stack.Screen
        name="EditProfile"
        component={EditProfileScreen}
       
      />
      <Stack.Screen
        name="tagPosts"
        component={TagPostScreen}
       
      />
      <Stack.Screen
        name="countryPosts"
        component={CountryPostScreen}
        
      />
      <Stack.Screen
        name="locationPosts"
        component={LocationPostScreen}
       
      />
      <Stack.Screen
        name="postDetails"
        component={PostDetailsScreen}
       
      />

      <Stack.Screen
        name="Map"
        component={MapScreen}
       
      />
    </Stack.Navigator>
  )
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
      }}
      drawerContent={(props) => <DrawerContent {...props} />}
    >
      <Drawer.Screen name="Main" component={MainStack} />
    </Drawer.Navigator>
  )
}
export default AppStack

Home Stack Navigator

const HomeStack = () => {
  return (
    <TopTab.Navigator
      initialRouteName="World"
      screenOptions={{
        tabBarIndicatorStyle: tailwind('border-purple-800 border-2'),
        tabBarStyle: tailwind('bg-purple-100'),
        tabBarInactiveTintColor: getColor('purple-400'),
        tabBarActiveTintColor: getColor('purple-800'),
        tabBarLabelStyle: {
          textTransform: 'none',
          fontSize: 20,
        },
      }}
    >
      <TopTab.Screen
        name="World"
        component={WorldScreen}
        options={{
          tabBarLabel: 'World',
        }}
      />
      <TopTab.Screen
        name="YourPicks"
        component={PicksScreen}
        options={{
          tabBarLabel: 'Your Picks',
        }}
      />
    </TopTab.Navigator>
  )
}

export default HomeStack

Below is my Linking

  const linking: LinkingOptions<any> = {
    prefixes: [prefix],
    config: {
      screens: {
        Main: {
          path: 'main',
          screens: {
            Explore: {
              path: 'explore',
              screens: {
                Home: {
                  initialRouteName: 'World',
                  path: 'worldPath',
                  screens: {
                    World: 'world',
                    YourPicks: 'yourpicks',
                  },
                },
              },
            },
          },
        },
        NotFound: '*',
      },
    },
  }

I have tried npx uri-scheme open exp://128.0.0.1:19000/--/main/explore/worldPath --ios and nothing happens in my simulator.

Does anyone know what I could be missing here ? Any help to resolve this is very much appreciated !

testingdj
  • 23
  • 1
  • 6
  • Can you share your code structure for main navigator include drawer – Fiston Emmanuel Mar 02 '22 at 13:34
  • 1
    I also authored same solution here - https://stackoverflow.com/questions/70243414/react-navigation-deep-linking-not-working-when-use-tabs-stack/70245799#70245799 – Fiston Emmanuel Mar 02 '22 at 13:37
  • @BYIRINGIROEmmanuel thanks for responding. the code structure is what I shared above. The entire AppStack component is my main navigator when used here `{user ? : }` I also took a look at your same solution but it didn't get me anywhere. I might be missing something. – testingdj Mar 02 '22 at 14:55
  • @BYIRINGIROEmmanuel the AppStack navigator returns the Drawer Navigator which has nested components MainStack, TabStack and HomeStack. I have added the missing HomeStack navigator now – testingdj Mar 02 '22 at 14:58
  • Try this `npx uri-scheme open exp://128.0.0.1:19000/--/worldPath --ios`without explicit define full path – Fiston Emmanuel Mar 02 '22 at 15:20
  • Just tried that but I got message saying 'There was a problem loading the requested app' and that the request timed out. – testingdj Mar 02 '22 at 15:39
  • @BYIRINGIROEmmanuel you think it has anything to do with authentication state ? or wrong expo local host ? – testingdj Mar 02 '22 at 15:41
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242546/discussion-between-byiringiro-emmanuel-and-testingdj). – Fiston Emmanuel Mar 02 '22 at 15:41

0 Answers0