CODEWITHSUNDEEP
javascriptreact-native
Samuel Tengan
Samuel Tengan

Reputation: 345

How to remove Header in functional component React Native

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.

Upvotes: 3

Views: 2002

Answers (4)

Sanjeeb Kc
Sanjeeb Kc

Reputation: 91

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
  })

Upvotes: 1

Muhammad Shaheem
Muhammad Shaheem

Reputation: 665

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
};

Upvotes: 3

hong developer
hong developer

Reputation: 13926

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 */
  }
);

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

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
                       }
                    }
                )

Upvotes: 0

Related Questions