Drawer + Tab + Stack navigators (nested all 3)

[hansfpc]

[hansfpc]

Can we have an example?

[walter211]

stucked on nested routers with redux

[shubhnik]

@hansfpc @walter211 , I will try to cover that scenario once I get some time. If you or anyone has implemented it by now, I would love you to share that piece. Thanks :)

[hrmshandy]

I try using drawer, but I got error

this is my router ` import React from 'react'; import { Text, Animated, Easing } from 'react-native'; import { DrawerNavigator, StackNavigator } from 'react-navigation'; import LoginScreen from '../screens/Login'; import HomeScreen from '../screens/Home'; import Screen1 from '../screens/Screen1'; import Screen2 from '../screens/Screen2'; import Screen3 from '../screens/Screen3';

// drawer stack const DrawerStack = DrawerNavigator({ Home: { screen: HomeScreen }, Screen1: { screen: Screen1 }, Screen2: { screen: Screen2 }, Screen3: { screen: Screen3 }, }, { drawerPosition: 'right', initialRouteName: 'Home', });

const DrawerNavigation = StackNavigator({ DrawerStack: { screen: DrawerStack } }, { headerMode: 'none' });

// Manifest of possible screens const Nav = StackNavigator({ Login: { screen: LoginScreen }, Main: { screen: DrawerNavigation } }, { headerMode: 'none', title: 'Main', initialRouteName: 'Login' });

export default Nav; `

navigation reducer ` import { NavigationActions } from 'react-navigation'; import Navigator from '../navigators/router'; import { Login, Logout, NavigateToLogoutScreen } from '../actions/auth';

const ActionForLoggedOut = Navigator.router.getActionForPathAndParams( 'Login' );

const ActionForLoggedIn = Navigator.router.getActionForPathAndParams( 'Main' );

const stateForLoggedOut = Navigator.router.getStateForAction( ActionForLoggedOut );

const stateForLoggedIn = Navigator.router.getStateForAction( ActionForLoggedIn, stateForLoggedOut );

const initialState = { stateForLoggedOut, stateForLoggedIn };

const navigationReducer = (state = initialState, action) => { let nextState;

// console.log(action.type);

switch (action.type) {

    case Login:
        return {
            ...state,
            stateForLoggedIn: Navigator.router.getStateForAction(
                ActionForLoggedIn,
                stateForLoggedOut
            )
        };

    // case 'Navigation/BACK':
    //     console.log('back');
    //     return {
    //         ...state,
    //         stateForLoggedOut: Navigator.router.getStateForAction(
    //             NavigationActions.back(),
    //             stateForLoggedOut
    //         )
    //     };

    case Logout:
        console.log('logout');
        return {
            ...state,
            stateForLoggedOut: Navigator.router.getStateForAction(
                NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: 'Login' })]
                })
            )
        };

    /* Other logic for logging out, more cleaner but unlike the above isn't telling the reader 
           that navigation is reset, that's why I chose the *reset* one for the article. I prefer
           this one, what about you?
        
        case 'LOGOUT':
            nextState = { ...state, initialStateForLoggedIn, initialStateForLoggedOut}
            break;
    */

    case NavigateToLogoutScreen:
        return {
            ...state,
            stateForLoggedIn: {
                ...state.stateForLoggedIn,
                routes: state.stateForLoggedIn.routes.map(
                    route =>
                        route.routeName === 'Main'
                            ? { ...route, index: 2 }
                            : { ...route }
                )
            }
        };

    default:
        return {
            ...state,
            stateForLoggedIn: Navigator.router.getStateForAction(
                action,
                state.stateForLoggedIn
            )
        };
}

};

export default navigationReducer;

`

and this is the error