[React Native] 라이브러리 및 속성 사용법 (react-native-safe-area-context)

📚 라이브러리 명: react-native-safe-area-context

[ 환경 ]
- react-native-safe-area-context@3.4.1
- react-native@0.62.2

---

📍 에러 상황

기존에 운영하던 앱에서 notch, dynamic island에 <SafeAreaView>가 반영이 안된다.

<SafeAreaView>를 사용하였지만, safe area zone을 넘어가서 dynamic island에 가려진다.

 

코랄색: <SafeAreaView> 반영

흰색: <Layout> 반영. ui 활용가능 공간

 

import { Layout } from '@ui-kitten/components';
import React from 'react';
import {
  Text,
} from 'react-native';
import { SafeAreaView } from 'react-navigation'; // react-navigation 라이브러리 사용

const HomeMain = () => {
  return (
      <SafeAreaView style={{ backgroundColor: 'coral', flex: 1 }}>
        <Layout
          style={{
            backgroundColor: '#fff',
            flex: 1,
          }} />
      </SafeAreaView>
  );
};

export default HomeMain;

---

📍 에러 해결

💎 라이브러리 교체: react-navigation → react-native-safe-area-context

 

기존 코드에는 <SafeAreaView>를 react-navigation라이브러리를 사용하고있지만,

react-native-safe-area-context 라이브러리에서 제공하는 <SafeAreaView>를 사용하였다.

---

📍 react-native-safe-area-context 버전 (4.7.1 vs 3.4.1)

💎 아래와 같은 명령어로 라이브러리를 설치했더니, 최신버전인 4.7.1이 설치되었다.

 

▼ react-native-safe-area-context라이브러리 최신버전으로 설치하는 명령어

% npm i react-native-safe-area-context

참고링크: https://www.npmjs.com/package/react-native-safe-area-context/v/4.7.1

react-native-safe-area-context

---

문제는 현재 react-native 버전에 라이브러리가 호환이 되지않아서 에러가 났다.

 

최신버전인 react-native-safe-area-context@4.7.1은 react-native@0.64.0이상 버전을 지원한다.

지금 앱은 react-native@0.62.2 이라서, react-native-safe-area-context@3.4.1버전으로 재설치하였다.

 

▼ react-native-safe-area-context라이브러리 삭제하는 명령어

% npm uninstall react-native-safe-area-context

▼ react-native-safe-area-context라이브러리 3.4.1 특정버전으로 설치하는 명령어

% npm i react-native-safe-area-context@3.4.1

참고링크: https://www.npmjs.com/package/react-native-safe-area-context/v/3.4.1

react-native-safe-area-context

 

---

📍 react-native-safe-area-context@3.4.1라이브러리의 <SafeAreaView> 사용법

---

1. 최상위에 <SafeAreaProvider>로 감싸기

 

▼ App.js

import { navigation } from './src/components/navigation';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const App = () => (
    <SafeAreaProvider>		//SafeAreaProvider로 감싸기
          <navigation />	//HomeMain페이지 내용물
    </SafeAreaProvider>
);

export default App;

---

💎 xcode에서 시뮬레이터 에러가 날 경우,

아래의 명령어를 입력하여 pod에 라이브러리를 연결해주면 된다.

 

▼ 에러문구

rncsafeareaprovider was not found in the uimanager...

▼ 에러해결 명령어

% npx pod-install ios

 

---

2. 디자인할 화면에 <SafeAreaView> 적용하기

 

▼ src> pages> HomeMain.js

import { Layout } from '@ui-kitten/components';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';	//라이브러리 import

const HomeMain = () => {
  return (
      <SafeAreaView style={{ backgroundColor: 'coral', flex: 1 }}>	{/* <SafeAreaView> 적용 */}
        <Layout style={{ backgroundColor: '#fff', flex: 1 }} />
      </SafeAreaView>
  );
};

export default HomeMain;

[ 결과 ]

코랄색: <SafeAreaView> 반영

흰색: <Layout> 반영. ui 활용가능 공간

 

---

📍 react-native-safe-area-context@3.4.1라이브러리의 : useSafeAreaInsets() 사용법

useSafeAreaInsets()를 활용하여, <SafeAreaView>없이, safe area zone의 공간을 커스텀할 수 있다.

 

---

💎 safe area zone의 상하좌우 margin 구하기.

 

▼ src> pages> HomeMain.js

import { Layout } from '@ui-kitten/components';
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; //라이브러리 import

const HomeMain = () => {

  const insets = useSafeAreaInsets(); //변수에 useSafeAreaInsets()담기
  console.log('let me know, insets', insets);	//useSafeAreaInsets() 콘솔 확인(safe area margin 길이 확인)
  
  return ();
};

export default HomeMain;

▼ useSafeAreaInsets() 콘솔 출력값

LOG      let me know, insets {"bottom": 34, "left": 0, "right": 0, "top": 59}

iphone 14 pro max의 safe area zone의 margin 길이는 top:59, bottom:34 이다.

 

---

 

💎 <SafeAreaView>없이, safe area zone 커스텀하기

 

▼ src> pages> HomeMain.js

import React from 'react';
import { Text } from 'react-native';
import { Layout } from '@ui-kitten/components';
import { useSafeAreaInsets } from 'react-native-safe-area-context';	//라이브러리 import

const HomeMain = () => {

  const insets = useSafeAreaInsets();	//useSafeAreaInsets()로 safearea zone의 margin 길이 구하기
  
  return (
      <Layout style={{ flex: 1, backgroundColor: 'coral', paddingTop: insets.top }}>	{/* <SafeAreaView>의 역할을 할 <Layout>이다. paddingTop에 insets.top를 삽입하여 디바이스에 따른 길이가 반응하도록 설정하였다. */}
        <Layout style={{ flex: 1, backgroundColor: '#fff' }}>	{/* safearea zone의 역할 을 할 <Layout>이다. */}
          <Text style={{ lineHeight: 500, textAlign: 'center' }}>
            [white] safe area zone
          </Text>
        </Layout>
      </Layout>
  );
};

export default HomeMain;

 

상황에 따라, notch나 dynamic island와 safearea zone 사이의 갭이 뜨는게 싫을 경우, 플러스, 마이너스로 수치를 조정하면된다.

아래에 예시를 참고하자.

 

▼ src> pages> HomeMain.js

paddingTop: insets.top - 10,

insets.top의 수치가 59인데, paddingTop에 -10을 해줬더니,

다이나믹아일랜드와 세이프에어리아뷰 간의 간격길이가 없어졌다.

 

위와같이 휴대폰 기종에 따라 노치, 다이나믹아일랜드, 세이프에어리아존 (notch, dynamic island, safearea zone)의 상하좌우 (top, bottom, left, right)의 magin, padding을 필요에 따라 커스텀할 수 있다.

 

 

 

 

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D