javascript - On clicking back button, go to home page if navigating through hamburger menu -

so below present navigation scenario app:

menu after clicking on hamburger icon

• home
• profile
• saved address
• wallet
• logout

none of above screens dependent on of other screens listed above.

hence, navigate using navigate.replace(). know, cannot pop or go if use replace.

what wanna achieve how gmail android app works. if navigate using hamburger menu , hit hardware button on android, go home screen before exiting app. in scenario, directly exits app.

below have presented small snippet of work until now:

app.android.js:

/**  * sample react native app  * https://github.com/facebook/react-native  * @flow  */  import react, { component } 'react'; import {   stylesheet,   text,   view,   touchableopacity,   backandroid,   navigator } 'react-native';  import drawer 'react-native-drawer';  // import icon close button import icon 'react-native-vector-icons/fontawesome';  // import route components import home './customer/home/home'; import profile './customer/profile/profile'; import myorders './customer/my_orders/my_orders'; import savedaddresses './customer/saved_addresses/saved_addresses'; import wallet './customer/wallet/wallet';  // import nav menu import menu './menu/menu';  /**  * navigationstyles={navigator.navigationbar.stylesios} props navigator.navigationbar  * apply ios styles android well. can apply android style on ios devices  * */   // //////////////////////////////////////////////////////////////////////// // icons // /////////////////////////////////////////////////////////////////////// // hamburger icon const hamburgericon = <icon name="bars" size={25} color={'#3d3d3d'} />;  // cart icon const carticon = <icon name="shopping-cart" size={25} color={'#3d3d3d'} />;   // //////////////////////////////////////////////////////////////////////// // make routes 1 below push screen new component // ///////////////////////////////////////////////////////////////////////  // home screen const homescene = {   title: 'home',   component: home,   passprops: {     name: 'home'   } };  // customer profile page const profile = {   title: 'profile',   component: profile,   passprops: {     name: 'profile'   } };  // customer's order page const myorders = {   title: 'my orders',   component: myorders,   passprops: {     name: 'my orders'   } };  // customer's saved address page const savedaddresses = {   title: 'saved addresses',   component: savedaddresses,   passprops: {     name: 'saved addresses'   } };  // customer's saved address page const wallet = {   title: 'wallet',   component: wallet,   passprops: {     name: 'wallet'   } };  const logout = {   title: 'home',   component: home,   passprops: {     name: 'logout'   } };  const menu = [   homescene,   profile,   myorders,   savedaddresses,   wallet,   logout ];  // //////////////////////////////////////////////////////////////////////// // android hardware button functionality // ///////////////////////////////////////////////////////////////////////  let _navigator; backandroid.addeventlistener('hardwarebackpress', () => {   if (_navigator && _navigator.getcurrentroutes().length > 1) {     _navigator.pop();     return true;   }   return false; });    /**  * class app app bootstraps  */ export default class app extends component {    // routes processed   renderscene(route, navigator) {     // set variable route     let routecomponent = route.component;      _navigator = navigator;      // props return components     return <routecomponent navigator={navigator} {...route.passprops} />;   }    static navigationbarroutemapper = opencontrolpanel => ({       leftbutton: function(route, navigator, index, navstate) {         return (           <touchableopacity style={navbarstyle.left} onpress={() => opencontrolpanel()}>             <view>               {hamburgericon}             </view>           </touchableopacity>         );       },       rightbutton: function(route, navigator, index, navstate) {         return (           <view style={navbarstyle.right}>             {carticon}             <view style={navbarstyle.counter}>               <text style={navbarstyle.countertext}>20</text>             </view>           </view>         );       },       title: function(route, navigator, index, navstate) {         return <text style={navbarstyle.title}>{route.title.touppercase()}</text>;       }   })    closecontrolpanel() {     this._drawer.close();   }    opencontrolpanel() {     this._drawer.open();   }    getnavigator(route) {     this.refs.navigator.replace(route);     this.closecontrolpanel();   }    render() {     return (       <drawer         ref={ (ref) => { this._drawer = ref; } }         type="overlay"         content={<menu navigator={this.getnavigator.bind(this)} menuitems={menu} closecontrolpanel={this.closecontrolpanel.bind(this)} />}         taptoclose={true}         opendraweroffset={0.2}         panclosemask={0.2}         panopenmask={20}         acceptpan={true}         closeddraweroffset={-3}         styles={drawerstyle}         tweenhandler={(ratio) => ({            // code maintain opacity main           // whilst opacity mainoverlay on screen faded.           main: { opacity: 1 },           mainoverlay: {             opacity: ratio / 2,             backgroundcolor: 'black',           }          })}>         <navigator           initialroute={homescene}           renderscene={this.renderscene}           ref="navigator"           navigationbar={             <navigator.navigationbar               routemapper={app.navigationbarroutemapper(this.opencontrolpanel.bind(this))}               style={navbarstyle.navbar}             />           }         />       </drawer>     );   } } 

note that, expecting behaviour (go home before exiting), if user navigates using menu.

example, if navigate profile , may saved address, on clicking back, home screen should appear before exiting. gmail android app best example.

okay, found solution tackle exiting app on clicking when routes replaced. so, how go home page before app exits:

backandroid.addeventlistener('hardwarebackpress', () => {   if (_navigator && _navigator.getcurrentroutes().length > 1) {     _navigator.pop();     return true;   }     // check if current route home on clicking   // if not navigate home else close app   else if(_navigator && _navigator.navigationcontext._currentroute.title !== 'home') {     _navigator.replace(homescene);     return true;   }    return false; }); 

this might not exact solution works me.