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
};
};
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()}
/>
)
})}>
Nothing worked for me except this
headerBackButtonDisplayMode: "minimal",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With