Hide header in stack navigator React navigation

Question

I m trying to switch screen using both stack and tab navigator   const MainNavigation   StackNavigator         otp    screen  OTPlogin          otpverify    screen  OTPverification         userVerified            screen  TabNavigator             List    screen  List              Settings    screen  Settings                                  In this case stacknavigator is used first and then tabnavigator  and i want to hide headers of stack navigator  WIt is not working properly when i use navigationoptions like    navigationOptions    header    visible  false       i m trying this code on first two components which are using in stacknavigator  if i use this line then getting some error like

User · Answer

const MyNavigator   createStackNavigator     FirstPage   screen   FirstPageContainer  navigationOptions    headerShown false        SecondPage   screen   SecondPageContainer  navigationOptions    headerShown  false            header null will be removed from upcoming versions

User · Answer

If your screen is a class component  static navigationOptions      navigation      gt        return          header       gt  null            code this in your targeted screen as the first method  function

User · Answer

You can hide StackNavigator header like this   const Stack   createStackNavigator    function StackScreen         return            lt Stack Navigator             screenOptions    headerShown  false    gt               lt Stack Screen name  Login  component  Login    gt               lt Stack Screen name  Training  component  Training    gt               lt Stack Screen name  Course  component  Course    gt               lt Stack Screen name  Signup  component  Signup    gt           lt  Stack Navigator gt

User · Answer

If you want to hide on specific screen than do like this      create a component export default class Login extends Component lt    gt      static navigationOptions     header  null

User · Answer

In your targeted screen you have to code this      static navigationOptions      navigation      gt        return          header  null

User · Answer

if you want remove the header from all screen goto app js and add this code to Stack Navigator screenOptions     headerShown  false

User · Answer

const CallStack   createStackNavigator     Calls  Calls    CallsScreen CallsScreen      headerMode   none      CallStack navigationOptions       tabBarLabel   Calls     tabBarIcon     focused      gt         lt TabBarIcon       focused  focused        name  Platform OS      ios     ios-options     md-options         gt           header  null           headerVisible  false

User · Answer

With latest react-navigation-stack v4 you can hide the header with import   createStackNavigator   from  react-navigation-stack    createStackNavigator    stackName      screen ComponentScreenName    navigationOptions        headerShown false

User · Answer

If you only want to remove it from one screen in react-native-navigation then    lt Stack Navigator gt       lt Stack Screen              name  Login               component  Login               options    headerShown  false     gt   lt  Stack Navigator gt

User · Answer

UPDATE as of version 5  As of version 5 it is the option headerShown in screenOptions  Example of usage    lt Stack Navigator   screenOptions        headerShown  false       gt     lt Stack Screen name  route-name  component  ScreenComponent    gt   lt  Stack Navigator gt    If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example    lt Stack Screen options   headerShown  false   name  route-name  component  ScreenComponent    gt    See also the blog about version 5   UPDATE As of version 2 0 0-alpha 36  2019-11-07   there is a new navigationOption  headershown          navigationOptions            headerShown  false            https   reactnavigation org docs stack-navigator headershown  https   github com react-navigation react-navigation commit ba6b6ae025de2d586229fa8b09b9dd5732af94bd  Old answer  I use this to hide the stack bar  notice this is the value of the second param          headerMode   none       navigationOptions            headerVisible  false            When you use the this method it will be hidden on all screens    In your case it will look like this   const MainNavigation   StackNavigator     otp    screen  OTPlogin      otpverify    screen  OTPverification      userVerified        screen  TabNavigator       List    screen  List        Settings    screen  Settings                    headerMode   none     navigationOptions        headerVisible  false

User · Answer

In the latest version of react-navigation this works to hide the header on every screen  headerMode   none    x000D   x000D   lt Stack Navigator headerMode   none    gt       lt Stack Screen name  Home  component  HomeScreen   gt       lt Stack Screen name  Details  component  DetailsScreen   gt     lt  Stack Navigator gt  x000D   x000D   x000D

User · Answer

This worked for me   const Routes   createStackNavigator   Intro        screen  Intro      navigationOptions            header  null                           initialRouteName   Intro

User · Answer

You can hide header like this    lt Stack Screen name  Login  component  Login  options   headerShown  false      gt

User · Answer

For me navigationOptions didn t work  The following worked for me   lt Stack Screen name  quot Login quot  component  Login        options                   headerShown  false                         gt

User · Answer

I am using header   null instead of header     visible   true   i am using react-native cli  this is the example    static navigationOptions        header   null

User · Answer

In the given solution Header is hidden for HomeScreen by-  options   headerShown false     lt NavigationContainer gt     lt Stack Navigator gt       lt Stack Screen name  Home  component  HomeScreen  options   headerShown false    gt       lt Stack Screen name  Details  component  DetailsScreen   gt     lt  Stack Navigator gt   lt  NavigationContainer gt

User · Answer

In react navigation 5 x you can hide the header for all screens by setting the headerMode prop of the Navigator to false    lt Stack Navigator headerMode  false  gt         Your screens      lt  Stack Navigator gt

User · Answer

It s important to match which version of react-navigation library you re using to the solution as they re all different  For those still using react-navigation v1 0 0 for some reason like me  both these worked   For disabling hiding header on individual screens   const AppScreens   StackNavigator          Main    screen  Main  navigationOptions    header  null          Login    screen  Login        Profile    screen  Profile  navigationOptions    header  null              For disabling hiding all screens at once  use this   const AppScreens   StackNavigator          Main    screen  Main       Login    screen  Login        Profile    screen  Profile                 headerMode   none

User · Answer

Just add this into your class component code snippet and Header will be hidden   static navigationOptions     header  null

User · Answer

If someone searching how to toggle header so in componentDidMount write something like     this props navigation setParams         hideHeader  true          When   static navigationOptions      navigation      gt        const  params         navigation state       if  params hideHeader          return           header  null                     return           headerLeft   lt Text gt Hi lt  Text gt           headerRight   lt Text gt Hi lt  Text gt           headerTitle   lt Text gt Hi lt  Text gt              And somewhere when event finish job   this props navigation setParams     hideHeader  false

User · Answer

for 4 x  the header  null is deprecated  should use headerShown  false instead ex  const AppScreens   createStackNavigator     cover        screen  Login      path    login       navigationOptions       gt           headerShown  false

User · Answer

On v4 simply use below code in the page you want to hide the header export default class Login extends Component       static navigationOptions             header  null          refer to Stack Navigator

User · Answer

This will remove the header from the component class  export default class SampleClass extends Component       navigationOptions            headerMode   none

User · Answer

lt Stack Screen     name  SignInScreen      component  Screens SignInScreen      options    headerShown  false        gt    options    headerShown  false    works for me        react-navigation native     5 0 7        react-navigation stack     5 0 8

User · Answer

Add new navigationOptions object in the stackNavigator   Try this     const MainNavigator   createStackNavigator     LoginPage   screen   LoginPageContainer  navigationOptions    header  null        MiddlePage   screen   MiddlePageContainer  navigationOptions    header  null        SMS   screen  ShowSmsContainer  navigationOptions    header  null        Map   screen  ShowMapContainer  navigationOptions    header  null           Hope it helps

User · Answer

For the single screen  you can set header null or headerShown  false in createStackNavigator like this const App   createStackNavigator    First    screen  Home  navigationOptions      header  null                                        Hide the header from all the screens in once using defaultNavigationOptions const App   createStackNavigator    First      screen  HomeActivity           defaultNavigationOptions      header  null

User · Answer

All the answer are showing how to do it with class components  but for functional components you do   const MyComponent        gt        return            lt SafeAreaView gt               lt Text gt MyComponent lt  Text gt           lt  SafeAreaView gt           MyComponent navigationOptions        navigation        gt        return           header  null           If you remove the header your component may be on places where you can t see it  when the phone don t have square screen  so it s important to use it when removing the header

User · Answer

This is working for stack navigation   lt Stack Screen     name  Home      component  HomeComponent      options            headerShown  false           gt

[javascript] Hide header in stack navigator React navigation

Examples related to javascript

Examples related to react-native

Examples related to react-navigation

Examples related to expo