react-nativereact-hooksmapsreact-native-mapscurrentlocation

How do you get the traditional blue map marker in your app's map in React Native?


I have an option in my app where my user sees their current location, but it is currently represented with a pin. I would like to replace it with the pulsing blue dot that is found on both iOS and Android when you open up your phone's maps app. How can this be achieved without using a "custom image" as my map marker? It may be worth noting that I am using react-native-maps


Solution

  • Generally speaking, you can't get the 'standard' iOS or Android Marker to show up in your RN Maps. The next best thing to do would be to use react-native-svg

    This would create a 'standard' looking marker, and what I did.

    Below is an example as to how you could do this in Expo SDK 43

    import Svg, {Path, Circle, Ellipse} from 'react-native-svg'
    import MapView, { Marker } from "react-native-maps";
    

    ...

    const icon = () => {
          return(
            <Svg 
              height = {20}
              width = {20}
            >
            <Ellipse
              cx="10"
              cy="10"
              rx="10"
              ry="10"
              fill="blue"
              stroke="#fff"
              strokeWidth="2"
            />
            </Svg>
    
            )
        }
    

    ...

    <MapView>
      <Marker
         coordinate={ 
          //coordinate parameters go here
         }
      >
        <View>
          {(icon())}
        </View>
      </Marker>
     </MapView>