App.js

const App = () => {
return (
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  );
};

Tabs.js

const Tabs = () => {
  return (
    <Tab.Navigator initialRouteName='Team' screenOptions={{tabBarShowLabel: false, headerShown: false}} >
            <Tab.Screen 
            name="Home" component={Main} 
            options={{
            tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Main')} />),
            // tabBarIcon
            }} 
            />
            <Tab.Screen 
            name="Team" component={Team} 
            options={{
            tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Team')} />),
            }} 
            />
          </Tab.Navigator>
  );
}

Home.js

const Home = ({navigation}) => {
    return (
            
              <Stack.Navigator initialRouteName="Schedule">
                  <Stack.Screen name="Main" component={Main} 
                    options={{
                      title: 'Main',
                      headerShown: false
                    }}
                  />
                  
                  <Stack.Screen name="Team" component={Team} 
                    options={{
                      title: 'Team',
                      headerShown: false
                    }}
                  />
              </Stack.Navigator>
    );
  };

This is what I did. The screens with Main and Team. I'm unable to navigate through these screens. What is the issue with this implementation? And please help me to navigate through screens.!

CodePudding user response：

Your first tabBarButton tries to navigate to Main but the name you're using for the tab route is Home.

I'm assuming you intended to use the Home component in the first tab instead of the Main component.

I tried to create this snack with a working example: https://snack.expo.dev/9a0DOgzoB

Please do not use the same route name for multiple routes. You're using Team multiple times.