Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom image markers not appearing on iOS #237

Open
Vel1khan opened this issue May 20, 2022 · 1 comment
Open

Custom image markers not appearing on iOS #237

Vel1khan opened this issue May 20, 2022 · 1 comment

Comments

@Vel1khan
Copy link

Vel1khan commented May 20, 2022

Custom image markers appear to not render properly on iOS.

I'm using a custom marker defined as follows:

type MemoMarkerProps = {
  coordinate: LatLng
  museum: Museum
  onPress(): void
}

const MemoMarker = ({ museum, onPress }: MemoMarkerProps) => {
  return (
    <Marker
      coordinate={{
        latitude: museum.latitude,
        longitude: museum.longitude
      }}
      tracksViewChanges={false}
      image={loadMapIcon(museum.typeid)}
      onPress={onPress}
    />
  )
}

I am also using a custom cluster marker defined as follows:

type ClusterMemoMarkerProps = {
  cluster: any
}

const ClusterMemoMarker = (props: ClusterMemoMarkerProps) => {
  const { geometry, onPress, properties } = props.cluster
  const points = properties.point_count
  const { width, height, fontSize, size, clusterColor, borderColor } = getMarkerStyle(points)
  return (
    <Marker
      coordinate={{
        longitude: geometry.coordinates[0],
        latitude: geometry.coordinates[1]
      }}
      style={{ zIndex: points + 1 }}
      onPress={onPress}
      tracksViewChanges={false}
    >
      <TouchableOpacity activeOpacity={0.5} style={[styles.container, { width, height }]}>
        <View
          style={[
            styles.wrapper,
            {
              backgroundColor: clusterColor,
              width,
              height,
              borderRadius: width / 2,
              opacity: 1
            }
          ]}
        />
        <View
          style={[
            styles.cluster,
            {
              backgroundColor: 'white',
              width: size,
              height: size,
              borderRadius: size / 2,
              borderWidth: 3,
              borderColor: borderColor
            }
          ]}
        >
          <Text style={[styles.text, { fontSize: fontSize }]}>{points}</Text>
        </View>
      </TouchableOpacity>
    </Marker>
  )
}

I have also tried to instead of using the image attribute of <Marker/> to instead do <Marker><><Image/></><Marker/> however the same behaviour happens but performance is worse. These exact same custom markers appear when using the default MapView from 'react-native-maps'.
The strange thing is that when using the default markers, it works perfectly:

iOS (iPhone 13 Pro, software version 15.4.1)

RPReplay_Final1652909579.mp4

Android

22-05-20-13-00-25.mp4
@Miilla
Copy link

Miilla commented Jul 6, 2022

try to remove
tracksViewChanges={false}
from Marker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants