CODEWITHSUNDEEP
reactjsreact-nativenavigationreact-navigation
EyalS
EyalS

Reputation: 1692

Disable back button in react navigation

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

Upvotes: 121

Views: 222663

Answers (30)

Leandro Scarassatti
Leandro Scarassatti

Reputation: 1

For react-native 0.73.x if you want to completely disable the back button on entire APP in just add into your MainActivity.kt:

...
 override fun onBackPressed() {
  //Do nothing or log? 
 }
...

Its overrides the backButton on entire Android activity.

Upvotes: 0

Florin Dobre
Florin Dobre

Reputation: 10252

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+.

Upvotes: 300

Manish Singh Chouhan
Manish Singh Chouhan

Reputation: 401

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

Upvotes: 1

Merrin K
Merrin K

Reputation: 1790

TO REMOVE BACK HEADER BUTTON

 options={{ headerBackVisible:false,}}

Full Tag

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

Upvotes: 4

NIKESH KUMAR
NIKESH KUMAR

Reputation: 11

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

options={{headerBackVisible:false}}

Upvotes: 1

Saurabh Chavan
Saurabh Chavan

Reputation: 164

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

Upvotes: 0

Harsha Gihan Liyanage
Harsha Gihan Liyanage

Reputation: 31

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

Upvotes: 3

Hitesh Surani
Hitesh Surani

Reputation: 13577

For react-navigation V6.0

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

Upvotes: 8

Shahzad Javaid
Shahzad Javaid

Reputation: 11

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

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

Upvotes: 1

Gavidi Harikrishna
Gavidi Harikrishna

Reputation: 281

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

Upvotes: 22

havis .haltec
havis .haltec

Reputation: 231

If your react navigation v6.x

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

Reference : React document

Upvotes: 23

Nguyễn Viết Th&#225;i
Nguyễn Viết Th&#225;i

Reputation: 219

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

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

Upvotes: 5

olawalejuwonm
olawalejuwonm

Reputation: 1535

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

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

Upvotes: 0

mxdi9i7
mxdi9i7

Reputation: 697

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.

Upvotes: 4

Ankur Kedia
Ankur Kedia

Reputation: 3873

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.

Upvotes: 0

JXLai
JXLai

Reputation: 321

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.

Upvotes: 18

Tarik Chakur
Tarik Chakur

Reputation: 1737

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

Upvotes: 59

Ganjargal Bolor
Ganjargal Bolor

Reputation: 29

ReactNavigation v 5.0 - Stack option:

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

Upvotes: 2

Yacine
Yacine

Reputation: 753

For the latest version React Navigation 5 with Typescript:

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

Upvotes: 4

asim mehmood
asim mehmood

Reputation: 131

headerLeft: null

This won't work in the latest react native version

It should be:

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

For Typescript: 

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

Upvotes: 0

Mohammad Sadiq
Mohammad Sadiq

Reputation: 5241

Simply doing

headerLeft: null

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

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

Upvotes: 2

Hadi Mir
Hadi Mir

Reputation: 5133

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.

  1. Create 2 stack navigators: One for authentication (sign in, sign up, forgot password, etc) and another for the main APP
  2. 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

Upvotes: 3

Lovekush Vishwakarma
Lovekush Vishwakarma

Reputation: 3179

For react-navigation version 4.x

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

Upvotes: 0

tarikul05
tarikul05

Reputation: 1913

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

static navigationOptions = {
    headerLeft: null,
};

Upvotes: 0

Rishav Kumar
Rishav Kumar

Reputation: 5460

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

Upvotes: 0

Cevin Ways
Cevin Ways

Reputation: 984

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

static navigationOptions = {
    headerLeft : null
};

Upvotes: 0

Vaibhav KB
Vaibhav KB

Reputation: 1745

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Upvotes: 4

OsamaD
OsamaD

Reputation: 471

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.

Upvotes: 14

Scott Davis
Scott Davis

Reputation: 31

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

Upvotes: 1

EyalS
EyalS

Reputation: 1692

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

Upvotes: 4

Related Questions