Render a nested Tab screen in a Stack Navigator-CodePudding

Seems it should be so simple but I can't figure it out. I have a nested Tab Navigator inside a Stack Navigator like so:


function App(){

 const Main = () =>{
   <Tab.Navigator initialRouteName={"Players"}>
      <Tab.Screen name="Players" component={FindPlayers} />
      <Tab.Screen name="Requests" component={MatchRequests} />
   </Tab.Navigator>
 }


....

return (
<NavigationContainer>
 <Stack.Navigator initialRouteName={"Main"} >
  <Stack.Screen name="Main" component={Main}/>
  <Stack.Screen name="CourtPicker" component={CourtPicker}/>
 </Stack.Navigator>
</NavigationContainer>
)}

It renders a blank screen with the Header that says "Main" instead of rendering the FindPlayers component.

My expectation is that I've defined an initial route Main which should render my Main component which is a Tab navigator, which should in turn render the Players component because I've defined the initialRouteName as such.

What am I doing wrong here?

CodePudding user response：

according to Nesting navigators

Try :

   <Stack.Screen name="Main" component={Main} options={{
            headerShown: false,
          }}/>