A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as-CodePudding

I was trying to use TabNavigator in expo, but I have a problem, I have created a component where I have all the routes in a Tab, and in the other component I am only importing it.

in this component I have all the routes of my app:

const AppRouter = () => {
  const Stack = createNativeStackNavigator();
  const { user } = useContext(AuthContext);

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      {!user ? (
        <>
          <Stack.Screen name="login" component={Login} />
          <Stack.Screen name="register" component={Register} />
        </>
      ) : (
        <>
          <BottomTap />
        </>
      )}
    </Stack.Navigator>
  );
};

and in this component I am creating the Tabs with their routes:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "../../screens/Home";

const Tab = createBottomTabNavigator();

const BottomTap = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="home" component={Home} />
    </Tab.Navigator>
  );
};

export default BottomTap;

CodePudding user response：

Like the error says, navigators can only contain other navigators - not even custom components that contain only navigators. You can solve this by putting your tab navigator component inside a screen.

Instead of

<BottomTap />

Use

<Stack.Screen name="bottomTap" component={BottomTap} />

You can read more about this in the "Nesting Navigators" section of the React Navigation docs: https://reactnavigation.org/docs/nesting-navigators/

CodePudding user response：

You are adding a React component inside of a navigator instead of 'Screen', 'Group' or 'React.Fragment'. The correct way to add a navigator inside another is:

...
{!user ? (
<>
    <Stack.Screen name="login" component={Login} />
    <Stack.Screen name="register" component={Register} />
</>
) : (
<>
    <Stack.Screen name="bottomTap" component={BottomTap} />
</>
)}
...