Question 225765 in React native Question posted in
The official React Native documentation can be found here.

Error with react native bottom tab navigator

Here is the full error: ERROR Error: A navigator can only contain ‘Screen’, ‘Group’ or ‘React.Fragment’ as its direct children (found ‘ ‘). To render this component in the navigator, pass it in the ‘component’ prop to ‘Screen’.

This error is located at:
in StackNavigator (created by StackNavigator)
in StackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

app.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import RegisterScreen from './screens/register';
import LoginScreen from './screens/login';
import SearchScreen from './screens/search';
import DeleteScreen from './screens/delete'; // Import the DeleteScreen component
import firebase from 'firebase';
import { firebaseConfig } from './config';
import MainTabNavigator from './navigation/tabNavigator';

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={'Dashboard'}>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="Dashboard" component={MainTabNavigator} /> 
    </Stack.Navigator>
  );
};


export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

tabNavigator.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SearchScreen from '../screens/search';
import DeleteScreen from '../screens/delete';

const Tab = createBottomTabNavigator();

export default class MainTabNavigator extends React.Component {
    render() 
  {return (
    <Tab.Navigator>
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Delete" component={DeleteScreen} />
    </Tab.Navigator>
  );}
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just wrote the function in app.js

    import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import RegisterScreen from './screens/register';
import LoginScreen from './screens/login';
import SearchScreen from './screens/search';
import DeleteScreen from './screens/delete'; // Import the DeleteScreen component
import firebase from 'firebase';
import { firebaseConfig } from './config';
import MainTabNavigator from './navigation/tabNavigator';

if (!firebase.apps.length) {
 firebase.initializeApp(firebaseConfig);
} else {
 firebase.app();
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


const StackNavigator = () => {
 return (
   <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={'Dashboard'}>
     <Stack.Screen name="Login" component={LoginScreen} />
     <Stack.Screen name="Register" component={RegisterScreen} />
     <Stack.Screen name="Dashboard" component={tabNavigator} /> 
   </Stack.Navigator>
 );
};
const tabNavigator = () =>{
 return(
   <Tab.Navigator screenOptions={{ headerShown: false }}>
   <Tab.Screen name="Search" component={SearchScreen} />
   <Tab.Screen name="Delete" component={DeleteScreen} />
 </Tab.Navigator>
 )
}


export default function App() {
 return (
   <NavigationContainer>
     <StackNavigator />
   </NavigationContainer>
 );
}

  2. 0

    Here is how I have done the above scenario:

    /* MainStackNavigator.js */

const Tab = createBottomTabNavigator()

const TabNavigator = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name="TAB1" component={TabOne}/>
            <Tab.Screen name="TAB2" component={TabTwo}/>
        </Tab.Navigator>
    )
}

const Stack = createNativeStackNavigator()

const MainStackNavigator = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName='Splash'>
                <Stack.Screen name='Splash' component={SplashScreen} />
                <Stack.Screen name='Login' component={LoginScreen} />
                <Stack.Screen name='Tab' component={TabNavigator} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

    Try this way keeping both navigators in a common file, and then use it in App.js like this:

    /* App.js */

import MainStackNavigator from './src/navigation/MainStackNavigator';

const App = () => {
  return (
        <View style={appStyles.fullFlex}>
          <MainStackNavigator />
          <Toast />
        </View>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search