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 YouTube video that shows the issue, and a simple project at github that demos the error and the fix. I hope this blog post helps you fix your React Native bug!

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!

If you found this interesting, click the subscribe button below! I write a new post about once a week.

Leave a Reply

Your email address will not be published. Required fields are marked *