text: import React from 'react';
  import {Text} from 'react-native';
  import MapboxGL from '@react-native-mapbox-gl/maps';
  import {featureCollection, feature} from '@turf/helpers';
  
  import sheet from '../styles/sheet';
  import exampleIcon from '../assets/example.png';
  
  import BaseExamplePropTypes from './common/BaseExamplePropTypes';
  import Page from './common/Page';
  import Bubble from './common/Bubble';
  
  const styles = {
    icon: {
      iconImage: exampleIcon,
      iconAllowOverlap: true,
    },
  };
  
  class CustomIcon extends React.Component {
    static propTypes = {
      ...BaseExamplePropTypes,
    };
  
    constructor(props) {
      super(props);
  
      this.state = {
        featureCollection: featureCollection([]),
      };
  
      this.onPress = this.onPress.bind(this);
      this.onSourceLayerPress = this.onSourceLayerPress.bind(this);
    }
  
    async onPress(e) {
      const aFeature = feature(e.geometry);
      aFeature.id = `${Date.now()}`;
  
      this.setState({
        featureCollection: featureCollection([
          ...this.state.featureCollection.features,
          aFeature,
        ]),
      });
    }
  
    onSourceLayerPress({features, coordinates, point}) {
      console.log(
        'You pressed a layer here are your features:',
        features,
        coordinates,
        point,
      );
    }
  
    render() {
      return (
        <Page {...this.props}>
          <MapboxGL.MapView
            ref={c => (this._map = c)}
            onPress={this.onPress}
            style={sheet.matchParent}>
            <MapboxGL.Camera
              zoomLevel={9}
              centerCoordinate={[-73.970895, 40.723279]}
            />
  
            <MapboxGL.ShapeSource
              id="symbolLocationSource"
              hitbox={{width: 20, height: 20}}
              onPress={this.onSourceLayerPress}
              shape={this.state.featureCollection}>
              <MapboxGL.SymbolLayer
                id="symbolLocationSymbols"
                minZoomLevel={1}
                style={styles.icon}
              />
            </MapboxGL.ShapeSource>
          </MapboxGL.MapView>
  
          <Bubble>
            <Text>Tap to add an icon</Text>
          </Bubble>
        </Page>
      );
    }
  }
  
  export default CustomIcon;
  