I have 3 tabs and each tab contains a set of stack navigators.
const HomeNavigator = createStackNavigator();
const HomeStackNavigator = ({ navigation, route }) => {
return (
<HomeNavigator.Navigator>
<HomeNavigator.Screen
name="Home"
component={Home}
/>
<HomeNavigator.Screen
name="Profile"
component={Profile}
/>
<HomeNavigator.Screen
name="Settings"
component={Settings}
/>
</HomeNavigator.Navigator>
);
};
const StoreNavigator = createStackNavigator();
const StoreStackNavigator = ({ navigation, route }) => {
return (
<StoreNavigator.Navigator>
<StoreNavigator.Screen
name="OurStore"
component={Store}
/>
</StoreNavigator.Navigator>
);
};
const CommunityNavigator = createStackNavigator();
const CommunityStackNavigator = ({ navigation, route }) => {
return (
<CommunityNavigator.Navigator>
<CommunityNavigator.Screen
name="Community"
component={Community}
/>
<CommunityNavigator.Screen
name="CommunityReply"
component={CommunityReply}
options={communityReplyOptions}
/>
<CommunityNavigator.Screen
name="AskCommunity"
component={AskCommunity}
/>
</CommunityNavigator.Navigator>
);
};
Tab Navigator
const MainNavigator = createBottomTabNavigator();
const MainTabNavigator = () => {
return (
<MainNavigator.Navigator
screenOptions={tabScreenOptions}
tabBarOptions={tabBarOptions}
>
<MainNavigator.Screen
name="HomeTab"
component={HomeStackNavigator}
options={{ tabBarLabel: "Home" }}
/>
<MainNavigator.Screen
name="StoreTab"
component={StoreStackNavigator}
options={{ tabBarLabel: "Store" }}
/>
<MainNavigator.Screen
name="CommunityTab"
component={CommunityStackNavigator}
options={{ tabBarLabel: "Community" }}
/>
</MainNavigator.Navigator>
);
};
Now Home tab when a button clicked I need to navigate to CommunityReply Screen inside Community Tab Navigator. Can some please help me with this
Package versions
The below should work in this case:
navigation.navigate('CommunityTab', { screen: 'CommunityReply' });