Android, iOS StatusBar 색상 변경

디바이스에 최상단, 시간과 남은 배터리가 나타는 공간을 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();
  return (
    <>
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.container}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

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

export default DateHead;

import React from 'react';
import {SafeAreaView} from 'react-native';
import DateHead from './todo/DateHead';

const App = () => {
  const date = new Date();
  return (
    <SafeAreaView style={{flex: 1}}>
      <DateHead date={date} />
    </SafeAreaView>
  );
};

export default App;

Android

StatusBar에 backgroundColor를 설정하면 안드로이드에서는 정상적으로 색상이 적용된다.

iOS

하지만 iOS에서는 StatusBar를 이용해 배경색을 지정할 수 없다. 

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

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

react-native-safe-area-context는 리액트 네이티브에서 공식적으로 만든 게 아니라 커뮤니티에서 오픈 소스로 공개한 라이브러리이다.

 

yarn add react-native-safe-area-context 설치

$ yarn add react-native-safe-area-context

만약 yarn이 설치되어있지 않다면 아래 명령어로 yarn을 설치해준다.

$ sudo npm install --global yarn

설치가 완료되었으면 iOS 시뮬레이터를 시작하는 명령어를 다시 입력한다.

$ yarn ios

명령어를 입력하면 위와 같은 문구가 출력되는데 이는 방금 설치한 서드 파티 라이브러리에서 네이티브 코드를 사용하기 때문에 이를 연동해야 한다는 의미이다.

안드로이드의 경우는 yarn andriod 할 때 이 작업이 자동으로 이뤄지지만, iOS의 경우에는 ios 디렉터리에 들어가 pod install 명령어를 실행해야 한다. 

$ cd ios
$ pod install
$ cd ..
$ yarn ios
$ yarn android

 

이제 App 컴포넌트에서 SafeAreaProvider, SafeAreaView로 감싸준다.

 

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

const App = () => {
  const date = new Date();
  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']}>
        <DateHead date={date} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;

SafeAreaView에 edges 속성은 SafeArea를 적용할 모서리(top, bottom, left, right)를 배열 형태로 전달한다. left와 right는 디바이스의 가로 모드를 사용할 때 설정한다.

위처럼 수정한 후 시뮬레이터를 확인해보면 최상단 영역이 없어지고 다른 컴포넌트와 겹친 것을 확인할 수 있다.

겹쳐진 영역을 수정하려면 StatusBar 높이와 일치하는 빈 View를 보여주면 된다. 하지만 StatusBar에 높이는 모바일 디바이스 별로 다르므로 각 디바이스 별로 StatusBar 높이를 구해야 한다.

이 기능도 react-native-safe-area-context 라이브러리에 구현되어 있다.

 

useSafeAreaInsets로 StatusBar 높이 구하기

react-native-safe-area-context 라이브러리에 useSafeAreaInsets라는 Hook 함수를 사용하면 StatusBar의 높이를 구할 수 있다.

이 함수를 사용하면 각 모서리에 필요한 공백의 크기를 알 수 있다. 반환 값에는 top, bottom, left, right가 있다.

그럼 StatusBar의 높이를 구해 빈 View에 높이를 설정해보자.

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 {top} = useSafeAreaInsets();
  return (
    <>
      <View style={{backgroundColor: '#26a69a', height: top}} />
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.container}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

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

export default DateHead;

 

StatusBar 내용 색상 변경하기

만약 StatusBar의 색상이 어두워 내용이 잘 들어오지 않는다면 barStyle 속성으로 색상을 변경할 수 있다.

<StatusBar backgroundColor="#26a69a" barStyle="light-content" />

barStyle 속성의 값은 dark-content(어두운 내용), light-content(밖은 내용), default(시스템 기본 설정)로 설정할 수 있다.

해당 속성은 안드로이드, iOS 공통으로 설정이 가능하다.