CODEWITHSUNDEEP
javascriptreactjsreact-nativedictionary
Samuel Mariña
Samuel Mariña

Reputation: 129

Change opacity of fillColor in React Native Maps polygon?

I want to reduce the opacity of the map's polygon's fill color, so I can see through what I am bordering with the polygon coordinates.

I read the React Native Maps documentation but couldn't find anything related to changing the opacity.

This is my code

function HomeScreen(props) {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}
        mapType="satellite"
        style={styles.map}
        initialRegion={{
          latitude: 39.675775,
          longitude: -75.768287,
          latitudeDelta: 0.0122,
          longitudeDelta: 0.0121,
        }}
      >
        <Polygon
          coordinates={coordinates.polygon}
          strokeColor="red"
          strokeWidth={2}
        />
      </MapView>
      ...
   </View>

   );
}

I tried adding a style prop to the Polygon, setting the opacity to 0.5, but I guess it doesn't work since style isn't a property of Polygon.

I also tried adding a View inside the Polygon as follows:

<Polygon
  coordinates={coordinates.polygon} 
  strokeColor="red"
  strokeWidth={2}
  >
    <View style={{ backgroundColor: "blue", opacity: 0.5 }} />
</Polygon>

But that didn't work either. Any suggestions?

Upvotes: 0

Views: 2455

Answers (1)

Samuel Mari&#241;a
Samuel Mari&#241;a

Reputation: 129

Instead of adding the prop opacity, which is not included in the Polygon props, what I found is that you can define a color with an opacity using the rgba color code.

For example, red would be "rgba(255, 0, 0, 0.5)", in which "0.5" refers to the opacity (being a number between 0 and 1).

This way, it would be as simple as this:

<Polygon
  coordinates={coordinates.polygon} 
  strokeColor="red"
  strokeWidth={2}
  fillColor="rgba(255, 0, 0, 0.5)"
/>

Upvotes: 3

Related Questions