CODEWITHSUNDEEP
javascriptgoogle-mapsreactjsreact-nativereact-native-maps
Nyxynyx
Nyxynyx

Reputation: 63639

Using react-native-maps to Change pinColor of MapView.Marker

The color of MapView.Marker does not seem to change from the default red color even after assigning a color to pinColor.

Is something wrong?

{ this.state.markers.map(marker => {
    return (
        <MapView.Marker 
            coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
            key={marker.key}
            pinColor='#000000'
        />
    )
})}

Screen cap from Android Emulator

enter image description here

Upvotes: 5

Views: 12390

Answers (2)

Gabriel Scalici
Gabriel Scalici

Reputation: 650

Allowed colors for Marker are: red, tomato, orange, yellow, green, gold, wheat, linen, tan, blue, aqua, teal, violet, purple, indigo, turquoise, navy and plum.

Like:

<MapView.Marker
    pinColor={'green'}
/>

Upvotes: 10

rajaishwary
rajaishwary

Reputation: 5082

You missed the curly braces. Everything else is fine and it will work or better define the color as const and pass that like this.

const pinColor = '#000000';

and then pass it like..

pinColor = {pinColor}

Upvotes: 6

Related Questions