Unhandled SoftException due to NullPointerException in KakaoMapFragment

[souravdasslg]

While using the Kakao Maps API, an Unhandled SoftException occurred due to a NullPointerException in KakaoMapFragment. Specifically, the error message states that there was an attempt to invoke a method ('void net.daum.mf.map.api.MapView.removeAllPOIItems()') on a null object reference in the 'createMapView' function of KakaoMapFragment. This error occurred during the 'onResume' function of KakaoMapFragment, which was called by the 'bundleFragment' function in KakaoMapManager. The error stack trace further shows that the error occurred during the dispatching of a command in the UIViewOperationQueue of the React Native framework, which caused the app to crash. Additionally, the log also indicates that the DaumMapEngineApi.so file was not loaded and the Virtual Machine (VM) was subsequently shut down.

import React from 'react';
import {KakaoMapView} from '@jiggag/react-native-kakao-maps';
export function MapScreen() {
  return (
    <KakaoMapView
      markerImageName="customImageName" // 옵션1
      markerImageUrl="https://github.com/jiggag/react-native-kakao-maps/blob/develop/example/custom_image.png?raw=true" // 옵션2
      markerList={[
        {
          lat: 37.59523,
          lng: 127.08600,
          markerName: 'marker'
        },
        {
          lat: 37.59523,
          lng: 127.08705,
          markerName: 'marker2'
        },
      ]}
      width={300}
      height={500}
      centerPoint={{
        lat: 37.59523,
        lng: 127.08600,
      }}
      onChange={(event) => {
        // event.nativeEvent
      }}
    />
  );
}

Log:

Unhandled SoftException
                                                                                                    java.lang.NullPointerException: Attempt to invoke virtual method 'void net.daum.mf.map.api.MapView.removeAllPOIItems()' on a null object reference
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapFragment.createMapView(KakaoMapFragment.java:50)
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapFragment.onResume(KakaoMapFragment.java:100)
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapManager.bundleFragment(KakaoMapManager.java:129)
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapManager.createFragment(KakaoMapManager.java:108)
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapManager.receiveCommand(KakaoMapManager.java:70)
                                                                                                        at com.jiggag.rnkakaomaps.KakaoMapManager.receiveCommand(KakaoMapManager.java:24)
                                                                                                        at com.facebook.react.uimanager.NativeViewHierarchyManager.dispatchCommand(NativeViewHierarchyManager.java:858)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchStringCommandOperation.executeWithExceptions(UIViewOperationQueue.java:365)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:879)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
                                                                                                        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
                                                                                                        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
                                                                                                        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
                                                                                                        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1229)
                                                                                                        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1239)
                                                                                                        at android.view.Choreographer.doCallbacks(Choreographer.java:899)
                                                                                                        at android.view.Choreographer.doFrame(Choreographer.java:827)
                                                                                                        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1214)
                                                                                                        at android.os.Handler.handleCallback(Handler.java:942)
                                                                                                        at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                        at android.os.Looper.loopOnce(Looper.java:201)
                                                                                                        at android.os.Looper.loop(Looper.java:288)
                                                                                                        at android.app.ActivityThread.main(ActivityThread.java:7872)
                                                                                                        at java.lang.reflect.Method.invoke(Native Method)
                                                                                                        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
                                                                                                        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
2023-02-14 22:58:27.756  1185-1234  EGL_emulation           com.pyloneer.zeeing.dev              D  app_time_stats: avg=503.63ms min=15.01ms max=8295.01ms count=17
2023-02-14 22:58:27.762  1185-1185  net.daum.m...raryLoader com.pyloneer.zeeing.dev              E  Can`t load DaumMapEngineApi.so file
2023-02-14 22:58:27.762  1185-1185  AndroidRuntime          com.pyloneer.zeeing.dev              D  Shutting down VM

[souravdasslg]

@jiggag Can you please look into this ?

[siabard]

If you are in hurry, you can patch source code by adding

    private void createMapView() {
        if(mMapView == null) {
            return;
        }
        mMapView.removeAllPOIItems();

into your node_modules/react-native-kakao-maps/android/src/main/java/com/jiggag/rnkakaomaps/KakaoMapFragment.java line 49~50.

[souravdasslg]

Hey @siabard Thank you for responding sooner I guess the above mentioned problem is resolved, but there is another error

Can`t load DaumMapEngineApi.so file 2023-02-17 11:27:08.075 6791-6791 AndroidRuntime com.pyloneer.zeeing.dev D Shutting down VM 2023-02-17 11:27:08.077 6791-6791 AndroidRuntime com.pyloneer.zeeing.dev E FATAL EXCEPTION: main Process: com.pyloneer.zeeing.dev, PID: 6791 java.lang.UnsatisfiedLinkError at net.daum.mf.map.n.api.NativeMapLibraryLoader.loadLibrary(NativeMapLibraryLoader.java:39) at net.daum.mf.map.n.api.NativeThread.(NativeThread.java:6) at android.opengl.alt.GLSurfaceView.setRenderer(GLSurfaceView.java:302) at net.daum.android.map.MapView.init(MapView.java:43) at net.daum.android.map.MapView.(MapView.java:50) at net.daum.mf.map.api.MapView.(MapView.java:445) at net.daum.mf.map.api.MapLayout.(MapLayout.java:28) at com.jiggag.rnkakaomaps.KakaoMapFragment.onCreate(KakaoMapFragment.java:46) at androidx.fragment.app.Fragment.performCreate(Fragment.java:2949) at androidx.fragment.app.FragmentStateManager.create(FragmentStateManager.java:475) at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:278) at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2189) at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:2100) at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:2002) at androidx.fragment.app.FragmentManager$5.run(FragmentManager.java:524) at android.os.Handler.handleCallback(Handler.java:942) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loopOnce(Looper.java:201) at android.os.Looper.loop(Looper.java:288) at android.app.ActivityThread.main(ActivityThread.java:7872) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936) 2023-02-17 11:27:08.858 6791-6993 TrafficStats com.pyloneer.zeeing.dev

[jiggag]

@siabard Thanks!

@souravdasslg Can you check again please c3ebd159cd4676bff38ebf8a6070d5a1900222af

yarn add https://github.com/jiggag/react-native-kakao-maps.git#fix/android-mapview-npe

[souravdasslg]

Hey @jiggag, I got new error this time.

I'm sharing my react-native details here. Might be helpful for you

System:
    OS: macOS 13.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 112.76 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /var/folders/5w/dzvn34kj0_56gc0dz5dzk4900000gn/T/yarn--1676655089284-0.5880380965427106/node
    Yarn: 1.22.19 - /var/folders/5w/dzvn34kj0_56gc0dz5dzk4900000gn/T/yarn--1676655089284-0.5880380965427106/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    Watchman: 2023.01.09.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/sourav/.rvm/gems/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 31, 32, 33
      Build Tools: 30.0.3, 31.0.0, 33.0.0, 33.0.1
      System Images: android-31 | Google APIs Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9514443
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 19.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.0 => 0.71.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[jiggag]

@souravdasslg Did you run it on an emulator (Intel x86)?

kakaoMap net.daum.mf.map not working on x86, x86_64 emulators 🤔 (works for arm)

Please check using your device.

[souravdasslg]

@jiggag The map is working on real device 😅 . Bit of a trouble if that doesn't work on Emulator. Anyway, another issue is seems bit weird. On iOS I'm not able to see marker images at all, In android marker images are visible but only one.

Here is my sample code

 <KakaoMapView
      markerImageName="marker"
      markerImageUrl="https://i.ibb.co/p0L1svn/marker.png" // 옵션2
      markerList={[
        {
          lat: 37.5665,
          lng: 126.978,
          markerName: 'marker',
        },
        {
          lat: 38.5665,
          lng: 128.978,
          markerName: 'marker',
        },
        {
          lat: 40.5665,
          lng: 130.978,
          markerName: 'marker',
        },
        {
          lat: 45.5665,
          lng: 110.978,
          markerName: 'marker',
        },
      ]}
      width={windowWidth}
      height={windowHeight}
      centerPoint={{
        lat: 37.5665,
        lng: 126.978,
      }}
      onChange={event => {
        console.log(event.nativeEvent);
      }}
    />

[jiggag]

1. remove markerImageName
   • markerImageName is an option to use a custom marker image.
   • you must upload a custom image to use markerImageName. (docs)
2. zoom out 🤔
   • you can see marker image, like android (but only one)
   • because mapView is zoomed from centerPoint