How to navigate to a top bar screen by clicking onPress?

Viewed 15

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.

0 Answers
Related