bramus / react-native-maps-directions

Directions Component for `react-native-maps`
MIT License
1.24k stars 196 forks source link

App crashes when add images on map as Marker #191

Open UmarFarooqCA opened 2 years ago

UmarFarooqCA commented 2 years ago

The app works fine when I remove the images from the map.

Android emulator and setup according to requirement. https://reactnative.dev/docs/environment-setup#development-os


<View style={{ flex: 1 }}>
        <MapView
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
          initialCamera={{
            altitude: 15000,
            center: {
              latitude: 23.7603,
              longitude: 90.4125,
            },
            heading: 0,
            pitch: 0,
            zoom: 11,
          }}
          provider={PROVIDER_GOOGLE}
          loadingEnabled
          loadingBackgroundColor="white"
          style={StyleSheet.absoluteFill}
          ref={c => (this.mapView = c)} // eslint-disable-line react/jsx-no-bind
          onPress={this.onMapPress}>
          <MapViewDirections
            origin={this.state.coordinates[0]}
            destination={
              this.state.coordinates[this.state.coordinates.length - 1]
            }
            waypoints={this.state.coordinates.slice(1, -1)}
            mode="DRIVING"
            apikey={API_KEY}
            language="en"
            strokeWidth={5}
            strokeColor="#007AFF"
            onStart={params => {
              console.log(
                `Started routing between "${params.origin}" and "${params.destination
                }"${params.waypoints.length
                  ? ' using waypoints: ' + params.waypoints.join(', ')
                  : ''
                }`,
              );
            }}
            onReady={this.onReady}
            onError={errorMessage => {
              console.log(errorMessage);
            }}
            resetOnChange={false}
          />
          <Marker
            anchor={{ x: 0.5, y: 0.6 }}
            coordinate={{
              latitude: coords[0].latitude,
              longitude: coords[0].longitude,
            }}
            flat
            style={{
              ...(coords[0].heading !== -1 && {
                transform: [
                  {
                    rotate: `${coords[0].heading}deg`,
                  },
                ],
              }),
            }}>
            <View>
              <View style={styles.card}>
                <Image source={img} />
                <View
                  style={{
                    paddingLeft: 10,
                  }}>
                  <Text style={{ color: '#383732' }}>Your Location</Text>
                  <Text
                    style={{
                      color: '#999894',
                      fontSize: 10,
                      lineHeight: 20,
                    }}>
                    123 Star St, New Y...
                  </Text>
                </View>
              </View>
              <View style={styles.dotContainer}>
                <View style={styles.dot} />
              </View>
            </View>
          </Marker>
          <Circle
            center={{
              latitude: coords[0]?.latitude,
              longitude: coords[0]?.longitude,
            }}
            radius={coords[0]?.accuracy}
            strokeColor="rgba(0, 150, 255, 0.5)"
            fillColor="rgba(0, 150, 255, 0.5)"
          />
          <Marker
            anchor={{ x: 0.5, y: 0.6 }}
            coordinate={{
              latitude: coords[1].latitude,
              longitude: coords[1].longitude,
            }}
            flat
            style={{
              ...(coords[1].heading !== -1 && {
                transform: [
                  {
                    rotate: `${coords[1].heading}deg`,
                  },
                ],
              }),
            }}>
            <View>
              <View style={styles.card}>
                <Image source={img2} />
                <View
                  style={{
                    paddingLeft: 10,
                  }}>
                  <Text style={{ color: '#383732' }}>Your Location</Text>
                  <Text
                    style={{
                      color: '#999894',
                      fontSize: 10,
                      lineHeight: 20,
                    }}>
                    123 Star St, New Y...
                  </Text>
                </View>
              </View>

              <View style={styles.dotContainer}>
                <View style={styles.dot} />
              </View>
            </View>
          </Marker>
          <Circle
            center={{
              latitude: coords[1]?.latitude,
              longitude: coords[1]?.longitude,
            }}
            radius={coords[1]?.accuracy}
            strokeColor="rgba(0, 150, 255, 0.5)"
            fillColor="rgba(0, 150, 255, 0.5)"
          />
        </MapView>
      </View>

image