[Android] FIllLayer is always filled Black, even while fillColor style specified, (not working in Android).

[Athul-Raj]

MapboxGL.FillLayer style is not getting updated in Android, However works fine in iOS.

Versions:

"@react-native-mapbox-gl/maps": "^7.0.0"
"react": "16.8.3",
"react-native": "0.59.5",

Code Snippet:

import { View } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import GLOBAL from '../../Utilities/Global';

MapboxGL.setAccessToken(GLOBAL.MAPBOX_TOKEN);

const layerStyles = {
  clusteredPoints: {
    fillColor: [
      'step',
      ['get', 'colorTypeId'],
      1, 'rgb(234,223,123)',
      2, 'rgb(24,23,123)',
    ],
    fillOpacity: 1.0,
  },
};

export default class MapViewComponent extends Component {
  componentDidMount(): void {
    MapboxGL.setTelemetryEnabled(false);
  }

  render() {
    return (

      <View style={{ flex: 1, backgroundColor: '#F5FCFF' }}>

        <MapboxGL.MapView
          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
          styleURL={MapboxGL.StyleURL.Satellite}
          maxBounds={[76.7117667099, 30.2877641508, 76.7178835713, 30.2905076488]}
        >
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[76.7148251406, 30.2891358998, 18]}
            animationMode="flyTo"
          />
          <MapboxGL.ShapeSource
            id="exampleShapeSource"
            shape={polygonJson}
          >
            <MapboxGL.FillLayer
              id="payshopsCircles"
              filter={['has', 'colorTypeId']}
              style={layerStyles.clusteredPoints}
            />
          </MapboxGL.ShapeSource>

        </MapboxGL.MapView>
      </View>
    );
  }
}

GeoJSON File:

const polygonJson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: { type: 'Point', coordinates: [-73.99155, 40.73581] },
      properties: { prop0: 'value0', colorTypeId: 2 },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [[76.712294, 30.290316], [76.71325545, 30.29010864], [76.713222, 30.289638],
          ],
        ],
      },
      properties: {
        prop0: 'value0',
        prop1: { this: 'that' },
        colorTypeId: 1,
      },
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [[76.71291915023937, 30.290309775456194], [76.7130510255059, 30.290299353299304],
            [76.713500140, 30.2902847073], [76.71347637, 30.290237489],
          ],
        ],
      },
      properties: {
        prop0: 'value111',
        prop1: { this: 'that' },
        colorTypeId: 2,
      },
    },
  ],
};

ScreenShots: iOS and Android respectively

[kristfal]

You are using expressions instead of functions to set color. This library only supports functions. Please migrate to the new repo, listed top of readme, for expression support.

[Athul-Raj]

Thanks for the update, posted in wrong repo. https://github.com/react-native-mapbox-gl/maps/issues/346