[React Native] Unable to resolve react-native-safe-area-context 에러

expo를 사용하여 리액트 네이티브 구동 중 다음과 같은 에러가 발생했습니다.

에러는 내비게이션 사용 중 발생하였는데요.

Unable to resolve "react-native-safe-area-context" 
from "node_modules/@react-navigation/bottom-tabs/src/views/BottomTabBar.tsx"

 

에러가 발생하는 이유는 react-native-safe-area-context가 설치가 안 되어 있어 발생하였습니다.

분명 수개월 전?? 어쩌면 1년 전쯤?? 이런 에러가 발생하지 않았는데 변화의 속도를 몸소 겪고 있습니다.

네비게이션 사용방법도 버전이 변하면서 패키지도 변경되고 사용방법도 변경되었기 때문입니다.

아래 패키지를 설치해줍니다.

expo install react-native-safe-area-context

그럼 위의 문제는 해결이 될 것입니다.

 

하지만 위의 패키지를 설치하고 또 다른 에러가 발생할 수 있습니다.

문서에 따라 패키지들을 설치를 해주었습니다.

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

그리고 이전에 사용하던 방식이 아닌 최신의 방법들을 익히고 적용하니 에러가 사라졌습니다.

패키지 문제뿐만 아니라 버전이 맞지 않아 발생할 수도 있습니다.

최신 버전의 패키지와 이전 버전의 방식으로 코드를 작성하고 있으실 수도 있습니다.

문서를 꼼꼼하게 읽어 보고 하나씩 하나씩 적용을 해야겠습니다.

 

 

* 리액트 네이티브 네비게이션 가이드

https://reactnavigation.org/docs/en/getting-started.html