react-nativeexpotestflightreact-native-maps

react-native-maps Markers not rendering on iOs


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.


Solution

  • 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 :)