React native Question posted in
The official React Native documentation can be found here.

React native – Unable to remove header

For some reason I am not able to remove the header at the very top of my React Native app (see screenshot).

The app itself is contained in the AppMain component:

const App = () => {
  return (
    <PrincipalContextProvider>
      <AppMain />
    </PrincipalContextProvider>
  );
};

which produces this (note the white header at the top).

enter image description here

I am making use of components like react-navigation/native-stack and react-navigation/bottom-tabs which may produce something like this. But after setting screenOptions={{ headerShown: false }} on everything, and even removing the app content entirely:

const App = () => {
  return (
    <View>
      <Text>The text..</Text>
    </View>
  );
};

I’d still get this:

enter image description here

Apparently, there’s something else causing this and I am not sure what.

Tags:

2

Answers


  1. 0

    What happens when you set the flex and height?

    const App = () => {
  return (
    <View style={{height: '100%', flex:1}}> // Add style={{height: '100%', flex:1}}
      <Text>The text..</Text>
    </View>
  );
};
    Login or Signup to reply.
  2. 0

    The solution is not to put it in a Screen component, put it in your navigator Stack.Navigator instead

        <Stack.Navigator screenOptions={{
            headerShown: false,
            }}
          >
            ...
            <Stack.Screen name="Login" component={login} />
            ...
    </Stack.Navigator>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search