[리액트 네이티브] StatusBar 색상 바꾸기

Android

안드로이드에서는 최상단 StatusBar 영역이 회색으로 보인다.

변경 전

적용

StatusBar에 backgroundColor Props 를 설정하면 안드로이드의 StatusBar 색상이 지정한 색상으로 변경

import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const formatted = `${year}년 ${month}월 ${day}일`;

  const {top} = useSafeAreaInsets();

  return (
    <>
      <View />
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>{formatted}</Text>
      </View>
    </>
  );
}

변경 후

iOS

iOS의 StatusBar는 StatusBar 컴포넌트로 배경색을 지정할 수 없다.

SafeAreaView의 상단 여백을 없앤 다음, 그 영역을 원하는 색상을 가진 View로 채워야 한다.

💡 SafeAreaView의 목적은 장치의 안전 영역 경계 안에서 컨텐츠를 렌더링하는 것이다. iOS 11 이상이 설치된 아이폰에만 적용된다. SafeAreaView는 중첩된 컨텐츠를 렌더링하고 탐색 표시줄, 탭 표시줄, 툴바, 기타 상위 뷰에서 다루지 않는 뷰 부분을 반영하도록 패딩을 자동 적용한다. 가장 중요한 것은 SafeArea의 패딩이 둥근 모서리나 카메라 노치(아이폰 13의 센서 하우징 영역) 같은 화면의 물리적 한계를 반영한다는 것

라이브러리 설치

특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context 라이브러리를 사용한다.

yarn add react-native-safe-area-context

cd ios
pod install
cd ../
yarn ios
yarn android

적용

1. SafeAreaProvider 컴포넌트를 사용해 기존 내용을 모두 감싸준다. SafeAreaView도 불러와 App을 감싸준다. SafeAreaView는 언제나 SafeAreaProvider 내부에 위치해야 한다.

// App.js

import React from 'react';
import {StyleSheet} from 'react-native';
import DateHead from './components/DateHead';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

function App() {
  const today = new Date();

  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <DateHead date={today} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

1. SafeAreaView에 edges라는 Props를 설정한다. edges에는 SafeArea를 적용할 모서리를 배열 혈태로 전달한다. ( left, right는 가로 모드로 사용할 때 필요한 설정 )

...

return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']}>
        <DateHead date={today} />
      </SafeAreaView>
    </SafeAreaProvider>
  );

...

겹쳐져 보인다

StatusBar와 DateHead가 겹쳐진다. StatusBar 높이와 일치하는 빈 View를 보여주면 된다.

1. useSafeAreaInsets로 StatusBar 높이 구하기

react-native-safe-area-context에서 제공하는 useSafeAreaInsets 훅을 사용하면 StatusBar 높이를 구할 수 있다.

// DateHead.js

import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const formatted = `${year}년 ${month}월 ${day}일`;

  const {top} = useSafeAreaInsets();

  return (
    <>
      <View style={[styles.statusBarPlaceholder, {height: top}]} />
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>{formatted}</Text>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  statusBarPlaceholder: {
    backgroundColor: '#26a69a',
  },
  block: {
    padding: 16,
    backgroundColor: '#26a69a',
  },
  dateText: {
    fontSize: 24,
    color: 'white',
  },
});

export default DateHead;

변경 후