ANDROID DEVICE: addViewAt: failed to insert view [664] into parent [646] at index 0 The specified child already has a parent. You must call removeView() on the child's parent first.

[kuldipopenxcell]

Summary

When i add Polyline inside MapView then it give this error:

addViewAt: failed to insert view [664] into parent [646] at index 0

The specified child already has a parent. You must call removeView() on the child's parent first.

Reproducible sample code

import {Alert, Dimensions, Image, PanResponder, View} from 'react-native';
import React, {useRef, useState} from 'react';
import {styles} from './style';
import MapView, {PROVIDER_GOOGLE, Polyline} from 'react-native-maps';

const MapPage = () => {
  const mapRef = useRef(null);
  const [lines, setLines] = useState([]);
  const [isDrawing, setIsDrawing] = useState(false);
  const [prevCoordinate, setPrevCoordinate] = useState(null);

  const handleTouchStart = () => {
    setIsDrawing(true);
  };

  const handlePanDrag = event => {
    const {coordinate} = event.nativeEvent;
    if (isDrawing && prevCoordinate) {
      setLines([...lines, [prevCoordinate, coordinate]]);
      console.log('lines', [...lines, [prevCoordinate, coordinate]]);
    }
    setPrevCoordinate(coordinate);
  };

  const handleTouchEnd = () => {
    setIsDrawing(false);
    setPrevCoordinate(null);
  };
  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        style={{flex: 1}}
        scrollEnabled={false}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        onTouchStart={handleTouchStart}
        onPanDrag={handlePanDrag}
        onTouchEnd={handleTouchEnd}>
        {lines.map((line, index) => (
          <Polyline
            key={index}
            coordinates={line}
            strokeColor="#FF0000"
            strokeWidth={3}
            lineDashPattern={[1]}
          />
        ))}
      </MapView>
    </View>
  );
};

export default MapPage;

Steps to reproduce

1. Install react-native-maps
2. Add MapView
3. Add Polyline inside MapView
4. In android start by dragging in the map
5. App crashed (Attached screenshot)

Expected result

It should draw a Polylines in MapView

Actual result

It crashes with the android app

React Native Maps Version

1.14.0

What platforms are you seeing the problem on?

Android

React Native Version

0.73.6

What version of Expo are you using?

Not using Expo

Device(s)

Pixel_3a_API_34 Emulator

Additional information

[ashrock]

had the same issue. issue happens when Polyline is used on Expo Go for Android simulator. No issue experienced on iOS simulator

[kuldipopenxcell]

I found a solution for this for android, here are the steps to follow:

1. Create a file named react-native.config.js in the root dir. of the project,
2. Paste below code in the file and build again.

module.exports = {
  project: {
    android: {
      unstable_reactLegacyComponentNames: [
        'AIRGoogleMap',
        'AIRMap',
        'AIRMapMarker',
        'PanoramaView',
        'AIRMapPolyline',
      ],
    },
    ios: { },
  }
};

[kuldipopenxcell]

@react-native-maps-bot
This is temporary solution, we are looking for the permanent solution in the next version.
Thanks!

[salah-ghanim]

@kuldipopenxcell this is rather the way to enable react-native-maps with Fabric enabled, please checkout the documentations on the main page or the example file:
https://github.com/react-native-maps/react-native-maps/?tab=readme-ov-file#react-native-configuration-for-fabric--new-architecture