index=4 count=5 addInArray AddViewInner error React Native maps

React Native apps will fail in Android if you use the react-native-maps module improperly.

The problem is documented:

Components that aren’t declared by this library (Ex: Markers, Polyline) must not be children of the MapView component due to MapView’s unique rendering methodology. Have your custom components / views outside the MapView component and position absolute to ensure they only re-render as needed. Example:

Bad:

<View style={StyleSheet.absoluteFillObject}>
  <MapView style={StyleSheet.absoluteFillObject}>
    <View style={{ position: 'absolute', top: 100, left: 50 }}/>
  </MapView>
</View>

Good:

<View style={StyleSheet.absoluteFillObject}>
  <MapView style={StyleSheet.absoluteFillObject}/>
  <View style={{ position: 'absolute', top: 100, left: 50 }}/>
</View>

When you do things the wrong way, you’ll get a RedBox error. The error can have different formats depending on what your code looks like. It might say

index=4 count=3
addInArray
ViewGroup.java

addViewInner
ViewGroup.java

addView
ViewGroup.java

addFeature
AirMapView.java

manageChildren
NativeViewHierarchyManager
...

The initial error message may also say “The specified child already has a parent. You must call removeView() on the child’s parent first”. The stack trace will be similar, but not identical.

The documentation explains how to fix this problem: simply move the improper components outside of MapView.

I’ve got a working React Native app checked into github that demos the issue and the fix. There’s also a YouTube video.

I hope this blog post helps you fix your React Native bug!