A navigator can only contain ‘screen’ ‘group’ or ‘react.fragment’

A navigator in React can only contain ‘Screen’, ‘Group’, or ‘React.Fragment’.

The ‘Screen’ component is typically used to represent individual screens or pages in a navigation flow. It helps in defining the structure and content of a specific screen. Here’s an example:

    
      import React from 'react';
      import { View, Text } from 'react-native';
      import { createStackNavigator } from '@react-navigation/stack';
      
      function HomeScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Welcome to the Home Screen!</Text>
          </View>
        );
      }
      
      const Stack = createStackNavigator();
      
      function App() {
        return (
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
          </NavigationContainer>
        );
      }
      
      export default App;
    
  

In this example, the ‘HomeScreen’ component represents the home screen of our application. We use the ‘createStackNavigator’ function from the ‘@react-navigation/stack’ library to create our stack navigator. The ‘Stack.Screen’ component within the navigator represents an individual screen with a specified name and component. In this case, the ‘Home’ screen will render the ‘HomeScreen’ component.

The ‘Group’ component is used to group multiple ‘Screen’ components together to create nested navigations. It helps in organizing and structuring the navigation flow. Here’s an example:

    
      import React from 'react';
      import { View, Text } from 'react-native';
      import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
      
      function HomeScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Welcome to the Home Screen!</Text>
          </View>
        );
      }
      
      function ProfileScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Welcome to the Profile Screen!</Text>
          </View>
        );
      }
      
      const Tab = createBottomTabNavigator();
      
      function App() {
        return (
          <NavigationContainer>
            <Tab.Navigator>
              <Tab.Group>
                <Tab.Screen name="Home" component={HomeScreen} />
                <Tab.Screen name="Profile" component={ProfileScreen} />
              </Tab.Group>
            </Tab.Navigator>
          </NavigationContainer>
        );
      }
      
      export default App;
    
  

In this example, we use the ‘createBottomTabNavigator’ function from the ‘@react-navigation/bottom-tabs’ library to create a tab-based navigator. The ‘Tab.Group’ component allows us to group multiple ‘Tab.Screen’ components together. Each ‘Tab.Screen’ represents a screen within the tab navigation. In this case, we have the ‘Home’ and ‘Profile’ screens.

Lastly, the ‘React.Fragment’ component can be used to wrap multiple screens or groups if you don’t want to introduce any additional visual elements. It doesn’t render any extra elements to the DOM. Here’s an example:

    
      import React from 'react';
      import { View, Text } from 'react-native';
      import { NavigationContainer } from '@react-navigation/native';
      
      function HomeScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Welcome to the Home Screen!</Text>
          </View>
        );
      }
      
      function ProfileScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Welcome to the Profile Screen!</Text>
          </View>
        );
      }
      
      function App() {
        return (
          <React.Fragment>
            <NavigationContainer>
              <HomeScreen />
              <ProfileScreen />
            </NavigationContainer>
          </React.Fragment>
        );
      }
      
      export default App;
    
  

In this example, we wrap both the ‘HomeScreen’ and ‘ProfileScreen’ components inside the ‘React.Fragment’ component. This allows them to be rendered as separate screens within the navigation flow without any additional elements being added to the DOM.