An array of markers is being rendered on Android but not on iOS. When I pass a single marker this does work but the array fails to show.
It works on iOS inside the expo app but when I publish it to testflight it stops working.
"react-native-maps": "1.3.2" "expo": "^47.0.0"
my component code is:
const MapV2 = ({location, style, markers, title, coordinate, onPress, selectedStation}) => {
const mapRef = useRef(null);
const [mapReady, setMapReady] = useState(false);
const onRegionChangeComplete = (currentRegion) => {};
return (
<MapView
ref={mapRef}
onMapReady={() => {
setTimeout(() => setMapReady(true), 1000)
}}
style={style}
initialRegion={{
...location,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onRegionChangeComplete={(currentRegion) => {
onRegionChangeComplete(currentRegion);
}}
showsUserLocation
showsMyLocationButton={false}
provider={PROVIDER_GOOGLE}
customMapStyle={...}
>
{markers?.map((m, index) => {
return (
<Marker
key={index}
coordinate={m.coordinate}
onPress={m.onPress}
tracksViewChanges={!mapReady}
image={
selectedStation?.id == m.item.id
? petrol_on
: m.homeStation
? petrol_home
: petrol_off
}
/>
);
})}
{title && (
<Marker
key={"1"}
title={title}
coordinate={coordinate}
onPress={onPress}
image={petrol_on}
/>
)}
</MapView>
);
}
I've implemented the solution written in: https://github.com/react-native-maps/react-native-maps/issues/3384 but no luck
I've tried https://github.com/venits/react-native-map-clustering/issues/237
Tried a functional and non functional component but both the same result.
Added a zIndex to the Marker.
I had the same issue and I was importing Marker as follows (and not getting any errors):
import Marker from 'react-native-maps';
I changed it as follows and markers started showing up.
import { Marker } from 'react-native-maps';
I hope this helps :)