GeoJSON Source

import React from 'react';
import {
  MapView,
  Camera,
  ShapeSource,
  FillLayer,
  VectorSource,
  BackgroundLayer,
  StyleURL,
} from '@rnmapbox/maps';

import sheet from '../../styles/sheet';
import gridPattern from '../../assets/grid_pattern.png';
import smileyFaceGeoJSON from '../../assets/smiley_face.json';
import BaseExamplePropTypes from '../common/BaseExamplePropTypes';

const layerStyles = {
  background: {
    backgroundPattern: gridPattern,
  },
  smileyFace: {
    fillAntialias: true,
    fillColor: 'white',
    fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
  },
};

class GeoJSONSource extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  render() {
    return (
      <>
        <MapView
          ref={(ref) => {
            this.map = ref;
          }}
          style={sheet.matchParent}
          styleURL={StyleURL.Dark}
        >
          <Camera zoomLevel={2} centerCoordinate={[-35.15165038, 40.6235728]} />

          <VectorSource>
            <BackgroundLayer id="background" style={layerStyles.background} />
          </VectorSource>

          <ShapeSource id="smileyFaceSource" shape={smileyFaceGeoJSON}>
            <FillLayer id="smileyFaceFill" style={layerStyles.smileyFace} />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default GeoJSONSource;

}