How can I navigate from a bottom tab to a screen which has Top Tabs, by clicking on press of a button?
Here is my code:
function GetTopTabsPartner() {
const TopTabBar = createMaterialTopTabNavigator();
return (
<TopTabBar.Navigator initialRouteName='PartnerBalance'>
<TopTabBar.Screen name={t('key:PartnerBalance')} component={PartnerBalance} />
<Tab.Screen name={t('key:PartnerBalanceHistory')} component={PartnerBalanceHistory} />
</TopTabBar.Navigator>
);
}
function HomeScreen({ ...props }) {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} options={{
tabBarIcon: ({ color, size }) => (<TouchableOpacity onPress={() => props.navigation.navigate('Home')}>{GetHomeIcon()}</TouchableOpacity>),
}} />
<Tab.Screen name="Partners" component={GetTopTabsPartner} options={{
tabBarIcon: ({ color, size }) => (<TouchableOpacity onPress={() => props.navigation.navigate('PartnerBalance')}>{GetPartnerIcon()}</TouchableOpacity>),
}} />
</Tab.Navigator>
);
}
function navigation() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{ headerShown: false, }} />
<Stack.Screen name="homeScreen" component={HomeScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
)
I want to click onPress of the Partners tab and go to the screen which contains GetTopTabsPartner Top Tabs.
If I try to navigate to PartnerBalance screen, it does but then it doesnt show the top tabs.