CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigation
Ibad
Ibad

Reputation: 784

Remove Header in React navigation v6

Remove Header in React navigation 6 with custom style here is code foe stack navigation

 <NavigationContainer>
  <Stack.Navigator
    initialRouteName='OtpScreen'
    // screenOptions={{
    //   headerShown: false,
    // }}
    screenOptions={{ headerMode: 'none' }}
  >
    <Stack.Screen
      options={{ headerShown: false }}
      name='Tabs'
      component={MyTabs}
    />

  </Stack.Navigator>
</NavigationContainer>

tab navigation

   <Tab.Navigator
  useHeaderHeight={false}
  screenOptions={
    ({
      headerShown: false,
    },
    ({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
        } else if (route.name === 'Settings') {
          iconName = focused ? 'ios-list' : 'ios-list';
        }

        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: 'tomato',
      tabBarInactiveTintColor: 'gray',
    }))
  }
>

I use every possible solution still not get the answer I want to use it with custom style as I shown

Upvotes: 6

Views: 8324

Answers (3)

Jorge Santos
Jorge Santos

Reputation: 46

In my case, i had to put HeaderShow and HeaderMode inside at the same screenOptions

<Stack.Navigator
    initialRouteName="Home"
    screenOptions={{
      headerShown: false,
      headerMode: 'none',
    }}
  > </Stack.Navigator>

Upvotes: 0

Bhagwat K
Bhagwat K

Reputation: 3142

In react-navigation v6 following worked for me

options={{ headerShown: false }}

Here is the complete example for stack level:

 <Stack.Navigator
    name="Auth"
    initialRouteName="SignIn"
    options={{ headerShown: false }}>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </Stack.Navigator>

Here is the complete example for screen level:

    <Stack.Navigator
        name="Auth"
        initialRouteName="SignIn">
        <Stack.Screen name="SignIn" component={SignInScreen}   options={{ headerShown: false }}/>
        <Stack.Screen name="SignUp" component={SignUpScreen}  options={{ headerShown: false }}/>
      </Stack.Navigator>

Upvotes: 0

Ibad
Ibad

Reputation: 784

Add like this

 <Stack.Navigator
    initialRouteName='OtpScreen'
    screenOptions={{
      headerShown: false,
    }}
    screenOptions={{ headerMode: 'none' }}
  ></Stack.Navigator>

headerShown: false, this will do work

Upvotes: 7

Related Questions