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
})

in versin 4 and older try this: headerLeft:()=>null

Omar bakhsh
– Omar bakhsh

2021-02-01 02:52:32 +00:00
Commented Feb 1, 2021 at 2:52 — Omar bakhsh
– Omar bakhsh, Commented Feb 1, 2021 at 2:52

Florin Dobre · Accepted Answer · 2023-02-24 10:48:06Z

300

1) To make the back button disappear in react-navigation

v5 or newer:

{     
    navigationOptions:  {
    title: 'MyScreen',
    headerLeft: ()=> null,
    // `headerLeft: undefined` should work too
    // `headerLeft: null` should work but could trigger a TS error
}

NOTE: v6 has an extra option: headerBackVisible: false

Whether the back button is visible in the header. You can use it to show a back button alongside headerLeft if you have specified it.

https://reactnavigation.org/docs/native-stack-navigator/#headerbackvisible

v2-v4:

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, // <-- 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.

Additional sources: thank you to the users that added comments below and helped keeping this answer updated for v5+.

edited Feb 24, 2023 at 10:48

answered May 15, 2017 at 13:07

Florin Dobre

10.4k3 gold badges66 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gokul Kulkarni Over a year ago

This will remove back button, but in android we can still navigate using device back button. Is there a way to disable that as well?

kas Over a year ago

This answer expands on how to add params to this navigate action. The official navigate documentation is also helpful.

Manuel Over a year ago

And when you're in 2018 use "StackAction.reset(...)" instead of "NavigationActions.reset(...)", see reactnavigation.org/docs/en/stack-actions.html

Vitalii Obideiko Over a year ago

@FlorinDobre headerLeft: null is not really right way for v5 due to TS warnings, need to use headerLeft: () => null

herbie Over a year ago

V6^ headerBackVisible: false,

|

HoldOffHunger · Accepted Answer · 2020-08-10 20:40:41Z

59

Have you considered using this.props.navigation.replace( "HomeScreen" ) instead of this.props.navigation.navigate( "HomeScreen" ).

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

edited Aug 10, 2020 at 20:40

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

answered Sep 6, 2018 at 15:29

Tarik Chakur

1,73714 silver badges9 bronze badges

3 Comments

Deepak Pathak Over a year ago

you cannot pass params using replace.

Omar bakhsh Over a year ago

you should do for warning error fix ` ()=>null`

beck Over a year ago

tq it works... params can be passed as well

Subhashis Pandey · Accepted Answer · 2021-09-17 16:19:10Z

23

If your react navigation v6.x

options={{
   title: "Detail Pembayaran",
   headerTitleStyle:{
      fontWeight:'bold',
   },
   headerBackVisible:false
}}

Reference : React document

edited Sep 17, 2021 at 16:19

Subhashis Pandey

1,5381 gold badge13 silver badges17 bronze badges

answered Sep 17, 2021 at 3:40

havis .haltec

2312 silver badges2 bronze badges

1 Comment

Michael Brenndoerfer Over a year ago

This is the only solution that removed the default back button on Android for me.

Michel Floyd · Accepted Answer · 2021-10-07 17:46:59Z

22

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,
   gestureEnabled: false,
}

edited Oct 7, 2021 at 17:46

Michel Floyd

20.3k4 gold badges27 silver badges45 bronze badges

answered May 17, 2018 at 13:41

Gavidi Harikrishna

2812 silver badges12 bronze badges

2 Comments

showtime Over a year ago

gesturesEnabled doesnt even exist as property!

Falaen Over a year ago

Nice! gestureEnabled is exactly what I was looking for. Thx a lot!!

Eric Goerens · Accepted Answer · 2020-12-13 07:30:29Z

18

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.

edited Dec 13, 2020 at 7:30

Eric Goerens

7713 bronze badges

answered Apr 17, 2017 at 4:20

JXLai

3215 silver badges11 bronze badges

1 Comment

cameronmoreau Over a year ago

on iOS you can still slide from the edge of the screen to pop back. Resetting the navigation state is definitely needed.

OsamaD · Accepted Answer · 2019-03-29 11:23:46Z

14

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.

edited Mar 29, 2019 at 11:23

answered Mar 26, 2019 at 16:16

OsamaD

4718 silver badges13 bronze badges

1 Comment

georgiosd Over a year ago

This is Android only.

Hitesh Surani · Accepted Answer · 2021-12-17 05:04:17Z

8

For react-navigation V6.0

<Stack.Screen
          name={'Dashboard'}
          component={Dashboard}
          options={{
            gestureEnabled: false,
            headerShown: true,
            headerLeft: () => <></>,
          }}>
</Stack.Screen>

edited Dec 17, 2021 at 5:04

answered Dec 15, 2021 at 6:31

Hitesh Surani

13.7k6 gold badges59 silver badges70 bronze badges

Comments

Nguyễn Viết Thái · Accepted Answer · 2021-09-13 10:14:05Z

5

I'm using v6, it's works for me:

 <Stack.Screen
    name="ApparelsHome"
    component={ApparelsHome}
    options={{
      headerLeft: () => <></>,
    }}
/>

answered Sep 13, 2021 at 10:14

Nguyễn Viết Thái

2193 silver badges4 bronze badges

Comments

David Schumann · Accepted Answer · 2018-05-09 14:24:41Z

4

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,
      }
    },
  },

edited May 9, 2018 at 14:24

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Mar 16, 2017 at 11:52

EyalS

1,7023 gold badges12 silver badges28 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-09-15 11:45:48Z

4

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

edited Sep 15, 2019 at 11:45

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Nov 19, 2017 at 3:47

Vaibhav KB

1,74519 silver badges17 bronze badges

Comments

Yacine · Accepted Answer · 2020-07-21 13:12:37Z

4

For the latest version React Navigation 5 with Typescript:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />

answered Jul 21, 2020 at 13:12

Yacine

7532 gold badges8 silver badges14 bronze badges

Comments

mxdi9i7 · Accepted Answer · 2021-04-12 04:59:41Z

4

Since React Navigation v5.7, there's been a new official solution from the docs:

https://reactnavigation.org/docs/preventing-going-back

Use beforeRemove as a navigation listener to prevent back behavior from Android back button, header back button and custom back actions.

answered Apr 12, 2021 at 4:59

mxdi9i7

6974 silver badges15 bronze badges

1 Comment

idolize Over a year ago

Yep - this is great for preventing transitions due to unsaved changes. If your goal is to prevent going back to a login or onboarding screen, however, then you can just do navigation.replace instead of navigation.navigate.

Merrin K · Accepted Answer · 2022-08-09 04:55:00Z

4

TO REMOVE BACK HEADER BUTTON

 options={{ headerBackVisible:false,}}

Full Tag

<Stack.Screen name="Name" component={NameScreen} options={{ headerBackVisible:false,}} />

answered Aug 9, 2022 at 4:55

Merrin K

1,7901 gold badge19 silver badges32 bronze badges

Comments

Hadi Mir · Accepted Answer · 2019-12-28 09:10:23Z

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

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath" 
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath" 
import SplashScreen from "./SplashScreenPath"

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });

const AuthStack = createStackNavigator({ SignIn: SignInScreen });


export default createAppContainer(
  createSwitchNavigator(
    {
      Splash: SplashScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'Splash',
    }
  )
);

Now in SplashScreen you will check the token and navigate accordingly

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class SplashScreen extends React.Component {
  componentDidMount() {
    this.checkIfLogin();
  }

  // Fetch the token from storage then navigate to our appropriate place
  checkIfLogin = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this splash
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

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

Harsha Gihan Liyanage · Accepted Answer · 2022-03-08 10:04:35Z

3

import React,{useEffect,useState,useRef} from 'react';
import { BackHandler,View } from 'react-native';

export default function App() {

  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
    return () => backHandler.remove()
  }, [])

return(
<View>

</View>
)}

answered Mar 8, 2022 at 10:04

Harsha Gihan Liyanage

314 bronze badges

Comments

David Schumann · Accepted Answer · 2018-05-09 14:23:18Z

2

We can fix it by setting headerLeft to null

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}

edited May 9, 2018 at 14:23

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Mar 16, 2018 at 14:08

Klaudia Brysiewicz

1294 bronze badges

Comments

Mohammad Sadiq · Accepted Answer · 2020-03-01 16:58:03Z

2

Simply doing

headerLeft: null

might be deprecated by the time you read this answer. You should use following

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }

answered Mar 1, 2020 at 16:58

Mohammad Sadiq

5,23130 silver badges31 bronze badges

Comments

Ganjargal Bolor · Accepted Answer · 2020-07-27 14:05:23Z

2

ReactNavigation v 5.0 - Stack option:

options={{
headerLeft: () => { 
 return <></>; 
}
}}

edited Jul 27, 2020 at 14:05

answered Jul 27, 2020 at 12:56

Ganjargal Bolor

293 bronze badges

1 Comment

publicdomain Over a year ago

Please always describe what you are doing in your answer. It should be updated or removed. Read How to answer before you provide more answers ^^

charliebeckwith · Accepted Answer · 2019-01-26 01:55:31Z

1

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');

edited Jan 26, 2019 at 1:55

charliebeckwith

1,44911 silver badges30 bronze badges

answered Jan 25, 2019 at 22:58

Scott Davis

316 bronze badges

1 Comment

Peter Hull Jan 17 at 9:18

SwitchNavigator was removed in react-navigation 5.x, and the explanation for that is here: reactnavigation.org/docs/5.x/upgrading-from-4.x/…

Shahzad Javaid · Accepted Answer · 2021-12-04 10:22:20Z

1

You can also do headerLeft:()=>false to get rid of back button

<Stack.Screen name="ImageScreen" component={ShowImage} options={{title:"SMAART", headerLeft:()=>false}} />

answered Dec 4, 2021 at 10:22

Shahzad Javaid

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

NIKESH KUMAR · Accepted Answer · 2022-07-23 07:56:40Z

1

If you are using react native expo CLI then you can simply use

options={{headerBackVisible:false}}

answered Jul 23, 2022 at 7:56

NIKESH KUMAR

111 bronze badge

1 Comment

NIKESH KUMAR Over a year ago

If you want to completely hide the header of stack.navigator on your page just add options={{headerShown: false}}

Manish Singh Chouhan · Accepted Answer · 2022-12-13 10:14:37Z

1

You can use

options={{gestureEnabled: false}}

this you can declare where you are declaring your screen.

      <AuthStack.Screen name="Dashboard" component={DashBoardContainer} options={{gestureEnabled: false}} />

This works for me

answered Dec 13, 2022 at 10:14

Manish Singh Chouhan

4366 silver badges14 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-09-15 11:46:01Z

0

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

static navigationOptions = {
    headerLeft : null
};

edited Sep 15, 2019 at 11:46

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Apr 7, 2019 at 14:11

Cevin Ways

99411 silver badges13 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-09-15 11:46:35Z

0

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: " "
}

edited Sep 15, 2019 at 11:46

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Sep 28, 2018 at 9:51

Rishav Kumar

5,5302 gold badges19 silver badges34 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-09-15 11:46:40Z

0

In Latest Version (v2) works headerLeft:null. you can add in controller's navigationOptions as bellow

static navigationOptions = {
    headerLeft: null,
};

edited Sep 15, 2019 at 11:46

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Jul 13, 2018 at 4:20

tarikul05

1,9131 gold badge16 silver badges26 bronze badges

Comments

Lovekush Vishwakarma · Accepted Answer · 2019-09-15 15:41:05Z

0

For react-navigation version 4.x

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

answered Sep 15, 2019 at 15:41

Lovekush Vishwakarma

3,22925 silver badges26 bronze badges

Comments

asim mehmood · Accepted Answer · 2020-05-05 18:46:50Z

0

headerLeft: null

This won't work in the latest react native version

It should be:

navigationOptions = {
 headerLeft:()=>{},
}

For Typescript:

navigationOptions = {
 headerLeft:()=>{return null},
}

answered May 5, 2020 at 18:46

asim mehmood

13110 bronze badges

Comments

Ankur Kedia · Accepted Answer · 2021-01-03 12:36:54Z

0

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.

answered Jan 3, 2021 at 12:36

Ankur Kedia

3,8831 gold badge16 silver badges15 bronze badges

Comments

olawalejuwonm · Accepted Answer · 2021-05-12 22:06:15Z

0

Great Answers Provided Though, but i think this is quite simple

    useEffect(() => {
    props.navigation.addListener("beforeRemove", (e) => {
      e.preventDefault();
    });
  }, [props.navigation]);

answered May 12, 2021 at 22:06

olawalejuwonm

1,60517 silver badges22 bronze badges

Comments

Saurabh Chavan · Accepted Answer · 2022-06-08 12:26:27Z

0

I have working on old project where used React Navigation Version 4
I tried but only things work is ..

passwordEntry: {
      screen: passwordEntry,
      navigationOptions: {
        gestureEnabled: false,
      },
    },

answered Jun 8, 2022 at 12:26

Saurabh Chavan

1642 silver badges5 bronze badges

Collectives™ on Stack Overflow

Disable back button in react navigation

31 Answers 31

1) To make the back button disappear in react-navigation

2) If you want to clean navigation stack:

For older versions of react-navigation:

3) For android you will also have to disable the hardware back button using the BackHandler:

8 Comments

3 Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

31 Answers 31

1) To make the back button disappear in react-navigation

2) If you want to clean navigation stack:

For older versions of react-navigation:

3) For android you will also have to disable the hardware back button using the BackHandler:

8 Comments

3 Comments

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related