CODEWITHSUNDEEP
reactjsgoogle-mapsreact-nativepolygonreact-native-ios
neman
neman

Reputation: 314

Polygon fill color not working properly (React Native maps)

I am using Google Maps on iOS and I have Polygons. (react-native-maps)

Before update (to version 0.18.3. - at the moment I am not able to update to latest version) everything works properly, but from now fill color gets weird results.

Sometimes color is ok, sometimes it is not proper, no rules.

On android everything works well.

export const Polygon = (props) => {
    return (
        <MapView.Polygon
            coordinates={ props.selectedAreas }
            fillColor={ props.fillColor }
            strokeColor={ props.strokeColor }
        />
    )
};

Upvotes: 2

Views: 2620

Answers (1)

iomihai
iomihai

Reputation: 116

Worked for me using the fix from https://github.com/react-native-community/react-native-maps/issues/3025#issuecomment-538345230

import React from 'react';
import { Polygon } from 'react-native-maps';

function CustomPolygon({ onLayout, ...props }) {
  const ref = React.useRef();

  function onLayoutPolygon() {
    if (ref.current) {
      ref.current.setNativeProps({ fillColor: props.fillColor });
    }
    // call onLayout() from the props if you need it
  }

  return <Polygon ref={ref} onLayout={onLayoutPolygon} {...props} />;
}

export default CustomPolygon;

It is not very pretty but I guess it will have to do until the upstream bug is fixed.

Upvotes: 4

Related Questions