Open UmarFarooqCA opened 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>
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