How to move to a previous screen out of Drawer navigation by pressing one Drawer Item in React-Native?

Question

In my React-native project I have used one stack navigation to set the flow of screens navigation. For that I have Created a HomeScreen.js class and here's the code for that-

HomeScreen

import { createAppContainer } from 'react-navigation'
    class HomeScreen extends React.Component {
      state = {
        getValue: null,
      }

      async componentDidMount() {
        const token = await AsyncStorage.getItem('token');
        this.setState({ getValue: token });
      }

      render() {
        if(this.state.getValue !== null) {
          return (
            <AppStackNavigator/>
          );
        } 

      }
    }

    const AppStackNavigator = createAppContainer(createStackNavigator({

      LoginScreen: {screen:LoginScreen},
      NoteMeDrawer: {screen:NoteMeDrawer, 
        navigationOptions: {
          header:null        // this will do your task
        }
      },
      WelcomeScreen: {screen:WelcomeScreen},
      NoteMeHome: {screen:NoteMeHome},
      SettingsScreen: {screen:SettingsScreen},
      UpdateNotes: {screen:UpdateNotes},
      AllNotes: {screen:AllNotes},
    }, 

    {
      initialRouteName: 'LoginScreen'
    }

    ))

    export default HomeScreen; 

In my Starting Screen (LoginScreen), after a successful response I will start the drawer navigation screen NoteMeDrawer using the below code-

this.props.navigation.navigate('NoteMeDrawer');

In Drawer navigation class, I have initiated all the necessary classes that I want as drawer items.

Here's the code of my NoteMeDrawer class-

NoteMedrawer.js

class NavigationDrawerStructure extends React.Component {
  static navigationOptions = {
    header: null ,
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
         <Icon name='menu'/>
        </TouchableOpacity>
      </View>
    );
  }
}
const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: NoteMeHome,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),


  },
  ScreenInternal: {
    screen: ScreenInternal,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen With Navigation Drawer',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: MakeNote,
    navigationOptions: ({ navigation }) => ({
      title: 'Create Note',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: AllNotes,
    navigationOptions: ({ navigation }) => ({
      title: 'All Notes',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Drawer = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={25}                         
        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Create Note',
      drawerIcon: (
        <Image  source={require('../assets/icon_create_note.png')}  
        style={{height:25, width:25,}}                       
        />
      )
    },
  },

  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'All Notes',
      drawerIcon: (
        <Image  source={require('../assets/icon_all_notes.png')}  
        style={{height:25, width:25,}}                        
        />
      )
    },
  },

});

const DrawerNavigatorExample = createStackNavigator({
  Drawer: { screen: Drawer, navigationOptions: { header: null } },
  DetailsNote: {
    screen: DetailsNote,
    navigationOptions: { title: 'Details Note' },
  },

  UpdateNotes: {
    screen: UpdateNotes,
    navigationOptions: { title: 'Update Note' },
  },

});

export default createAppContainer(DrawerNavigatorExample);

Here's Screen Shot of how my drawer Items look like-

Now, the thing I want is to have one more drawer Item at below name "Log Out" and after pressing that user will go back to the LoginScreen.js class.

So, I am not having any idea how can I do that. It would be very nice if somebody suggest me to do that.

Answer 1

For this, you have to create a custom drawer instead of the default one,

contentComponent is the config option in which you can pass your drawer.

see details here

now after this, you'll need to add Logout text there manually below DrawerItems . and onPress of that text do reset stack or navigate somewhere