React Native Drawer exit button

Question

i'm making an app, and i need to add a way to log out and to exit the app. my structure is like this:

and my Drawer name "Home", looks like this:

<Drawer.Navigator  initialRouteName='Inicio'screenOptions={{ headerShown : false }} >
  <Drawer.Screen
    name = "Inicio"
    component={Inicio} 
    options={{
      title: 'Inicio',
      drawerIcon: ({focused, size}) =>(
        <FontAwesome5
          name="home"
          size={size}
          color={focused ? '#0a0a0a' : 'black'}
        />
      ),
    }}/>
  
  <Drawer.Screen name = "Codigo" component={Factor}
    options={{
      title: 'Codigo',
      drawerIcon: ({focused, size}) =>(
        <FontAwesome5
          name="file-alt"
          size={size}
          color={focused ? '#0a0a0a' : 'black'}
        />
      ),
    }}
  />

  <Drawer.Screen name = "Cerrar" component={Cerrar}
    options={{
      title: 'Salir',
      drawerIcon: ({focused, size}) =>(
        <FontAwesome5
          name="sign-out-alt"
          size={size}
          color={focused ? '#0a0a0a' : 'black'}
        />
      ),
    }}
  />
  
</Drawer.Navigator>

It looks a bit more messy but those are just screens that have an icon next to the name.

So what i want is for when you press the drawer screen "Cerrar", it exits the app and if you open it again it runs from the start and not from the last screen that it was.

So i tried using BackHandler.exitApp() and what it does is minimize the app but if i re open it, it doesnt start from the start, it starts from the last screen it was, in my case the drawer screen "Cerrar".

score 0 · Answer 1 · answered Jul 27 '22 at 14:43

You can mount a different navigation component dynamically based on if the user is logged in or not, so when they log out they will be take to the (login, register, etc...) stack, and when they are logged in they will be able to see your main screens

{isLoggedIn ? <YourDrawerNavigator> : <AuthStackNavigator>}

I think that this approach is preferred especially on IOS cause they don't want apps to be able to kill themselves IIRC

Or you could manually reset your navigator to its initial state (code depends on which navigation library you are using)

or you could use something like react-native-exit-app https://github.com/wumke/react-native-exit-app

React Native Drawer exit button

1 Answers1