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 !