[ React Native ] 프로젝트 초기 세팅

캡스톤 프로젝트를 위해 React Native 프로젝트 세팅을 진행하던 중 엄청나게 긴 오류들을 만났었다.. 구글링으로도 해결이 잘 안되던 것들이 많아 해결책을 찾는데 꽤 오랜 시간이 걸렸지만, 어찌저찌 해결 완료!

(역시 악명 높은 RN.......)

 

누군가에게 조금이나마 도움이 되길 소망하며 해결 방법을 올려본다.

 

0. 참고

기본적으로 아래 글을 참조하여 진행하였습니다. 이 글에서는 아래 글과 다르게 설정한 것을 위주로 설명할 예정입니다.

[React Native] 프로젝트 초기세팅

 

 

1. react navigation 설치

react navigation은 다른 페이지로 이동할 수 있게 해주는 라이브러리이다. 이 라이브러리를 반드시 사용해야하는 이유는 이 글을 참고하자.

 

나는 RN v0.75를 사용하므로 MainActivity.java가 아닌 MainActivity.kt 파일이 있었고, 공식 홈페이지를 참고하여 설정 코드를 작성하였다.

 

 

2. styled-components 설치

styled-components는 normal CSS 코드를 Native Component가 사용해도 스타일 적용이 가능하도록 해준다. 이를 사용해야 하는 이유는 이 글을 참고하자.

 

아래 순서에 따라 추가로 필요한 여러 플러그인을 설치하였다.

1. style-component 설치

- npm install styled-components

2. babel plugin 설치

- npm install --save-dev babel-plugin-styled-components

- (babel.config.js에 추가) "plugins": ["babel-plugin-styled-components"]

3. (ts 사용 시) typescript plugin 설치

- npm install --save @types/styled-components @types/styled-components-react-native

 

---

💥 react-native-screens 버전 오류

설레는 마음으로 npx react-native run-android 엔터!!를 입력했지만.. 돌아오는건 겁나겁나 긴 에러코드...ㅎ

일단 그 중 하나의 원인은 react-native-screens 버전과 관련된 오류였다.

("> Task :react-native-screens:configureCMakeDebug[arm64-v8a] FAILED" 등등...)

 

구글링을 해보니 아래 이슈가 나랑 완전히 똑같은 오류에 대한 내용이었다!

Android Build Error - Execution failed for task ':react-native-screens:configureCMakeRelWithDebInfo' · Issue #2082 · software-

(요약하면 RN 버전과 react-native-screens 버전의 호환성을 이 표를 보고 확인하여 수정하라는 것)

 

그런데 나는 두 버전이 서로 호환된다고 나와있음에도 버전 오류가 발생했다. 저 글의 답변 중 react-native-screens 버전을 "3.29.0"로 바꾸면 된다는 말이 많길래 버전을 변경해봤는데! 해결되었다!

 

즉, 아래와 같이 react-native-screens 버전을 다운그레이드하면 해결될 것이다.

1. 이미 설치하였다면 삭제

- npm uninstall react-native-screens

2. 3.29.0 버전으로 재설치

- npm install react-native-screens@3.29.0

 

---

💥 react-native-screens ScreenViewManager.kt 오류

"e: file:///D:/AReumApp/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt:47:74 This function must return a value of type Any?" 와 같은 에러 메세지를 만났다..

 

node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt 에서 47번째 줄을 아래와 같이 변경하면 된다.

- view.fabricViewStateManager?.setStateWrapper(stateWrapper ?: return null)

 

---

💥 CMake 및 NDK 관련 오류

그리고 CMake와 NDK가 설치되어 있지 않아 CMake 어쩌구 등의 오류가 발생했던 것이었다. 이들을 설치하기 위해서는 아래 과정을 따라하면 된다.

1. Android Studio에서 해당 프로젝트를 연다.

2. Sdk Manager에서 CMake와 NDK를 설치한다.

3. 환경변수>시스템 변수>Path 에 CMake의 bin 폴더 경로를 추가한다. (NDK는 설정 안 해도 됨)

 

---

💥 AndroidManifest 파일 수정

"> Task :react-native-safe-area-context:processDebugManifest package="com.th3rdwave.safeareacontext" found in source AndroidManifest.xml: D:\AReumApp\node_modules\react-native-safe-area-context\android\src\main\AndroidManifest.xml. Setting the namespace via the package attribute in the source AndroidManifest.xml is no longer supported, and the value is ignored. Recommendation: remove package="com.th3rdwave.safeareacontext" from the source AndroidManifest.xml: D:\AReumApp\node_modules\react-native-safe-area-context\android\src\main\AndroidManifest.xml." 와 같은 에러 메세지를 만났다.

 

각 모듈의 AndroidManifest.xml 파일에서 package 속성을 제거하면 해결된다.

나는 위 오류 메세지가 react-native-safe-area-context, react-native-screen 두 모듈에서 발생해서, node_modules\{모듈 명}\android\src\main\AndroidManifest.xml 파일에서 각각 아래의 코드를 찾아 제거하였다.

• package=”com.th3rdwave.safeareacontext”
• package=”com.swmansion.rnscreens”

 

---

🚩 추가 팁

설정 관련된 무언가를 건드릴 때마다 캐시 삭제 후 새롭게 빌드하는 것이 좋다.. 혹시 모를 문제 발생 방지를 위해서...

 

Window 기준으로,

1. cd android

2. gradlew clean

3. cd ..

4. npx react-native run-android

 

 

도움이 되었으면 좋겠습니다 :)