CODEWITHSUNDEEP
typescriptreact-navigationreact-native-navigation
Lineu Pastorelli
Lineu Pastorelli

Reputation: 512

Remove header title from react-navigation

I'm using react-navigation version 6 and would like to know how to remove that title from the header, which comes by default, already displaying the name of the page that we pass.

In version 5, passing to headerMode this was already removed, but in this new version I didn't find how it can be removed.

My code:

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import { Home } from '../screens/Home';
import { Search } from '../screens/Search';

const { Navigator, Screen } = createStackNavigator();

export function AppStackRoutes() {
  return (
    <Navigator initialRouteName="Search">
      <Screen 
        name="Search" 
        component={Search} 
      />
      <Screen 
        name="Home" 
        component={Home} 
      />
    </Navigator>
  )
}

Upvotes: 1

Views: 8245

Answers (3)

Atul Tiwaree
Atul Tiwaree

Reputation: 105

In my project I've used, headerTitleStyle to hide my title of header, It worked as expected [ReactNavigationVersion 6]

  <Tab.Screen
    name="Search"
    component={Search}
    options={{
      headerTitleStyle: {display: 'none'},
      headerRight: () => {
        return <SearchBoxComponent />;
      },
    }}
  />

Upvotes: 1

Praveen
Praveen

Reputation: 41

set the headerTitle to an empty string, to hide title name

<Navigator 
    initialRouteName="Search" 
    screenOptions={{ headerTitle: '' }}
>
    <Screen 
        name="Search" 
        component={Search} 
    />
    <Screen 
        name="Home" 
        component={Home} 
    />
</Navigator>

Upvotes: 4

Mic Fung
Mic Fung

Reputation: 5692

use headerShown to hide or show the title bar.

Read this migration guide and from the doc:

Previously, you could pass headerMode="none" prop to hide the header in a stack navigator. However, there is also a headerShown option which can be used to hide or show the header, and it supports configuration per screen.

<Navigator 
    initialRouteName="Search" 
    screenOptions={{ headerShown: false }}
>
    <Screen 
        name="Search" 
        component={Search} 
    />
    <Screen 
        name="Home" 
        component={Home} 
    />
</Navigator>

Upvotes: 0

Related Questions