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.

Answer 1

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