CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Nick Arnie
Nick Arnie

Reputation: 378

React 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?

enter image description here

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

Upvotes: 11

Views: 12106

Answers (8)

Kaveh Movahedi
Kaveh Movahedi

Reputation: 166

Seems like you want to replace the back button when ever possible with a new icon, the easiest way would be replacing headerLeft in the navigation (e.g. Stack.Navigator component) here's an example code I used in my project:

<Stack.Navigator
    screenOptions={({ navigation }) => ({
        headerLeft: () => {
            if (navigation.canGoBack()) {
                return (
                    <Pressable
                        style={{ marginLeft: 10 }}
                        onPress={() => navigation.goBack()}>
                        <Feather
                            name="arrow-left"
                            size={24}
                            color={
                                theme === "light"
                                    ? "black"
                                    : "white"
                            }
                        />
                    </Pressable>
                )
            }
        },
    })}
>
    // screens
</Stack.Navigator>

This code will replace the back button with a new one where user can go back, so you wouldn't just show a back button when there's nothing to go to.

Upvotes: 0

Andr&#233; Abboud
Andr&#233; Abboud

Reputation: 2030

for react navigation v7

"@react-navigation/native": "^7.0.13",
"@react-navigation/native-stack": "^7.1.14",

you should use headerBackButtonDisplayMode: 'minimal',

<Stack.Navigator
          screenOptions={{
            headerBackButtonDisplayMode: 'minimal',
          }}>
    <Stack.Screen name="Home" component={HomeScreen} />
 </Stack.Navigator>

Upvotes: 0

Lasitha Lakmal
Lasitha Lakmal

Reputation: 880

Nothing worked for me except this

headerBackButtonDisplayMode: "minimal",

Upvotes: 4

Diego Assis
Diego Assis

Reputation: 11

I solved this problem as follows:

Import the useNavigation from '@react-navigation/native':

import { useNavigation } from '@react-navigation/native';

Import the Feather from '@expo/vector-icons':

import { Feather } from '@expo/vector-icons';

Create a variable receiving the useNavigation:

const navigation = useNavigation();

Inside the Stack.Screen, you add the option below, this way it replaces the default button for the 2 platforms (Android and iOS) with this new one that you are implementing:

  <Stack.Screen
    name="FinishOrder"
    component={FinishOrder}
    options={{
      title: 'Finishing',
      headerTitleStyle: {
        fontSize: 25,
        color: '#FFF'
      },
      headerTitleAlign: 'center',
      headerStyle: {
        backgroundColor: '#1D1D2E'
      },
      headerLeft: () => (
        <Feather
          name='arrow-left'
          size={35}
          onPress={() => navigation.goBack()}
          title="Voltar"
          color="#FF3F4B"
        />
      ),
    }} />

Result:

Final result

Upvotes: 1

rosnk
rosnk

Reputation: 1098

headerBackTitle: false worked for me.

<Stack.Navigator
  screenOptions={{
    headerBackTitle: false,
  }}
>

Upvotes: -3

Nikhil Dangi
Nikhil Dangi

Reputation: 359

headerBackVisible:false

add in navigation options

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 45883

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

Upvotes: 5

Nensi Kardani
Nensi Kardani

Reputation: 2366

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

Upvotes: 16

Related Questions