Search code examples
reactjsreact-nativeandroid-mapview

MapView.Polyline in react native with expo throws an error (I'm testing with an android)

I’m trying to draw a line with polyline, but I’m getting this error:

Error while updating property ‘lineCap’ of a view managed by: AIRMapPolyline null Attempt to invoke virtual method ‘void com.google.android.gms.maps.model..u.g(java.util.List) on a null object reference

This is the code:

           <MapView
                style={styles.map}
                initialRegion={{
                    latitude: initialLocation.latitude,
                    longitude: initialLocation.longitude,
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01
                }}
            >
                <Circle
                    center={currentLocation.coords}
                    radius={30}
                    strokeColor='rgba(158, 158, 255, 1.0)'
                    fillColor='rgba(0, 0, 255, 0.3)'
                />
                {drawLine && (
                    <MapView.Polyline
                        coordinates={locations.map(loc => {
                            return {
                                latitude: loc.coords.latitude,
                                longitude: loc.coords.longitude
                            };
                        })}
                        strokeColor='red'
                        strokeWidth={1}
                    />
                )}
            </MapView>

The map draws ok, the circle shows ok, but when I try to draw a line, it throws that awful error.

The array of objects is already checked

enter image description here enter image description here

https://github.com/rafaelsoteldosilva/maptest

What could it be?

Rafael

Solution

  • All you need to do is to add :

    lineDashPattern={[1]}

    as an attribute to your Polyline component like :

    <Polyline
   style={{}}
   coordinates={route}
   strokeColor={#000}
   strokeWidth={3}
   lineDashPattern={[1]}
/>

    You should be good to go