React Native Navigation Header Hide

React Native에서 Navigation의 Header를 숨기는 방법에 대해 설명드리겠습니다.

설정 방법

우선 React Native의 Navigation의 기본 설정은 여기를 참고하시기 바랍니다.

tsx

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/views/Home';

const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

App.tsx의 설정은 공식 홈페이지의 docs를 참조하여 작성하였습니다. 처음 Navigation을 생성하게 되면 Header가 자동으로 생성됩니다. Header의 옵션을 추가하지 않으면 Stack.Screen의 name이 Header의 Title로 자동 설정됩니다.

따라서 위와 같이 Header의 Title이 Home으로 설정된 것을 볼 수 있습니다. 하지만 메인 홈에서는 Header가 필요없는 경우도 있습니다.

tsx

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/views/Home';

const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Stack.Screen에서 options의 headerShown: false옵션을 추가하면 Header를 제거할 수 있습니다.

headerShown: false옵션을 추가하면 위와 같이 Status bar아래에 Header가 없어진 것을 확인할 수 있습니다.