React Navigation: Parallel Navigators in React Native in a nutshell

index.ios.js

import React from 'react'
import { AppRegistry } from 'react-native'
import setup from './setup'

AppRegistry.registerComponent('ReactNavigationTest', setup)

navigationMain.js

import { DrawerNavigator } from 'react-navigation'

import Overview from './screenOverview'
import Profile from './screenProfile'
import Settings from './screenSettings'

const MainNavigator = DrawerNavigator({
    Overview: { screen: Overview },
    Profile: { screen: Profile },
    Settings: { screen: Settings },
}, {
    initialRouteName: 'Overview',
})

export default MainNavigator

navigationOnboarding.js

import { StackNavigator } from 'react-navigation'

import Register from './screenRegister'
import Login from './screenLogin'
import PwdForget from './screenPwdforget'
import Tour from './screenTour'

const OnboardingNavigator = StackNavigator({
    Login: { screen: Login },
    Register: { screen: Register },
    PwdForgot: { screen: PwdForgot },
    Tour: { screen: Tour },
}, {
    initialRouteName: 'Login'
})

export default OnboardingNavigator

navigator.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import OnboardingNavigator from './navigationOnboarding'
import MainNavigator from './navigationMain'

class Navigator extends Component {
    render() {
        return this.props.login ? <MainNavigator/> : <OnboardingNavigator/>
    }
}
        
const mapStateToProps = state => ({ login: state })

export default connect(mapStateToProps, {}})(Navigator)

screenLogin.js

import React from 'react'
import { Text, View, Button } from 'react-native'
import { connect } from 'react-redux'

class Login extends React.Component {
    render() {
        return (
            <View>
                <Text>Name, Password</Text>
                <Button onPress={() => this.props.login()} title="Login" />
                <Button onPress={() => this.props.navigation.navigate('Register')} title="Register" />
                <Button onPress={() => this.props.navigation.navigate('PwdForgot')} title="Forget Password" />
                <Button onPress={() => this.props.navigation.navigate('Tour')} title="Tour" />
            </View>
        )
    }
}

function bindActions(dispatch) {
    return {
        login: () => dispatch({type:'LOGIN'}),
    }
}
const mapStateToProps = state => ({})

export default connect(mapStateToProps, bindActions)(Login)

screenOverview.js

import React from 'react';
import { Text, View, Button } from 'react-native';
import { connect } from 'react-redux'

class Overview extends React.Component {
    static navigationOptions = {
        drawer: () => ({
            label: 'My Overview',
        })
    }
    render() {
        return (
            <View>
                <Text>Something special</Text>
                <Button onPress={() => this.props.navigation.navigate('DrawerOpen')} title="Menu" />
                <Button onPress={() => this.props.logout()} title="Logout" />
            </View>
        );
    }
}

function bindActions(dispatch) {
    return {
        logout: () => dispatch({type:'LOGOUT'}),
    }
}

const mapStateToProps = state => ({})

export default connect(mapStateToProps, bindActions)(Ueberblick)

setup.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import Navigator from './navigator'
import { createStore } from 'redux';

function loginReducer(state = false, action) {
    switch (action.type) {
        case 'LOGIN': return true
        case 'LOGOUT': return false
        default: return state
    }
}
const store = createStore(loginReducer, false);

function setup():React.Component {
    class Root extends Component {
        constructor() {
            super()
            this.state = { store }
        }
        render() {
            return (
                <Provider store={this.state.store}>
                    <Navigator />
                </Provider>
            )
        }
    }
    return Root
}
export default setup