React-native-mapbox-gl: Invalid Index errors from ShapeSourceManager / RCTSource

[fnusneha]

I am having same crash. on Android.
Model- Pixel
Android version- 7.1.2
Here is the log-
Here is the crash.

Could you please help me resolve this?

07-10 12:57:42.365 9511-9511/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.aws.android, PID: 9511
java.lang.RuntimeException: java.lang.IndexOutOfBoundsException: Index: 11, Size: 0
at com.facebook.react.bridge.ReactContext.handleException(Unknown Source)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(Unknown Source)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(Unknown Source)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(Unknown Source)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:872)
at android.view.Choreographer.doCallbacks(Choreographer.java:686)
at android.view.Choreographer.doFrame(Choreographer.java:618)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:860)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6121)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:889)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:779)
Caused by: java.lang.IndexOutOfBoundsException: Index: 11, Size: 0
at java.util.ArrayList.get(ArrayList.java:411)
at com.mapbox.rctmgl.components.styles.sources.RCTSource.getLayerAt(Unknown Source)
at com.mapbox.rctmgl.components.styles.sources.RCTMGLShapeSourceManager.getChildAt(Unknown Source)
at com.mapbox.rctmgl.components.styles.sources.RCTMGLShapeSourceManager.getChildAt(Unknown Source)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(Unknown Source)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(Unknown Source)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(Unknown Source)
at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(Unknown Source)
at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(Unknown Source)
at com.facebook.react.uimanager.UIViewOperationQueue$1.run(Unknown Source)
at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(Unknown Source)
at com.facebook.react.uimanager.UIViewOperationQueue.access$2100(Unknown Source)
at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(Unknown Source)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(Unknown Source)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(Unknown Source)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(Unknown Source)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:872)
at android.view.Choreographer.doCallbacks(Choreographer.java:686)
at android.view.Choreographer.doFrame(Choreographer.java:618)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:860)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6121)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:889)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:779)

[samfader]

Capturing some context from email regarding _when_ this crash is happening:

This is happening when we pull down to refresh the activity which contains the ReactRootView (which has a Mapbox.MapView inside). The view is getting destroyed and then we try to render a new one. I suppose the crash happens when the layers of the map are being destroyed.

[matdehaast]

I am having this exact same issue and it has been reported before months ago in #1211 with no reply from the team. It is not a small issue either, this crashes my users whole app.

Further, there has been no commits to this project in 6 weeks. Are the Mapbox team committed to this SDK? Or was it a toy project that seems to get no love anymore

[zugaldia]

@nitaliano Is there anything on the Android/native side we could do to help troubleshoot this issue?

[AhmetGurbuzz]

@matdehaast,
Try it again after release your apk. I was getting error with debug release

[nitaliano]

I'm having trouble reproducing this error on current master. I updated one of my examples to allow me to toggle features on off and I haven't been able to get this type of stacktrace.

@fnusneha or @matdehaast could you provide me with some repo that reproduces this error?

[fnusneha]

This is happening when we pull down to refresh the activity which contains the ReactRootView (which has a Mapbox.MapView inside). The view is getting destroyed and then we try to render a new one. I suppose the crash happens when the layers of the map are being destroyed.

[nitaliano]

@fnusneha https://facebook.github.io/react-native/docs/refreshcontrol? or are you destroying the React view through native android code because I will for sure need a way to reproduce that if that is the case.

[fnusneha]

These things are happening on the Android side. Android activity has a fragment, that contains a ReactRootView. The remaining activity is Android, and doesn't use react native.

When the user pulls down to refresh (SwipeRefreshLayout), which is handled by Android, we remove the old fragments and create new instances. These new instances are added to the activity. In this new instance a new React application is started inside the react root view.

In the fragment, we call reactRootView.unmountReactApplication() when onDestroyView() is called.

There is no android interaction in your app. So, I cant repro it on your repo. Ours is native+react app and in your example it is pure React App. I have sent you my whole render function of the map in the email earlier.

[zugaldia]

@fnusneha Is the MapView a child of the SwipeRefreshLayout container? I'm not very familiar with SwipeRefreshLayout but looking at the docs it seems that only ListView or GridView children are supported. Or is your set up different? If so, could you share a sample layout/snippet that shows the issue? Thanks!

[fnusneha]

This is the simplified layout. Inside the R.id.content_cards, we add many fragments, each representing a 'card' of information.

unrelated things

One of these fragments is a fragment that contains a ReactRootView. The layout of the fragment is like this. Inside the ReactRootView, we start a react native application, that contains the Mapbox.MapView element.

When user pulls down to refresh, we remove all content card fragments inside R.id.content_cards, and create new ones.

[nitaliano]

@fnusneha I understand that your app is native plus react native. My worry is that if I go down this path and create a native app myself how I setup the code might be slightly different than how your code is setup, especially if we're dealing with fragment lifecycle management and it could just result in wasted time if I can't reproduce this issue.

It would be very helpful if you or your team could create a repo on github that has the simplified layout you are talking about that can reproduce this issue, so we can get straight to debugging the issue and get it resolved for you faster.

[fnusneha]

I have tried to dig into mapbox code with the stack trace of the crash provided earlier to identify the problem and I think I have been able to trace it to the actual issue.

From the crash, I can see that NativeViewHierarchyManager is trying to remove certain views, in the dropView() method.

1. It gets the ViewGroupManager, which is RCTMGLShapeSourceManager in this case.
2. Next, it finds the child count by calling getChildCount().
   In this case, RCTMGLShapeSourceManager returns source.getLayerCount().
   source is RCTSource, which computes getLayerCount() like this.
3. Next, it tries to get the child using viewGroupManager.getChildAt().
4. In this case, it calls RCTSource.getLayerAt().
5. RCTSource.getLayerAt() tries to get the layer from mLayers.
   In this method, it is not looking at mQueuedLayers, and causing IndexOutOfBoundsException.

By digging more, I found, that this bug was fixed in this change, about a month ago.
commit

Developer name- mattijsf
Files changed- RCTMGLShapeSource.java and RCTSource.java

My Conclusion-

1. We are using mapbox version 6.1.0.
2. The latest version on npm website is 6.1.2-beta2 (https://www.npmjs.com/package/@mapbox/react-native-mapbox-gl)
   Date- 23rd-May-2018
3. This fix was made on Date- 29th-June-2018

So, seems like the fix is not in latest release. When can we expect a new version which has this fix? I believe, this should resolve our issue. @nitaliano Thoughts? Am I in right direction?

[nitaliano]

Want to point your package.json to master and see if that fixes your issue? If it does I can publish a release for you. I do believe you are going in the right direction!

[fnusneha]

Yes I tried code with this fix- https://github.com/mapbox/react-native-mapbox-gl/commit/9eb8c85ba54146d7a8bfb55ba4d8c71df9e57bad

It resolved our issue. Could you please publish a new release for us? Thanks Nick.

[nitaliano]

@fnusneha great to hear I will post back when I do the release

[nitaliano]

@fnusneha I created a tag for you that you can drop into your package.json for now https://github.com/mapbox/react-native-mapbox-gl/tree/6.1.2, we recently updated how we deploy npm packages and my account has a bug in it right now 😞that I'm hoping will be addressed tomorrow. You can deploy with that tag

[fnusneha]

The new version posted here works fine.
https://www.npmjs.com/package/@mapbox/react-native-mapbox-gl (@mapbox/react-native-mapbox-gl
6.1.2)
Closing this issue. Thanks @nitaliano for working on this.