We are developing application in React Native, our requirement is on map need to show Multiple Marker. and when user press on it should show info window with that particular location image on circle shape and arrow that indicate with marker you can see on attached images. This issue is almost in android but in ios customise is working fine.
We have used below version of Mapbox and React native
Run on Platform OS: [Android 10]
@react-native-mapbox-gl/maps Version [8.4.0]
React Native Version [0.66.1]
We have tried all possible way to implement but each component have something issue. Like We have tried below compoments MapboxGL.PointAnnotation without any sub Result:- view pin will visible but when press on it app get crash in android
MapboxGL.ShapeSource Result:- Nothing display
MapboxGL.PointAnnotation with Image view Result:- Display Pin but only work local image
MapboxGL.MarkerView Result:- Not stable, on zoom/move map marker gove any where
Here is my code
import AsyncStorage from "@react-native-async-storage/async-storage";
import React, { useEffect, useRef, useState } from "react";
import { StatusBar, Text, View, Image, TouchableOpacity, Platform, ScrollView, TextInput } from "react-native";
import { Size } from "../../utils/sizes";
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import styles from "./styles";
import Colors from "../../utils/Colors";
import Strings from "../../utils/Strings";
import Toggle from "../../components/Toggle";
import { Assets } from "../../assets/icons";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import MapboxGL from '@react-native-mapbox-gl/maps';
import { ACCESSTOKEN } from "../../utils/Constants";
MapboxGL.setAccessToken(ACCESSTOKEN);
const MapBod_Height = Size.height * 0.5;
export default function AddPost(props) {
const [ImageGallery, setImageGallery] = useState(null)
const [region, setRegion] = useState({
latitude: 23.0225,
longitude: 72.5714,
screenPointX: 100,
screenPointY: 100,
})
//Skipping first iteration (exactly like componentWillReceiveProps):
const isFirstRun = useRef(true);
useEffect(() => {
if (isFirstRun.current) {
isFirstRun.current = false;
onClickGallery()
// requestCameraPermission()
} else {
}
}, [CommonReducer])
const onClickGallery = () => {
var options = {
mediaType: 'photo',
maxWidth: 800,
maxHeight: 800
};
launchImageLibrary(options,
(response) => {
console.log(response, 'get image response')
if (response.didCancel) { setCancelText("We couldn't access your device's gallery") }
else if (response.errorCode) { setCancelText("We couldn't access your device's gallery") }
else {
setImageGallery(response)
}
})
}
const onPress = (event) => {
const { geometry, properties } = event;
setRegion({
latitude: geometry.coordinates[1],
longitude: geometry.coordinates[0],
screenPointX: properties.screenPointX,
screenPointY: properties.screenPointY,
});
}
const ImageMarker = ({ children }) =>
Platform.select({
ios: children,
android: <Text
style={{
lineHeight: 60,
backgroundColor: Colors.transparent,
}}>
{children}
</Text>
});
return (
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
scrollEnabled={true}
keyboardShouldPersistTaps={"handled"}
contentContainerStyle={{ flexGrow: 1 }}
enableResetScrollToCoords={false}
>
{ImageGallery && <View style={styles.container}>
<MapboxGL.MapView
style={{ height: MapBod_Height }}
styleURL={"mapbox://styles/ailebo/ckvhrplb02gjs14lzqfao134z"}
onPress={onPress}>
<MapboxGL.UserLocation />
<MapboxGL.Camera
zoomLevel={8}
animationMode={'flyTo'}
animationDuration={1100}
centerCoordinate={[region.longitude, region.latitude]}
/>
{/* Result:- Can load only local assets, and can not customze marker */}
{/* <MapboxGL.Annotation
id={'-annotation'}
key={"123"}
onPress={(event) => console.log("event ==> ", event)}
icon={Assets.bike}
coordinates={[region.longitude, region.latitude]}
/> */}
{/* Result:- Red pin, on click of that app get crash */}
{/* <MapboxGL.PointAnnotation coordinate={[region.longitude, region.latitude]} /> */}
{/* Result:- Nothing display */}
{/* <MapboxGL.ShapeSource
id='allMarkers'
shape={[region.longitude, region.latitude]}
>
<MapboxGL.SymbolLayer
id='markersLevel2'
style={{
iconImage: 'https://cdn.onlinewebfonts.com/svg/img_525159.png', //'https://cdn.onlinewebfonts.com/svg/img_525160.png'
iconSize: 0.05,
}}
/>
<MapboxGL.SymbolLayer
id='markersLevel1'
style={{
iconImage: ['get', 'markerImage'],
iconSize: 0.09,
}}
/>
</MapboxGL.ShapeSource> */}
{/* Result:- Nothing display */}
{/* <MapboxGL.Images
images={Assets.tree}
onImageMissing={url =>
console.log("url ", url)
}
/> */}
{/* Result:- Display Pin but only work local image */}
{/* <View>
<MapboxGL.PointAnnotation
id={'-annotation'}
key={"123"}
coordinate={[region.longitude, region.latitude]}
title={"title"}>
<ImageMarker>
<Image
source={Assets.tree}
style={{ width: 30, height: 30 }}
/>
</ImageMarker>
</MapboxGL.PointAnnotation>
</View> */}
{/* Result:- Nothing display */}
{/* <View>
<MapboxGL.PointAnnotation
id={'-annotation'}
key={"123"}
coordinate={[region.longitude, region.latitude]}
title={"title"}>
<MapboxGL.Callout title='your-title' />
<View style={{ height: 80, width: 80, }}>
<Text style={styles.annotationFill}>
{<Image source={{ uri: 'https://api.adorable.io/avatars/400/abott@adorable.io.png' }} style={{ height: 80, width: 40, }} />}
</Text>
</View>
</MapboxGL.PointAnnotation>
</View> */}
{/* Result:- Black Pin and on click of that app get crash */}
{/* <View>
<MapboxGL.PointAnnotation
id={'-annotation'}
key={"123"}
coordinate={[region.longitude, region.latitude]}
title={"title"}>
<View style={{ height: 80, width: 40, backgroundColor: 'transparent', alignItems: 'center' }}>
<View style={{ width: 40, height: 40, backgroundColor: '#000000', borderRadius: 40 / 2 }}>
<Image
style={{ width: 25, height: 25 }}
source={Assets.tree}
/>
</View>
<View style={{ width: 2, height: 20, backgroundColor: '#000000' }} />
</View>
</MapboxGL.PointAnnotation>
</View> */}
{/* Result:- Not stable, on zoom/move map marker gose any where */}
{/* <MapboxGL.MarkerView id={"marker"} coordinate={[region.longitude, region.latitude]}>
<View>
<View style={styles.markerContainer}>
<View style={styles.textContainer}>
<Image source={{ uri: ImageGallery.uri }} style={{ width: 50, height: 50, borderRadius: 50, backgroundColor: "red", resizeMode: "cover", }} />
</View>
<Image source={Assets.back_icon} style={{ width: 10, height: 10, }} />
</View>
</View>
</MapboxGL.MarkerView> */}
</MapboxGL.MapView>
</View>
}
</KeyboardAwareScrollView>
);
}
I have attached images what i want.
