Revision history [back]

To conceal the Stack header on the home screen of React Native Expo Router, you can use the headerShown property in the options object for the screen component that represents the home screen.

Here's an example code snippet:

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home screen</Text>
    </View>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
       {/* Other screens */}
    </Stack.Navigator>
  );
}

export default App;

In the above code, the headerShown option is set to false for the HomeScreen component. This will hide the header for this screen only. If you want to hide the header for all screens, you can set the defaultScreenOptions property in the navigationOptions object for the StackNavigator. For example:

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Home screen</Text>
    </View>
  );
}

function App() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
      />
       {/* Other screens */}
    </Stack.Navigator>
  );
}

export default App;

In the above code, the screenOptions property for the StackNavigator is set to { headerShown: false }, which will hide the header for all screens.