Redirect to another screen after login. (React Native)

Question

So I edited this with just one file; everything is there but I still can't seem to make it work.

Directory Structure:

LoginScreen.js

import {  StackNavigator, } from 'react-navigation';
import DrawerScreen from '../Containers/Drawer.js';


// PJDS all-in
import HomeScreen from '../screens/HomeScreen.js';
import SettingsScreen from '../screens/SettingsScreen.js';

import { DrawerNavigator } from 'react-navigation';

const Navigation=DrawerNavigator({
  Dashboard: {
    screen: HomeScreen
  },
  Course: {
    screen: SettingsScreen
  },
})
// PJDS end

class LoginScreen extends Component {
constructor(props){
    super(props)
}
showLogin(props){
    let { onLogin, onLogout, onUser, handleSubmit, auth } = props
    if(auth.access_token === '') {
        return (
        <View >
            <Field style={styles.input} autoCapitalize="none" placeholder="Email Cu" component={TInput} name={'email'} />
            <Field style={styles.input} autoCapitalize="none" placeholder="Password" secureTextEntry={true} component={TInput} name={'password'} />
            <Button
                title = "Login"
                color = "#236CF5"
                style = {{backgroundColor:'#F8F8F8'}}
                onPress = {handleSubmit(onLogin)}
                />
        </View>
        )
    }
    else {
        return (
            <Navigation />
        )
    }

}
render(){
    return this.showLogin(this.props)
   }
}

After I click login, only a blank screen will appear. There are no errors but when I swipe to the right, no drawer will show up.

What is the problem here?

Answer 1

The navigate variable has not been defined anywhere in your method.

Since you've already bound your screens to react-navigation, navigator, therefore you can get access to the props this.props.navigation which in turn has a method navigate.

let { {/* Other props */}, navigation } = props

...
onPress={()=> navigation.navigate('theDrawer')}

Answer 2

You should assign a width to your drawerNavigator

const Navigation = DrawerNavigator({
    Home: {
        screen: Home
    },
    Login: {
        screen: LoginScreen,
    },
}, {
    drawerWidth: 300,
    drawerBackgroundColor: '#00234b',
    contentOptions: {
        inactiveTintColor: '#FAFAFA',
        activeTintColor: '#2bbfed',
        activeBackgroundColor: '#00152d',
        labelStyle: {
            fontFamily: 'Montserrat-Medium'
        }
    },
});

To access your drawer navigator you should do this:

.....
onPress={() => this.props.navigation.navigate('DrawerToggle')}