SourcePressHandler.js

import React from 'react';
import { Text } from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';
import Bubble from './common/Bubble';

import sheet from '../styles/sheet';
import nycJSON from '../assets/nyc_geojson.json';

const styles = MapboxGL.StyleSheet.create({
  neighborhoods: {
    fillAntialias: true,
    fillColor: 'blue',
    fillOutlineColor: 'black',
    fillOpacity: 0.84,
  },
  selectedNeighborhood: {
    fillAntialias: true,
    fillColor: 'green',
    fillOpacity: 0.84,
  },
});

const mapStyles = MapboxGL.StyleSheet.create({
  parcels: {
    fillOutlineColor: '#40a0dd',
    fillColor:        '#40a0dd',
    fillOpacity:      0.5,
    fillAntialias: true,
  },
  parcelLine: {
    lineColor:   '#40a0dd',
    lineOpacity: 1,
    lineWidth: 1,
  }
})


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

  constructor(props) {
    super(props);
    this.state = this.emptyState;
    this.onPress = this.onPress.bind(this);
  }

  get emptyState() {
    return { selectedGeoJSON: null, };
  }

  async onPress(e) {
    const feature = e.nativeEvent.payload
    console.log("Got payload", e.nativeEvent.payload)

    if (feature && feature.geometry) {
      this.setState({
        selectedGeoJSON: feature,
      });
    } else {
      this.setState(this.emptyState);
    }
  }

  render() {
    const layerId = 'pr_centergeojson'

    return (
      <Page {...this.props}>
        <MapboxGL.MapView
          zoomLevel={16}
          ref={(c) => (this._map = c)}
          centerCoordinate={[-66.553,18.442]}
          style={sheet.matchParent}
          styleURL={MapboxGL.StyleURL.Light}>

          <MapboxGL.VectorSource
            id={layerId}
            url="mapbox://loveland.1h3mgkih"
            onPress={this.onPress}
          >
            <MapboxGL.LineLayer
              id="parcelSourceLine"
              key="parcelSourceLine"
              sourceLayerID={layerId}
              style={mapStyles.parcelLine}
              minZoomLevel={11}
            />
            <MapboxGL.FillLayer
              id="parcelSourceFill"
              key="parcelSourceFill"
              sourceLayerID={layerId}
              style={mapStyles.parcels}
              minZoomLevel={11}
            />
          </MapboxGL.VectorSource>

          {this.state.selectedGeoJSON ? (
            <MapboxGL.ShapeSource
              id="selectedNYC"
              shape={this.state.selectedGeoJSON}>
              <MapboxGL.FillLayer
                id="selectedNYCFill"
                style={styles.selectedNeighborhood}
              />
            </MapboxGL.ShapeSource>
          ) : null}
        </MapboxGL.MapView>

        <Bubble>
          <Text>Press on a feature to highlight it.</Text>
        </Bubble>
      </Page>
    );
  }
}

export default SourcePressHandler;