[개발] React Native 노치 디자인 해결 방법

안녕하세요 devport 입니다. 이번에 React Native로 앱을 개발 하던중에 Apple의 iPhone이 사용하는 노치 디자인으로 인하여 상태표시 부분이 안보이는 현상이 있어서 해결하는 방법을 찾아보았습니다.

아이폰은 상단의 "상태 표시 줄"과 하단의 "Home indicator"부분으로 인하여 디자인 사용성에 영향을 받을 수 있습니다.

이것을 해결하기 위해서 안전영역(Safe area)영역을 추가하게되면 아래와 같이 보호 영역이 생성이 됩니다.

적용 소스

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { SafeAreaView, StatusBar } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <>
        <StatusBar barStyle="white-content" />
        <SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
          <WebView source={{ uri: 'https://test.com' }} style={{ marginTop: 0 }} />
        </SafeAreaView>
      </>
    )
  }
}