Disable back button in react navigation

Question

I m using react native navigation  react-navigation  StackNavigator   it starts from the Login page throughout the whole lifecycle of the app  I don t want to have a back option  returning to the Login screen  Does anyone know how it can be hidden on the screen after the login screen  BTW  I m also hiding it in the login screen by using    const MainStack   StackNavigator     Login        screen  Login      navigationOptions          title   Login         header            visible  false                                other screens here

User · Answer

We can fix it by setting headerLeft to null     static navigationOptions    navigation     gt        return           title   Rechercher une ville           headerLeft  null

User · Answer

You can hide the back button using left null  but for android devices it s still able to go back when the user presses the back button  You need to reset the navigation state and hide the button with left null Here are the docs for resetting navigation state https   reactnavigation org docs navigation-actions reset This solution works for react-navigator 1 0 0-beta 7  however left null no longer works for the latest version

User · Answer

i think it is simple just add headerLeft   null   i am using react-native cli  so this is the example    static navigationOptions         headerLeft   null

User · Answer

ReactNavigation v 5 0 - Stack option  options    headerLeft       gt      return  lt  gt  lt   gt

User · Answer

For latest version of React Navigation  even if you use null in some cases it may still show  back  written   Go for this in your main app js under your screen name or just go to your class file and add  -  static navigationOptions        headerTitle  Disable back Options      headerTitleStyle   color  white       headerStyle   backgroundColor  black       headerTintColor   red      headerForceInset   vertical   never       headerLeft

User · Answer

Have you considered using this props navigation replace   quot HomeScreen quot    instead of this props navigation navigate   quot HomeScreen quot     This way you are not adding anything to the stack  so HomeScreen won t wave anything to go back to if back button pressed in Android or screen swiped to the right in IOS  More informations check the Documentation  And of course you can hide the back button by setting headerLeft  null in navigationOptions

User · Answer

found it myself    adding       left  null    disable the default back button   const MainStack   StackNavigator     Login        screen  Login      navigationOptions          title   Login         header            visible  false                         FirstPage        screen  FirstPage      navigationOptions          title   FirstPage         header            left  null

User · Answer

react-navigation  versions    1 0 0-beta 9    navigationOptions        headerLeft  null

User · Answer

The best option to handle this situation is to use SwitchNavigator provided by React navigation  The purpose of SwitchNavigator is to only ever show one screen at a time  By default  it does not handle back actions and it resets routes to their default state when you switch away  This is the exact behavior that is needed in the authentication flow   This is a typical way to implement it    Create 2 stack navigators  One for authentication  sign in  sign up  forgot password  etc  and another for the main APP Create a screen in which you will check which route from switch navigator you want to show  I usually check this in splash screen by checking if a token is stored in Async storage    Here is a code implementation of above statements   x000D   x000D  import   createAppContainer  createSwitchNavigator   from  react-navigation   x000D  import   createStackNavigator   from  react-navigation-stack   x000D  import HomeScreen from    homeScreenPath   x000D  import OtherScreen from    otherScreenPath  x000D  import SignInScreen from    SignInScreenPath   x000D  import SplashScreen from    SplashScreenPath  x000D   x000D  const AppStack   createStackNavigator   Home  HomeScreen  Other  OtherScreen     x000D   x000D  const AuthStack   createStackNavigator   SignIn  SignInScreen     x000D   x000D   x000D  export default createAppContainer  x000D    createSwitchNavigator  x000D        x000D        Splash  SplashScreen  x000D        App  AppStack  x000D        Auth  AuthStack  x000D         x000D        x000D        initialRouteName   Splash   x000D        x000D      x000D     x000D   x000D   x000D    Now in SplashScreen you will check the token and navigate accordingly    x000D   x000D  import React from  react   x000D  import   x000D    ActivityIndicator  x000D    AsyncStorage  x000D    StatusBar  x000D    StyleSheet  x000D    View  x000D    from  react-native   x000D   x000D  class SplashScreen extends React Component   x000D    componentDidMount     x000D      this checkIfLogin    x000D      x000D   x000D       Fetch the token from storage then navigate to our appropriate place x000D    checkIfLogin   async      gt    x000D      const userToken   await AsyncStorage getItem  userToken    x000D   x000D         This will switch to the App screen or Auth screen and this splash x000D         screen will be unmounted and thrown away  x000D      this props navigation navigate userToken    App     Auth    x000D       x000D   x000D       Render any loading content that you like here x000D    render     x000D      return   x000D         lt View gt  x000D           lt ActivityIndicator   gt  x000D           lt StatusBar barStyle  default    gt  x000D         lt  View gt  x000D         x000D      x000D    x000D   x000D   x000D       Once you change routes in SwitchNavigator it removes the older route automatically and hence if you press the back button it will not take you to the auth login screens anymore

User · Answer

We need to set false to the gesturesEnabled along with headerLeft to null  Because we can navigate back by swiping the screen as well    navigationOptions        title   Title      headerLeft  null     gesturesEnabled  false

User · Answer

In react-navigation versions 5 x  you can do it like this  import   CommonActions   from   react-navigation native    navigation dispatch    CommonActions reset       index  1      routes            name   Home                     name   Profile           params    user   jane                              You can read more here

User · Answer

headerLeft  null   This won t work in the latest react native version  It should be   navigationOptions      headerLeft     gt         For Typescript    navigationOptions      headerLeft     gt  return null

User · Answer

For the latest version React Navigation 5 with Typescript   lt Stack Screen     name  Routes Consultations      component  Consultations      options   headerLeft       gt  null       gt

User · Answer

1  To make the back button disappear in react-navigation v2 or newer   navigationOptions         title   MyScreen       headerLeft  null     2  If you want to clean navigation stack   Assuming you are on the screen from which you want to navigate from   If you are using react-navigation version v5 or newer you can use navigation reset or CommonActions reset       Replace current navigation state with a new one      index value will be the current active route   navigation reset     index  0    routes     name   Profile            Source and more info here  https   reactnavigation org docs navigation-prop  reset  Or   navigation dispatch    CommonActions reset       index  1      routes            name   Home                     name   Profile           params    user   jane                               Source and more info here  https   reactnavigation org docs navigation-actions  reset  For older versions of react-navigation   v2-v4 use StackActions reset       import   StackActions  NavigationActions   from  react-navigation    const resetAction   StackActions reset     index  0      lt -- currect active route from actions array   actions        NavigationActions navigate   routeName   myRouteWithDisabledBackFunctionality                this props navigation dispatch resetAction     v1 use NavigationActions reset  3  For android you will also have to disable the hardware back button using the BackHandler   http   reactnative dev docs backhandler html  or if you want to use hooks   https   github com react-native-community hooks usebackhandler  otherwise the app will close at android hardware back button press if navigation stack is empty

User · Answer

using the BackHandler from react native worked for me  Just include this line in your ComponentWillMount    BackHandler addEventListener  hardwareBackPress   function    return true     it will disable back button on android device

User · Answer

The SwitchNavigator would be the way to accomplish this  SwitchNavigator resets the default routes and unmounts the authentication screen when the navigate action is invoked   import   createSwitchNavigator  createStackNavigator  createAppContainer   from  react-navigation       Implementation of HomeScreen  OtherScreen  SignInScreen  AuthLoadingScreen    goes here   const AppStack   createStackNavigator   Home  HomeScreen  Other  OtherScreen     const AuthStack   createStackNavigator   SignIn  SignInScreen      export default createAppContainer createSwitchNavigator          AuthLoading  AuthLoadingScreen      App  AppStack      Auth  AuthStack               initialRouteName   AuthLoading             After the user goes to the SignInScreen and enters their credentials  you would then call  this props navigation navigate  App

User · Answer

In Latest Version  v2  works headerLeft null  you can add in controller s navigationOptions as bellow  static navigationOptions         headerLeft  null

User · Answer

For react-navigation version 4 x  navigationOptions       gt           title   Configuration         headerBackTitle  null        headerLayoutPreset  center         headerLeft  null

User · Answer

Simply doing  headerLeft  null   might be deprecated by the time you read this answer  You should use following     navigationOptions             headerTitle    Title           headerLeft        gt

[reactjs] Disable back button in react navigation

Examples related to reactjs

Examples related to react-native

Examples related to navigation

Examples related to react-navigation