개요

아래와 같이 React-Native 를 사용하여
실시간 채팅이 가능한 모바일 서비스 📱 를 제작중인 과정이다

여러명의 사용자를 관리하기 위해
파이어베이스 Authentication 을 사용하여 회원가입 기능을 추가하였고,

출력된 내 정보 란에서 프로필 이미지를 추가하려한다.

설치 🔨

해당 기능을 구현하기 위해 설치한 라이브러리는

Image-Crop-Picker

프로젝트에 사용한 패키지 매니저로는 yarn 을 사용했기 때문에,
해당 명령어를 통해 라이브러리를 설치 해 주었다.

yarn add react-native-image-crop-picker

라이브러리 설치가 완료되면
android/app/build.gradle 의 경로로 접근하여
해당 부분을 추가 해 줌으로 인해 라이브러리를 제어 할 수 있다

에러 확인 😈

여느 때와 같이
yarn run android 명령을 통해 안드로이드 스튜디오 애뮬레이터를 실행시킨다

엥 ?

심지어 실행중이던 애뮬레이터도 종료되며 튕겨져 나온다

제거

Package.json 에 추가 된 해당 라이브러리를 확인하고,
지움 -> 저장 -> yarn install 과정으로 패키지를 적용시킨다.

실행

해당 라이브러리를 제거 후 다시 앱을 실행하니 정상적으로 구동된다.

확실히 라이브러리와 해당 프로젝트가 충돌하는 것 같다.

다시 설치..

실행

검색하여 찾아본 결과 yarn 패키지매니저를 통해 저장된 캐시를 제거하는 명령어를 실행하여
의존성 패키지를 효율적으로 관리하기 위해 아래 명령어를 실행한다고 한다.

yarn start --reset-chche

하지만,,

모든 과정을 거쳐도 앱이 실행되지 않는것은 동일했다..

에러 해결 😇

위 과정에서 겪었듯,
설치된 라이브러리와 앱을 실행하는 프로젝트가 충돌하고있는상황같아
해당 라이브러리를 지원하는 깃허브 페이지의 문서를 다시 한번 살펴보았다.
Docs 에 미처 확인하지 못했던 부분이 있었는데,

  1. React-native 의 버전이 0.60 이상일 경우
    라이브러리의 버전을 0.25.0 이상으로 설치하고,
    그게 아니라면 0.25.0 이하 버전을 설치해라
  2. React-native-image-crop-picker 의 버전이 0.39.0 이상이라면
    Android CompileSdkVersion 의 버전을
    33 이상으로 설정해라

Package.json 에서 라이브러리가 설치된 버전을 확인 해 보니,
0.40.0 인데 이 경우 Docs 에 있는대로 세팅한다면
android CompileSdkVersion 의 버전을 33 으로 수정해야 할것 같았다.

Android CompileSdkVersion 은
> android/app/src/debug/AndroidManifest.xml 경로에서 수정하면 된다.

해당 부분을 수정 후 yarn run android 명령으로
앱을 실행시키니 에러가 해결됨을 확인할 수 있었다..

패스트캠퍼스 디스코드는
질문글을 남기면 답변을 한달 뒤에 달아준다… 😣

그냥 뭐… 그렇다고.. ㅎㅎ

Reference 🌊

https://github.com/ivpusic/react-native-image-crop-picker
https://0biglife.tistory.com/entry/React-Native-Cropping-for-Image-Picker
https://velog.io/@ysh616/react-native-crop-picker-%EC%98%A4%EB%A5%98-%EA%B8%B0%EB%A1%9D