jiggag / react-native-kakao-maps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unhandled SoftException due to NullPointerException in KakaoMapFragment

souravdasslg opened this issue · comments

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

@jiggag Can you please look into this ?

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.

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

commented

@siabard Thanks!

@souravdasslg Can you check again please c3ebd15

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

Hey @jiggag, I got new error this time.
Screenshot 2023-02-17 at 11 03 55 PM

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
commented

@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.

@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);
      }}
    />
commented
  1. remove markerImageName
  • markerImageName is an option to use a custom marker image.
  • you must upload a custom image to use markerImageName. (docs)
  1. zoom out 🤔
  • you can see marker image, like android (but only one)
  • because mapView is zoomed from centerPoint