How to Overlay selected custom marker in react-native-maps - react-native

Question

I use react-native-maps to display an array of positions using custom marker. I want to overlay the selected maker, but did not found the right solution. Using position: 'absolute' for the selected marker changes its position in the map.
Here is the code of the MapView:
<MapView
style={styles.map}
region={region} // initial region is user location if myPosition or coordinates of search
// onRegionChange={onRegionChange}
>
<View style={{position: 'absolute'}}>
{data.map((item) => (
<Marker
onPress={() => handleMarkerPress(item)}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}
// image={require('Resources/geoloc.png')}
// pinColor={item.id === visibleItemId ? 'red' : 'blue'}
key={item.id}>
<MosqueMarquer
mosqueImage={item.images}
itemId={item.id}
visibleItemId={visibleItemId}
distance={item.distance_result}
/>
</Marker>
))}
{isUserGeoLoc ? (
<Marker
coordinate={{
latitude: userLocation.latitude,
longitude: userLocation.longitude,
}}
description={'Your are here'}>
<Image
resizeMode="contain"
source={require('Resources/user_location.png')}
style={{tintColor: '#4280ee', height: 25}}
/>
</Marker>
) : null}
</View>
</MapView>
And here is the custom marker code:
const MosqueMarquer = (props) => {
const relativeStyle =
props.itemId == props.visibleItemId
? {position: 'absolute', tintColor: '#428947', color: '#fff', zIndex: 1}
: {position: null, tintColor: '#fff', color: '#3c423d', zIndex: 0};
return (
<ImageBackground
resizeMode="contain"
source={require('Resources/square_marker.png')}
style={{
...styles.imageBackground,
position: relativeStyle.position,
zIndex: relativeStyle.zIndex,
}}
imageStyle={{tintColor: relativeStyle.tintColor}}>
<Text style={{...styles.text, color: relativeStyle.color}}>
{props.distance}m
</Text>
</ImageBackground>
);
};
export default MosqueMarquer;
const styles = StyleSheet.create({
imageBackground: {
width: 70,
height: 70,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: common.FONT_SIZE_H38,
},
});
the selected marker in green is under the none selected one:
THANKS

Answer 1

<XMarksTheSpot coordinates={coordinatesOfYOurMarker} center={center} />
XMarksTheSpot ->
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { Polygon, Polyline, Marker } from 'react-native-maps';
class XMarksTheSpot extends React.Component {
render() {
return (
<View>
<Polygon
coordinates={this.props.coordinates}
strokeColor="rgba(0, 0, 0, 1)"
strokeWidth={3}
/>
<Polyline
coordinates={[this.props.coordinates[0], this.props.coordinates[2]]}
/>
<Polyline
coordinates={[this.props.coordinates[1], this.props.coordinates[3]]}
/>
<Marker coordinate={this.props.center} />
</View>
);
}
}
XMarksTheSpot.propTypes = {
coordinates: PropTypes.array,
center: PropTypes.object,
zIndex: PropTypes.number,
};
export default XMarksTheSpot;