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

Answer 1

For the latest version React Navigation 5 with Typescript:

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

Answer 2

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

static navigationOptions = {
    headerLeft: null,
};

Answer 3

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.

Answer 4

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

Answer 5

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Answer 6

ReactNavigation v 5.0 - Stack option:

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