How to implement the nesting navigation (StackNavigator, DrawerNavigator) using react navigation 5

user_10227197 0
Viewed 40

I have module where I need to use the stack navigator in the LoginScreen however when the user successfully login drawer navigator will implement instead of stack navigator. Right now i got an error it says.

functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

What I have on my app.js

    const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const UnauthenticatedScreen = () => {   
        <Stack.Navigator>
                <Stack.Screen 
                    name="Login" 
                    component={Login} 
                    options=
                    {{
                        headerShown: false,
                    }}
                />
                <Stack.Screen 
                    name="Registration" 
                    component={Register} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTintColor:'#fff',
                    }}
                
                />

                <Stack.Screen 
                    name="Privacy" 
                    component={PrivacyPolicy} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTitle:'Privacy Policy',
                        headerTintColor:'#fff',
                    }}
                />

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

}

function AuthenticatedDriverScreen() {
    <Drawer.Navigator initialRouteName="DriverDashboard">
      <Drawer.Screen
        name="DriverDashboard"
        component={DriverDashboard}
        options={{ drawerLabel: 'Home' }}
      />
    </Drawer.Navigator>
}

function App() {
    const isLogin = false;
    return (
        <NavigationContainer>
         {isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
        </NavigationContainer>

    )
}
  
export default App;

Very well appreciated your help guys.

react-native reactjs
4 Answers

I found out the correct answer: Component instead of from render

<NavigationContainer>
         {isLogin ? <AuthenticatedDriverScreen/> : <UnauthenticatedScreen/>}
</NavigationContainer>
user_102271970

You are not returning the jsx but instead just outing it in the body of the function. But if you don’t want to write return manually, then use this syntax: const component = () => (jsx).

If you are lazy, just copy paste the fixed code:

   const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const UnauthenticatedScreen = () => (
        <Stack.Navigator>
                <Stack.Screen 
                    name="Login" 
                    component={Login} 
                    options=
                    {{
                        headerShown: false,
                    }}
                />
                <Stack.Screen 
                    name="Registration" 
                    component={Register} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTintColor:'#fff',
                    }}
                
                />

                <Stack.Screen 
                    name="Privacy" 
                    component={PrivacyPolicy} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTitle:'Privacy Policy',
                        headerTintColor:'#fff',
                    }}
                />

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

)

function AuthenticatedDriverScreen() {
    return (<Drawer.Navigator initialRouteName="DriverDashboard">
      <Drawer.Screen
        name="DriverDashboard"
        component={DriverDashboard}
        options={{ drawerLabel: 'Home' }}
      />
    </Drawer.Navigator>)
}

function App() {
    const isLogin = false;
    return (
        <NavigationContainer>
         {isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
        </NavigationContainer>

    )
}
  
export default App;

I haven’t tested the code but it should work. If it doesn’t please say.

user_135408990

try changing (I haven’t tested , please let me know the result)

function AuthenticatedDriverScreen() {

to

const AuthenticatedDriverScreen= () => {
user_118549860

Create Root Stack container and Drawer Container. if you want to show Drawer in stack container give component as Drawer Container.

import * as React from 'react';    
import { Button,SafeAreaView, View, Platform,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,TransitionPresets } from '@react-navigation/stack';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';
import { HeaderBackButton } from '@react-navigation/stack';


import { Provider } from 'react-redux';
import { store } from './src/redux/store/store';

import {appColor} from './src/helper/constants'
//screens
import {Splash} from './src/screen/Splash'
import {Login} from './src/screen/Login'
import {ForgotPassword} from './src/screen/ForgotPassword'
import {Register} from './src/screen/Register'
import {Home} from './src/screen/Home'
import {SideMenu} from './src/screen/Drawer'
import {MyRewards,SubCategorieslist} from './src/screen/MyRewards'
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

const Stack = createStackNavigator();

function App() {

  
  const RootStack = () =>{

  return (
    <Stack.Navigator style = {{flex:1}}>

      <Stack.Screen name="SplashScreen" component={Splash}  options={{headerShown: false}}/>
      <Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
      
      <Stack.Screen name ="Dashboard" component ={DrawerStack} options={{headerShown: false}}/>
     

      </Stack.Navigator>
    )
  }
  const DrawerStack = () =>{

    return(
    <Drawer.Navigator 
    drawerStyle={{width:300}}
    drawerType="slide"
    screenOptions={{
      headerStyle: {
        backgroundColor: appColor,
      },
      headerShown:true,
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    drawerContent={props => <SideMenu {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
  
      <Drawer.Screen name="MyRewards" component={MyRewards} options={{title:'My Rewards'}} />   
      <Drawer.Screen name="SubCategorieslist" component={SubCategorieslist} options= {({ navigation }) => ({title:'Sub-Categories',headerLeft: (props) => (<HeaderBackButton {...props} onPress={()=>{navigation.goBack(null)}}/>)})} />   
      
           
      </Drawer.Navigator>
    )

  }



  return (
    <View style = {{flex:1}}>

    <Provider store={store}>
    <NavigationContainer>
     <RootStack/>
    </NavigationContainer>
    
     </Provider>
    </View>
  );
}

export default App;
user_73165650
Related