How to remove Header in functional component React Native

Question

I'm setting up a navigation in react-native using only functional component. How do i remove the header on the Screen?

const AppScreen = ({ navigation }) => {

  //Desc => removing header
  AppScreen.navigationOptions = {
    header: null
  };

  return (
    <>
      <Text>LoGinScreen</Text>
    </>
  );
};

No error message is shown but the app renders with a header.

Muhammad Shaheem · Accepted Answer · 2020-02-19 21:47:34Z

3

You can remove header from functional component

 const AppScreen = ({ navigation }) => {
 return (
   <Text>LoginScreen</Text>
 );
};

by using this out side of your functional component.

AppScreen.navigationOptions = {
header: null
};

answered Feb 19, 2020 at 21:47

Muhammad Shaheem

6655 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hong developer · Accepted Answer · 2019-07-10 15:27:46Z

It is common to want to configure the headers in a similar way on multiple screens.

class AppScreen extends React.Component {
  static navigationOptions = {
    header: null,
    /* No more header config here! */
  };

  /* render function, etc */
}

/* other code... */

You can move the configuration to the stack navigator under Properties defaultNavigationOptions.

headerMode Specifies how the header should be rendered:

float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
none - No header will be rendered.

const RootStack = createStackNavigator(
  {
    Apps: AppScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Apps',
    headerMode: 'none'
    /* if use header The header config from Apps is now here */
  }
);

Philipp Maurer · Accepted Answer · 2020-04-29 12:08:27Z

1

To remove the header on the screen for functional components, in the routes config do the following:

const AuthStack = createStackNavigator(
  {
    Login: AuthScreen
  },
  {
      headerMode: 'none'   //this will remove the header from the screen of AuthScreen
  })

edited Apr 29, 2020 at 12:08

Philipp Maurer

2,4886 gold badges21 silver badges26 bronze badges

answered Apr 29, 2020 at 11:18

Sanjeeb Kc

912 silver badges1 bronze badge

Comments

Auticcat · Accepted Answer · 2019-07-10 12:39:22Z

0

Set the defaultNavigationOptions in your routes configs:

createStackNavigator({
                screenName:
                    { screen: screenName },                            
                },
                {defaultStackNavigationOptions:{
                    header: () => null   //this in the screen where you want to hide the header
                       }
                    }
                )

answered Jul 10, 2019 at 12:39

Auticcat

4,4992 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to remove Header in functional component React Native

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related