[React Native] SafeAreaView 적용

react-native-iphone-x-helper

SafeAreaView를 위해 react-native-iphone-x-helper 설치하여 위 아래 영역 잡아주기

🚫 더이상 지원이 없을 예정이여서 react-native-safe-area-context로 대체

 

npm i react-native-iphone-x-helper --save
# or
yarn add react-native-iphone-x-helper --save

 

---

react-native-safe-area-context

대체 라이브러리인 react-native-safe-area-context 설치

npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-context

SafeAreaView와 사용법은 똑같음 StatusBar를 직접 제어하고 싶은 경우는 edges 를 참고하기

 

---

예제 코드

import { StyleSheet } from 'react-native';
import { getStatusBarHeight } from "react-native-iphone-x-helper";
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import Header from "./src/Header";

// statusBar의 높이 측정
const statusBarHeight = getStatusBarHeight(true);

export default function App() {
  return (
    <SafeAreaProvider>
			{/* edges 속성 이용하여 top, bottom은 안전한 영역에서 제외 */}
      <SafeAreaView style={styles.container} edges={['right', 'left']}>
        <Header />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: statusBarHeight,  // statusBar만큼 높이 설정
  },
});