Marker are hidden until i move the map

[ashadnasim52]

Package Versions:- "react": "18.2.0", "react-native": "0.71.8", "react-native-map-clustering": "^3.4.2", "react-native-maps": "^1.7.1",

Please check attachment https://github.com/venits/react-native-map-clustering/assets/38835999/cb5732c7-1338-49a3-aa29-6f611de95803

[RichSDavies]

any progress, we are also having this issue but only on iOS

[ashadnasim52]

any progress, we are also having this issue but only on iOS

no, I am working on some other things in the app, according to what I find this occurs when we set region or the animate to a region

[ashadnasim52]

any progress, we are also having this issue but only on iOS

Can you share that code, so that it can be helpful to the others?

[ashadnasim52]

@RichSDavies

[armanian]

Same here:

"expo": "^49.0.13",
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-map-clustering": "^3.4.2",
"react-native-maps": "1.7.1",

[armanian]

I have solved the problem in my case. My initialRegion from store was:

{
  latitude: 0,
  longitude: 0,
  latitudeDelta: 0,
  longitudeDelta: 0,
}

Writing the store with the correct data was then ignored. My solution is that I render <MapView> only when initialRegion is complete:

{initialRegion.latitude !== 0 && (
  <MapView initialRegion={initialRegion}></MapView>
)}

[MenamAfzal]

I'm experiencing the same issue on production Until it's on staging everything is working fine and markers are being showed once data is fetched but on production markers are hidden until map is moved or touched and this issue persist on some devices

"react": "18.2.0", "react-native": "0.72", "react-native-google-maps": "^1.0.0", "react-native-map-clustering": "^3.4.2",

[aglamadrid19]

I'm having the same issue:

This is happening on iOS with the Google Maps provider only, Apple Maps clustering works fine. This is an issue because until its fixed we can deploy to Android.

"react": "18.2.0",
"react-native": "0.72.6",
"react-native-maps": "1.7.1",
"react-native-map-clustering": "^3.4.2",

The work around from @armanian is not working because in my case I'm setting initialRegion before the component renders and its still not working. See below:

const INITIAL_REGION = {
  latitude: 25.7935971403407,
  longitude: -80.19979599863291,
  latitudeDelta: 0.3025008846275625,
  longitudeDelta: 0.19440717995165357
}

const ListingsMap = ({ listings }) => {
  const router = useRouter()
  const onMarkerSelected = (item) => {
    router.push(`/listing/${item.id}`)
  }
  return (
    <View>
      <MapView 
        style={styles.map} 
        // provider={PROVIDER_GOOGLE}
        initialRegion={INITIAL_REGION}
        clusterColor={Colors.primary}
      >
        {listings.map((item) => (
          <Marker
            key={item.id}
            onPress={() => onMarkerSelected(item)}
            coordinate={{
              latitude: item.latitude,
              longitude: item.longitude
            }}
          >
            <View style={styles.marker}>
              <Text style={styles.markerText}>
                $ {item.damage}
              </Text>
            </View>
          </Marker>
        ))}
      </MapView>
    </View>
  )
}

[wojtekhorembala]

I'm having the same issue

[ashadnasim52]

I have solved the problem in my case. My initialRegion from store was:

{
  latitude: 0,
  longitude: 0,
  latitudeDelta: 0,
  longitudeDelta: 0,
}

Writing the store with the correct data was then ignored. My solution is that I render <MapView> only when initialRegion is complete:

{initialRegion.latitude !== 0 && (
  <MapView initialRegion={initialRegion}></MapView>
)}

This solved my bug also