title: React Native - How to manage the native back button with Drawer Navigation
body: <p>I recreated the Drawer Navigation following this code: <a href="https://github.com/mariodev12/react-native-menu-drawer-navigator" rel="nofollow noreferrer">https://github.com/mariodev12/react-native-menu-drawer-navigator</a></p>
  
  <p>Everything works correctly but now I do not know how to handle the native button to go back .. I would like to always return to the previous page, but if you press twice in the home exit the app.</p>
  
  <p>This is my Code:</p>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>import React from 'react';
  import {StackNavigator} from 'react-navigation';
  import DrawerStack from './src/stacks/drawerStack';
  
  const Navigator = StackNavigator({
      drawerStack: {screen: DrawerStack}
  }, {
      headerMode: 'none',
      initialRouteName: 'drawerStack'
  })
  
  export default Navigator
  </code></pre>
  
  <blockquote>
    <p>drawerStack.js</p>
  </blockquote>
  
  <pre><code>import React from 'react'
  import {StackNavigator, DrawerActions} from "react-navigation";
  import {Text, View, TouchableOpacity} from 'react-native';
  import Home from "../components/home";
  import DrawerScreen from "./drawerScreen";
  
  const DrawerNavigation = StackNavigator({
      DrawerStack: {screen: DrawerScreen}
  }, {
      headerMode: 'float',
      navigationOptions: ({navigation}) =&gt; ({
          headerStyle: {
              backgroundColor: 'rgb(255,45,85)',
              paddingLeft: 10,
              paddingRight: 10
          },
          title: 'Home',
          headerTintColor: 'white',
          headerLeft: &lt;View&gt;
              &lt;TouchableOpacity
                  onPress={() =&gt; {
                      if (navigation.state.isDrawerOpen === false) {
                          navigation.dispatch(DrawerActions.openDrawer());
                      } else {
                          navigation.dispatch(DrawerActions.closeDrawer());
                      }
                  }}&gt;
                  &lt;Text&gt;Menu&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
      })
  })
  
  export default DrawerNavigation;
  </code></pre>
  
  <blockquote>
    <p>drawerScreen.js</p>
  </blockquote>
  
  <pre><code>import {DrawerNavigator} from 'react-navigation'
  import Home from '../components/home';
  import Login from '../components/login';
  import Contacts from '../components/contacts';
  import News from '../components/news';
  
  const DrawerScreen = DrawerNavigator({
      Home: {screen: Home},
      Login: {screen: Login},
      Contacts: {screen: Contacts},
      News: {screen: News}
  }, {
      headerMode: 'none',
      initialRouteName: 'Home'
  })
  
  export default DrawerScreen;
  </code></pre>
  
  <blockquote>
    <p>news.js "Example of one page"</p>
  </blockquote>
  
  <pre><code>import React from "react";
  import {Text, View} from 'react-native';
  
  export default class News extends React.Component {
      render() {
  
          return (
              &lt;View&gt;
                  &lt;Text&gt; Here Leave the News!! &lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>Now, how do I insert the back button in the header instead of the classic menu (DrawerStack) for only the 'News.js' page?</p>