React native navigation Turn off header for all screens-CodePudding

I am wondering if there is a way to turn off headers for all screens instead of doing it in each screen. Something like adding NavigationOptions somewhere in my current code.

My code looks like this:

import { Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation'
import SigninScreen from './src/Screen/SigninScreen';
import MapScreen from './src/Screen/MapScreen';

const switchNavigator = createStackNavigator({
  loginFlow: createStackNavigator({
    Signin: SigninScreen
  }),
  mainFlow: createStackNavigator({
      Map: MapScreen
  })
})

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <App />
  )
}````

Thank you

CodePudding user response：

IN the stack navigator there is screensOptions prop. You can use that. I'll add an example code. Btw this using react-navigation 6.x

const MainStackNavigator: React.FC<Props> = (): JSX.Element => {
  const MainStack = createNativeStackNavigator();

  return (
    <MainStack.Navigator initialRouteName="loginFlow" screenOptions={{ headerShown: false }}>
      <MainStack.Screen name="loginFlow" component={SigninScreen} />
      <MainStack.Screen name="mainFlow" component={MapScreen} />
    </MainStack.Navigator>
  );
};

export default MainStackNavigator;