[BUG]: 안드로이드 RNCNaverMapView 앱 크래시

[ArticPenguin]

Is there an existing issue for this?

• I have searched the existing issues

Version of @mj-studio/react-native-naver-map

^1.5.10

Version of react-native

0.74.5

What os are you seeing the problem on?

Android

What device types are you seeing the problem on?

Simulator

What architecture types of react native are you seeing the problem on?

New Architecture(Fabric)

Version of device(android API, iOS OS version, etc...)

Android 35

Expo App

• I am using Expo

What happened?

Expo 로 프로젝트 시작하여,
하단에 Home, Map, More 세 가지 탭으로 구성되어 있는 간단한 앱을 만들었습니다.

iOS 에뮬에서는 오류 없이 정상 작동하는데,
Android 환경에서만 Map 뷰를 누르자마자 크래시가 발생하면서 종료합니다.

[IOS 화면]

하단에 로그 첨부합니다.

Relevant a package.json.

{
  "name": "rnnavermaptutorial",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.4",
    "@mj-studio/react-native-naver-map": "^1.5.10",
    "@react-navigation/native": "^6.0.2",
    "eas": "^0.1.0",
    "eas-cli": "^12.5.2",
    "expo": "~51.0.39",
    "expo-blur": "~13.0.2",
    "expo-build-properties": "~0.12.5",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-haptics": "~13.0.1",
    "expo-linking": "~6.3.1",
    "expo-location": "~17.0.1",
    "expo-modules-core": "~1.12.26",
    "expo-router": "~3.5.24",
    "expo-splash-screen": "~0.27.7",
    "expo-status-bar": "~1.12.1",
    "expo-symbols": "~0.1.5",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "@expo/config-plugins": "8.0.0",
    "expo-dev-client": "~4.0.29"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-native": "^0.72.8",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

Relevant log output

ERROR  Your app just crashed. See the error below.
java.lang.IndexOutOfBoundsException: Index: 1, Size: 0
  java.util.ArrayList.rangeCheckForAdd(ArrayList.java:845)
  java.util.ArrayList.add(ArrayList.java:517)
  com.mjstudio.reactnativenavermap.mapview.RNCNaverMapView$addOverlay$1.invoke(RNCNaverMapView.kt:119)
  com.mjstudio.reactnativenavermap.mapview.RNCNaverMapView$addOverlay$1.invoke(RNCNaverMapView.kt:115)
  com.mjstudio.reactnativenavermap.mapview.RNCNaverMapView.withMap$lambda$5$lambda$4(RNCNaverMapView.kt:109)
  com.mjstudio.reactnativenavermap.mapview.RNCNaverMapView.$r8$lambda$pH9fjYRoJRGTEgQ557Nq2dzYsgs(Unknown Source:0)
  com.mjstudio.reactnativenavermap.mapview.RNCNaverMapView$$ExternalSyntheticLambda4.onMapReady(Unknown Source:2)
  com.naver.maps.map.e.d(SourceFile:142)
  com.naver.maps.map.MapView$4$1.run(SourceFile:198)
  android.os.Handler.handleCallback(Handler.java:959)
  android.os.Handler.dispatchMessage(Handler.java:100)
  android.os.Looper.loopOnce(Looper.java:232)
  android.os.Looper.loop(Looper.java:317)
  android.app.ActivityThread.main(ActivityThread.java:8705)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:886)

Reproducible Sample Repository

private

Code of Conduct

• I agree to follow this project's Code of Conduct

[jun-jaehyuk-lee]

expo 뿐아니라 cli 환경도 간헐적으로 발생됩니다.

[ArticPenguin]

expo 뿐아니라 cli 환경도 간헐적으로 발생됩니다.

안드로이드 크래시 해결했습니다.
저의 경우, NaverMapView 컴포넌트 내부에 NaverMapMarkerOverlay 컴포넌트를 선언해주었던 것이 원인이었습니다. 다음과 같이 분리하였더니 안드로이드에서 크래시 더 이상 발생하지 않았습니다.

[Crashed Structure]

<NaverMapView>
 <NaverMapMarkerOverlay>
 <NaverMapMarkerOverlay/>
<NaverMapView/>

[Solved Structure]

<NaverMapView>
<NaverMapView/>
<NaverMapMarkerOverlay>
<NaverMapMarkerOverlay/>

[jun-jaehyuk-lee]

NaverMapView 내부에 선언하지않으면 마커가 표기되지 않습니다.
동작하는 코드를 공유해줄수있나요?

[Jin-seop]

마커가 안드로이드에서 표시가 안되네요.

"react-native": "0.72.6"
"@mj-studio/react-native-naver-map": "^1.5.10"

<NaverMapView
...
>
...
    <NaverMapMarkerOverlay
      latitude={data.latitude}
      longitude={data.longitude}
      onTap={() => (onSourceLayerPress ? onSourceLayerPress(data) : undefined)}
    >
      <View style={styles.pointLayer}>
        <View style={styles.pointLine}>
          <Text style={styles.pointCountText}>{data.count}</Text>
        </View>
      </View>
    </NaverMapMarkerOverlay>
    ...

[lazyflog]

@Jin-seop NaverMapMarkerOverlay 에도 width랑 height값을 주시면 나올겁니다.

[jun-jaehyuk-lee]

맵뷰가 렌더링되거나 호출되기전에 다른 네이버맵뷰 관련 컴포넌트를 렌더링 하려했을때 발생된이슈입니다. 조건들을 추가하니 더이상 크래시가 발생되지않네요.