ReactNative Cannot read property 'launchImageLibraryAsync' of undefined react-native-image-picker 에러 해결

최근 NativeScript + Vue3 로 하이브리드 앱을 개발하려고 준비하다가, 다양한 이슈 및 기술적 장벽에 부딪혀 결국은 ReactNative로 방향을 선회하고 스터디를 진행하고 있다.

 

최종 선택한 프레임워크 환경은 ReactNative + Expo 이다. CLI가 AOS/iOS 양쪽의 네이티브 소스 코드 수정도 가능하고 심도 있는 개발이 가능하다지만, 현재 개발할 앱의 경우 규모가 크지 않은 상태이고, 빠른 개발이 필요하며, 윈도우 환경에서도 iOS 가 커버되어야 하는 상황인지라 Expo 플랫폼으로 결정하였다.

 

Expo 의 장점으로는 빠른 개발환경 셋팅과 수많은 필수/부가 기능이 잘 동작하는 라이브러리를 이미 갖추고 있다는 부분이다. 실제로 스터디를 해보니 가이드 사이트도 잘되어 있어서 큰 어려움 없이 진행을 하고 있다.

 

오늘은 ImagePicker 부분에서 Cannot read property 'launchImageLibraryAsync' of undefined react-native-image-picker 에러가 발생하여 해결하는 글을 적어본다.

 

결론. 신규 라이브러리 추가 후에는 반드시 풀빌드를 한번 진행하도록 한다.

 

이 글에서 다루는 소스는 아래의 공식 가이드 페이지를 참조하였다.

Use an image picker - Expo Documentation

Use an image picker

 

에러 화면은 다음과 같다. launchImageLibraryAsync 라이브러리를 읽을 수 없다는.... 왜지..?

 

공식 가이드에서 하라는 라이브러리 설치도 제대로 되었고, 웹에서는 제대로 동작을 하였지만 실제 디바이스에서 정상 동작을 하지 않았다.

 

이를 위해 열심히 스택오버플로우를 뒤져보니, 신규 라이브러리를 추가한 후에는 풀빌드를 제대로 한번 해줘야 한다는 글이 보여 npx expo run:android 명령어로 새로 빌드를 한번 해주었다.

 

새롭게 빌드 시에는 기존의 테스트 중이던 화면은 모두 종료를 시켜야 한다.

 

여튼, 새롭게 빌드 후 npx expo start 로 실행해보니 제대로 되는 것을 확인할 수 있었다.

앞으로는 신규 라이브러리 추가 후에는 풀빌드를 꼭 한번씩 해주도록 하자.