Programming Tutorials

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

By: Gren in React-Native Tutorials on 2023-04-21  

To disable the back arrow in the header of a screen in a React Navigation Stack Navigator, you can set the headerLeft option to null in the screenOptions prop of the navigator. Here's an example:

<Stack.Navigator
screenOptions={{
headerBackTitle: false,
headerBackTitleVisible: false,
headerLeft: null // add this to disable the back arrow
}}>
<Stack.Screen name="MyScreen" component={MyScreen} />
...
</Stack.Navigator>

This will remove the back arrow from the header of all screens in the navigator. If you only want to remove it from a specific screen, you can set the headerLeft option in the options prop of that screen. For example:

<Stack.Screen
name="MyScreen"
component={MyScreen}
options={{ headerLeft: null }} // add this to disable the back arrow on this screen
/>





Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native