0
597
VistasReact Navigation, how to hide the back button title?
I'm using React Native to build an Android and iOS application. I'm using react-navigation to navigate between screens.
The problem is that the navigation on iOS is different from the one in Android (image below). I want both of them to be like on Android, so how can I hide the 'Search cars' from iOS?
I've set the navigation options as follows:
Screen.navigationOptions = () => {
const title = 'Search location';
return {
headerTitleStyle: {
fontSize: 18,
color: styles.headerTitle.color,
paddingTop: 5,
height: 40
},
headerStyle: {
backgroundColor: '#fdfdfd'
},
title
};
};
2 Respuestas
Responde la pregunta0
You need to set the headerBackTitleVisible: false to hide the back button title. It can be on a Screen's options, on a Navigator's screenOptions, or like in your case inside Screen.navigationOptions.
Screen.navigationOptions = () => {
const title = 'Search location';
return {
headerBackTitleVisible: false, // all you needed
headerTitleStyle: {
fontSize: 18,
color: styles.headerTitle.color,
paddingTop: 5,
height: 40
},
headerStyle: {
backgroundColor: '#fdfdfd'
},
title
};
};
0
As of version 5, it is the option headerBackTitleVisible in screenOptions
Example of usage:
1. In Navigator
<Stack.Navigator
screenOptions={{
headerBackTitleVisible: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
2. In Screen
if you want only to hide in the single screen you can do this by setting the screenOptions on the screen component see below for example:
<Stack.Screen options={{headerBackTitleVisible: false}} name="route-name" component={ScreenComponent} />
3. In Screen Navigation Options
Screen.navigationOptions = ({ navigation }) => {
headerTitle: 'Title',
headerLeft: () =>
<View>
/* custom View here - back icon/back button text */
</View
}
4. Common in navigator for all the screens
import { HeaderBackButton } from '@react-navigation/elements';
<Stack.Navigator
screenOptions={({ navigation }) => ({
headerLeft: () => (
<HeaderBackButton
labelVisible={false}
tintColor={'#FFF'}
onPress={() => navigation.goBack()}
/>
)
})}>