[react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps] 이슈 해결하기

특정 이슈를 해결하였던 과정을 공유하고자 합니다.

 

해당 글을 보기 전에 꼭 자신의 프로젝트 버전과 해당 블로그의 버전을 확인하고 진행해 주세요.

현재 작성된 시점과 버전은 다음과 같습니다.

"expo": "~47.0.12",
"react-native-maps": "1.3.2",

 

이 오류는 Expo prebuild로 만든 앱이 react-native-maps 라이브러리를 사용하고 있으며, 해당 라이브러리가 Google Maps를 지원하기 위해 필요한 네이티브 모듈들이 Xcode 프로젝트에 추가되지 않았을 때 발생할 수 있습니다.

 

이때 발생하는 오류는 다음과 같습니다.

'react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps'

해결 방법은 다음과 같습니다.

 

1. app.json 파일을 열고, ios 섹션의 config 항목에 GoogleMapsApiKey 값을 설정합니다. 이 값을 설정하는 방법은 아래와 같습니다.

// app.json
"ios": {
    "bundleIdentifier": [your bundleIdentifier],
    "config": {
      "googleMaps": {
        "apiKey": "YOUR_API_KEY_HERE"
      }
    }
}

여기서 YOUR_API_KEY_HERE는 Google Cloud Console에서 발급받은 Google Maps API 키를 입력해야 합니다.

 

2. Xcode 에디터를 열고 해당 prebuild를 통해서 생성된 프로젝트 파일을 선택합니다.

2-1. node_modules에서  react-native-maps 폴더를 찾습니다.

 

2-2. ios 폴더에 AirGoogleMaps 폴더를 복사합니다

2-3. 복사된 파일을 prebuild를 통해서 생성된 프로젝트에 붙여 넣기 합니다.

2-4. 네이티브 구성이 바뀌었기 때문에 재빌드를 진행해 주어야 합니다. 

 

2-5. Product > Clean Build Folder를 선택합니다.

 

2-6. Expo CLI에서 `npx expo start --clear` 명령어를 실행합니다.

(기존에 생성된 빌드앱을 삭제하고 진행하기를 추천합니다)

 

2-7 정상적으로 동작하는 것을 확인합니다.

 

Come-on! 테스트 빌드

마지막으로 prebuild로 만든 앱이 아닌  EAS Build를 통해서 앱 빌드한다면 해당 이슈는 발생하지 않습니다.