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

Asked
Active3 hr before
Viewed126 times

10 Answers

mapviewpolylinethrowstestingandroidnativeerrorreact
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,I’m trying to draw a line with polyline, but I’m getting this error:, Podcast 369: Passwords are dead! Long live the new authentication flows.

All you need to do is to add :

lineDashPattern = {
   [1]
}
load more v
88%

I wrapped MapView code into following

<View style={{ flex: 1 }}>
 {this.state.isDataFetched && (
 <MapView
                    showsUserLocation
                    followsUserLocation
                    style={{ flex: 1 }}
                    initialRegion={{
                        latitude: 31.5623499,
                        longitude: 74.3287183,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}>

                    {this.state.allPlants.map((item, index) => {
                    return <MapView.Marker
                    key={item.id.toString()}
                    coordinate={{
                    latitude: item.latitude,
                    longitude: item.longitude,
                    }}>
                    <Image source={item.isDead?require("../../assets/dead_tree.png"):require("../../assets/tree.png")} key={item.id.toString()} />                  </MapView.Marker>
                    })}

                    <MapView.Polyline
                        coordinates={this.allCoords}
                        strokeWidth={6}
                        strokeColor="red"
                        fillColor="rgba(100,0,0,0.5)"
                        />
                </MapView>
)}
</View>
72%

Error while updating property 'lineCap' of a view managed by: AIRMapPolyline,Update: Changed Polyline to Polygon, built again in expo. the apk now works on my android device. How can I use polyline again?,Another workaround could be to set a lineDashPattern prop on your Polyline component.

diff--git a / node_modules / react - native - maps / lib / android / src / main / java / com / airbnb / android / react / maps / AirMapPolyline.java b / node_modules / react - native - maps / lib / android / src / main / java / com / airbnb / android / react / maps / AirMapPolyline.java
index 1 af0b9f. .662842 e 100644
-- - a / node_modules / react - native - maps / lib / android / src / main / java / com / airbnb / android / react / maps / AirMapPolyline.java
   ++ + b / node_modules / react - native - maps / lib / android / src / main / java / com / airbnb / android / react / maps / AirMapPolyline.java
@ @ - 100, 7 + 100, 6 @ @ public class AirMapPolyline extends AirMapFeature {

      private void applyPattern() {
            if (patternValues == null) {
               -polyline.setPattern(null);
               return;
            }
            this.pattern = new ArrayList < > (patternValues.size());
load more v
65%

Gradient polylines can be created using the strokeColors prop of the <Polyline> component.,Common: #3516 Polyline props to obtain dashed/dotted lines in Geojson component,Default markers will be rendered unless a custom marker is specified. One can optionally adjust the color of the default marker by using the pinColor prop.

import MapView from 'react-native-maps';
load more v
75%

 Pretag team - issue, fix, solve, resolve
40%

crissanchez8 forked react-native-maps/react-native-maps , jasonmichaels wants to merge react-native-maps/react-native-maps , mertbuldur forked react-native-maps/react-native-maps

Reproducible Demo

              <Marker
                coordinate={location}
              >
                <Callout>
                  <View
                    style={{
                      width: 100,
                      height: 100,
                      backgroundColor: 'blue'
                    }}
                  >
                    <Image
                      source={{
                        uri:
                          'https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg'
                      }}
                      style={{
                        width: 50,
                        height: 50,
                        backgroundColor: 'red',
                        resizeMode: 'cover'
                      }}
                    />
                    <Text>hey</Text>
                  </View>
                </Callout>
              </Marker>
load more v
22%

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!,In late 2015, Pierre and Debora Coorey opened The Vintage Apron, a fresh dining destination in Capalaba. Central to the cafe was the importance of fresh, quality food – a real step away from the chain cafes that dominate the Australian cafe scene.

 Pretag team - issue, fix, solve, resolve
60%

 Pretag team - issue, fix, solve, resolve
48%

Today we’re going to draw directions route on a map in React Native, showcasing the path between two different locations. We’re going to make use of react-native-maps which is a powerful library, allowing us to draw polylines between multiple coordinates. We are also going to use Google Directions API in order to fetch precise directions routes between two coordinates.,To achieve the goal of this article, we have to take a look at an element named Polyline, provided by react-native-maps which draws the directions route between two points on the map.,We were able to draw the directions route between two given locations on a map in React Native, by using a maps library as well as the Google Directions API endpoint.

Let’s install and configure this library. Depending on your preferred package manager, simply run:

npm install react - native - maps--save - exact
load more v
23%

 Pretag team - issue, fix, solve, resolve

Other "mapview-polyline" queries related to "MapView.Polyline in react native with expo throws an error (I'm testing with an android)"