Leon Chaewon Kong's dev blog

React Native - iOS SafeAreaView의 top과 bottom 컬러 다르게 설정하기

24 Sep 2019

SafeAreaView는 iOS 11버전 이후부터 사용이 가능하며 아이폰 Xs 처럼 노치 등이 있는 경우 자식 컴포넌트에 padding을 적용하여 컨텐츠가 잘려나가지 않게 해준다. 디바이스별 물리적인 화면의 제한을 고려하여 어떠한 경우에도 컨텐츠가 잘려나가지 않고 안전하게 보여주도록 도와준다.

React Native - SafeAreaView의 top과 bottom 컬러 다르게 설정하기

앱을 개발하다 보면 SafeAreaView를 이용함으로써 잘려나가는 top 부분의 padding과 bottom 부분의 padding에 서로 다른 색깔(컬러)을 적용하고 싶을 때가 있다. 이런 경우 어떻게 대응하는지 알아보자.

요구사항

react >= 16.2.0

우리는 Fragment를 React에서 import해 이 이슈를 해결할 것이다. Fragment를 사용하기 위해서는 16.2.0 이상의 React 버전을 사용해야 한다.

기본적으로 SafeAreaView를 이용한다면 다음과 같을 것이다:

import React, { Component } from "react";
import { SafeAreaView, View, Text } from "react-native";

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, backgroundColor: "#25365d" }}>
          <Text style={{ fontSize: 30, color: "#fff" }}>Text</Text>
        </View>
      </SafeAreaView>
    );
  }
}

이미지로 결과물을 보면 아래와 같다:

우리는 Fragment를 React에서 가져와 루트 컴포넌트의 SafeAreaView 컴포넌트를 감쌀 것이다. 이를 통해서 상단과 하단의 패딩(padding)에 서로 다른 색을 적용할 것이다.

코드는 다음과 같다:

import React, { Component, Fragment } from "react";
import { SafeAreaView, Platform, View, StatusBar, Text } from "react-native";

export default class App extends Component {
  render() {
    if (Platform.OS === "ios")
      return (
        <Fragment>
          <SafeAreaView style={{ flex: 0, backgroundColor: "red" }} />
          <StatusBar barStyle="light-content" />
          <SafeAreaView style={{ flex: 1, backgroundColor: "blue" }}>
            <View style={{ flex: 1, backgroundColor: "#25365d" }}>
              <Text style={{ fontSize: 30, color: "#fff" }}>Text</Text>
            </View>
          </SafeAreaView>
        </Fragment>
      );
    else
      return (
        <View style={{ flex: 1, backgroundColor: "#25365d" }}>
          <Text style={{ fontSize: 30, color: "#fff" }}>Text</Text>
        </View>
      );
  }
}

StatusBar 컴포넌트는 아이폰 상단의 현재시각, 배터리, 네트워크 연결 상태 등을 보여주는 얇은 띄 형태의 바를 의미한다.

barStyle="light-content"

우리는 그 내부의 텍스트 색상을 흰 색으로 하기 위해 위 코드를 사용한다.

결과물을 살펴보자:

결론

Fragment를 React에서 가져와 사용함으로써 두개의 SafeAreaView를 선언하고 각기 다른 padding 색상을 적용할 수 있었다. 물론, 다른 전반적인 UI나 로직에는 변화가 없이 말이다.

참고자료

React Native: Set different colors on Top and Bottom in SafeAreaView component