react-native bottom tabs does not apper How can I fix that while I use TabsNavigator and Stack.Navig-CodePudding

I want to use tabs with TabsNavigator but it didn't work. None of the bottom tabs are shown on the screen except header Main. When I use ;

    const App = () => {
     return (
         <NavigationContainer>
                <Tabs.Navigator>
                    <Tabs.Screen name="Home" component={ChatList} />
                    <Tabs.Screen name="Settings" component={Settings} />
                </Tabs.Navigator>
        </NavigationContainer>
      )
    }`

it worked but i want to use TabsNavigator How can I run like that



`App.js`

const Stack = createNativeStackNavigator()
const Tabs = createBottomTabNavigator()

in that part I want to control my tabs with tabs.navigator

const TabsNavigator = () => {
  <Tabs.Navigator>
    <Tabs.Screen name="ChatList" component={ChatList} />
    <Tabs.Screen name="Settings" component={Settings} />
  </Tabs.Navigator>
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
 `When I call TabsNavigator in this way it is not working`
      <Stack.Screen name="Main" component={TabsNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
 )
 }
 export default App;`

CodePudding user response：

const App = () => {
 return (
     <NavigationContainer>
            <Tabs.Navigator>
                <Tabs.Screen name="Home" component={ChatList} />
                <Tabs.Screen name="Settings" component={Settings} />
            </Tabs.Navigator>
    </NavigationContainer>
  )
}

just change {} to () and it worked

const TabsNavigator = () => (
      <Tabs.Navigator>
        <Tabs.Screen name="ChatList" component={ChatList} />
        <Tabs.Screen name="Settings" component={Settings} />
      </Tabs.Navigator>
    )