Nested navigation Deep Linking with Expo React Native

771 Views Asked by At

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 !

0

There are 0 best solutions below