[Android] app crashes on markers mount

[kitolog]

Hi, when I mount a map, all works fine. But, when props on my map component updates and I create markers, app crashes. iOS version works fine, crashes only on Android:

06-13 18:47:09.745 31797-31797/? E/AndroidRuntime: FATAL EXCEPTION: main
                                                   Process: com.testapp, PID: 31797
                                                   java.lang.IndexOutOfBoundsException: Invalid index 1, size is 0
                                                       at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
                                                       at java.util.ArrayList.add(ArrayList.java:147)
                                                       at com.airbnb.android.react.maps.AirMapView.addFeature(AirMapView.java:284)
                                                       at com.airbnb.android.react.maps.AirMapManager.addView(AirMapManager.java:230)
                                                       at com.airbnb.android.react.maps.AirMapManager.addView(AirMapManager.java:26)
                                                       at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:367)
                                                       at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:175)
                                                       at com.facebook.react.uimanager.UIViewOperationQueue$2.run(UIViewOperationQueue.java:766)
                                                       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:830)
                                                       at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
                                                       at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:125)
                                                       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:797)
                                                       at android.view.Choreographer.doCallbacks(Choreographer.java:612)
                                                       at android.view.Choreographer.doFrame(Choreographer.java:580)
                                                       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:785)
                                                       at android.os.Handler.handleCallback(Handler.java:739)
                                                       at android.os.Handler.dispatchMessage(Handler.java:95)
                                                       at android.os.Looper.loop(Looper.java:135)
                                                       at android.app.ActivityThread.main(ActivityThread.java:5593)
                                                       at java.lang.reflect.Method.invoke(Native Method)
                                                       at java.lang.reflect.Method.invoke(Method.java:372)
                                                       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:960)
                                                       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)

My code looks like:

<MapView ref="map"
 mapType="terrain"
 style={styles.map}
 region={this.state.region} 
showsUserLocation={true}
zoomEnabled={false} 
showsCompass={true}
 rotateEnabled={true} 
pitchEnabled={false}
 followsUserLocation={false}
 onRegionChangeComplete={this.onRegionChangeComplete} 
onPanDrag={this.onPanDrag}>
                    {this.renderMapUrlTile()}
                    {this.props.markers.map((item, index) => {
                        let markerComponent;
                        if ((typeof item['type'] !== 'undefined') && (item.type == 'user')) {
                            markerComponent =  <MapView.Marker coordinate={item}
                                                image={require('./../../assets/img/icon-user-location.png')}/>

                        } else {
                            markerComponent =
                                <MapView.Marker coordinate={item}
                                                image={require('./../../assets/img/icon-user-location2.png')}/>
                        }
                        return markerComponent;
                    })}
                </MapView>

[8enmann]

I have the same issue. Did you find a workaround?

[MatthewAwesome]

The link below resolves a very similar issue.

Issue Resolution Link

Also, from the looks of it your coordinate object {item} might be too busy. It should just have longitude and latitude. Thus, the 'user' key might be gumming things up, as well. Possibly you can store this info in another prop?

Hope this helps!

Stay awesome!

-Matt

[8enmann]

Thanks @MatthewAwesome will try it!

[jose920405]

In my case i'm adding react native <View inside <MapView Apparently only accepts views with the MapView prefix. Like <MapView.Polyline, <MapView.Marker, etc

[tutak]

In my case, the Latitude and Longitude values passed to coordinate props were String and not Number.

[alvelig]

Order matters. First render markers. If the issue persists let me know.
Also {this.renderMapUrlTile()} content is important

[sydneywu]

@alvelig What does order matters mean? I got this code and it throw the same error.

  const data = [
            {coordinate:{latitude: 3.148561,longitude: 101.652778}, title:"1", description:"1"},
            {coordinate:{latitude: 3.148561,longitude: 101.752778}, title:"2", description:"2"},
            {coordinate:{latitude:3.148561, longitude:101.852778}, title:"3", description:"3"},
        ]
<MapView
      style={styles.mapStyle.styles}
      initialRegion={{
          latitude: 3.148561,
           longitude: 101.752778,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
       }}
 >

      {data.map((obj, index) =>(
          <MapView.Marker  
               coordinate={obj.coordinate}
          />   
       ))
       }
 </MapView>

Error:
index=3 count=1
addInArray
viewGroup.Java:4761

Looking at the java source code, this error is this exception:
throw new IndexOutOfBoundsException("index=" + index + " count=" + count);

[sydneywu]

I realized my mistake is that i added a within the . Not sure why, but it works after i removed it.

[camelmasa]

I encountered @sydneywu's same error. @sydneywu Could you comment your removed the "it" if possible ?

[SyeedHasan]

Can someone please debug sydney's comment? I'm still experiencing the same error.

[Peeeep]

Hello from the future: In case Android throws the same error and you are using a custom <Marker /> with a custom <Callout />: Order matters:

<Marker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} /> // <— This needs to come first…

  <Callout> // <— …and not after this
    <MyCustomCalloutView {...marker} />
  </Callout>
</Marker>

[iphonic]

@Peeeep This works, thanks for pointing out..

[tranhoangduong1994]

For anyone experiencing a similar issue recently, in my case, it happened when I passed an empty array to the coordinates prop of the Polyline component (so in my case, it's not caused by Markers as mentioned by the others). So just ensure that the coordinates array is not empty.