How do I implement Logout in React Native using DrawerNavigation

Viewed 26

I have a bit of a Problem. I am trying to implement Logout from the Stacknavigator in React native. I have sought online and have not seen any good source to learn a thing or two from.

My source code for App.js is looking somewhat like this.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View , Image, TextInput, TouchableOpacity,Alert } from 'react-native';

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

import Splash from './src/Splash';
import Dashboard from './src/Dashboard';
import DubaiVisaRequest from './src/DubaiVisaRequest';
import HotelReserveRequest from './src/HotelReserveRequest';
import Login from './src/Login';

const DashboardNavigator = createStackNavigator({
    'Dashboard':{screen: Dashboard,
      navigationOptions: ({navigation}) => ({
        headerLeft: () => (
          <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} /></TouchableOpacity>
          )})
        },
      });

const DubaiVisaReqNavigator = createStackNavigator({
        'Dubai Visa Request':{screen: DubaiVisaRequest,
          navigationOptions: ({navigation}) => ({
            headerLeft: () => (
              <TouchableOpacity
              style={{marginLeft: 20}}
              onPress={() => navigation.toggleDrawer()}>
              <Icon name="menu" size={12} /></TouchableOpacity>
              )})
            },
          });

const HotelReqNavigator = createStackNavigator({
            'Hotel Reservation':{screen: HotelReserveRequest,
              navigationOptions: ({navigation}) => ({
                headerLeft: () => (
                  <TouchableOpacity
                  style={{marginLeft: 20}}
                  onPress={() => navigation.toggleDrawer()}>
                  <Icon name="menu" size={12} /></TouchableOpacity>
                  )})
                },
              });

const DrawerNavigator = createDrawerNavigator({
    Dashboard:{
        navigationOptions:{
            drawerLabel: 'Dashboard',
        },
        screen: DashboardNavigator,
    },

    DubaiVisaRequest:{
        navigationOptions:{
            drawerLabel: 'Dubai Visas',
        },
        screen: DubaiVisaReqNavigator,
    },

    HotelReserveRequest:{
        navigationOptions:{
            drawerLabel: 'Request Hotel',
        },
        screen: HotelReqNavigator,
    },
});

const AppSwitchNavigator = createSwitchNavigator({
    'Splash' : {screen: Splash},
    'Login' : {screen : Login},
    'Drawer' : {screen: DrawerNavigator}
    },
    {
        initialRouteName: 'Splash'
    })

const App = createAppContainer(AppSwitchNavigator);
export default App;

Please I would like to know how I can implement Logout, I tried something like this

const LogoutNavigator = createStackNavigator({
            'Hotel Reservation':{screen: Login,
              navigationOptions: ({navigation}) => ({
                headerLeft: () => (
                  <TouchableOpacity
                  style={{marginLeft: 20}}
                  onPress={() => navigation.navigate('Login')}>
                  <Icon name="menu" size={12} /></TouchableOpacity>
                  )})
                },
              });

But this does not work as I expect. Kindly Assist. I am a bit new to React native.

0 Answers
Related