3

My React Native 0.61.5 uses react-navigation 5.1. Here is the root navigation code:

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function App() {

  //const Appscreen = () => (<AppScreen data={data}/>);

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen}}/>
        <Stack.Screen name="App" component={AppScreen} } />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

The component AppScreen return a stack like this:

return (
    <NavigationContainer independent={true}>
      <BTab.Navigator>
          <BTab.Screen name="Event" component={Eventstack} />
          <BTab.Screen name="Group" component={Groupstack} />
          <BTab.Screen name="Contact" component={Contactstack} />
      </BTab.Navigator>
    </NavigationContainer>
  );

I notice that on the screen there are double header:

enter image description here

How can I remove the App header and only keep the Group?

halfer
  • 19,824
  • 17
  • 99
  • 186
user938363
  • 9,990
  • 38
  • 137
  • 303
  • Unrelated to your question, but remove `NavigationContainer indepenent={true}`. You're supposed to use only one `NavigationContainer` at the root of your app. Another problem is that you're defining `AppScreen` inside the `App` component. You need to move it outside. – satya164 Mar 25 '20 at 10:57
  • Agree, I added 2nd NavigationContainer to see if the extra header disappears. Did you mean having AppScreen as a separate functional component? The SplashScreen is just for retrieving data which require async. The App component looks a little awkward. – user938363 Mar 25 '20 at 15:38

1 Answers1

7

add with the screen that you want to hide the header.

options= {{
  headerShown: false
}}

For further reading, kindly have a look at https://reactnavigation.org/docs/stack-navigator/#headershown

Bataklik
  • 155
  • 3
  • 10
Anson Mathew
  • 420
  • 3
  • 10