content: import React from 'react';
  import {
    StyleSheet,
    View,
    Text,
    Dimensions,
  } from 'react-native';
  
  import MapView from 'react-native-maps';
  
  const { width, height } = Dimensions.get('window');
  
  const ASPECT_RATIO = width / height;
  const LATITUDE = 37.78825;
  const LONGITUDE = -122.4324;
  const LATITUDE_DELTA = 0.0922;
  const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
  const SPACE = 0.01;
  
  class Overlays extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        region: {
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        },
        circle: {
          center: {
            latitude: LATITUDE + SPACE,
            longitude: LONGITUDE + SPACE,
          },
          radius: 700,
        },
        polygon: [
          {
            latitude: LATITUDE + SPACE,
            longitude: LONGITUDE + SPACE,
          },
          {
            latitude: LATITUDE - SPACE,
            longitude: LONGITUDE - SPACE,
          },
          {
            latitude: LATITUDE - SPACE,
            longitude: LONGITUDE + SPACE,
          },
        ],
        polyline: [
          {
            latitude: LATITUDE + SPACE,
            longitude: LONGITUDE - SPACE,
          },
          {
            latitude: LATITUDE - (2 * SPACE),
            longitude: LONGITUDE + (2 * SPACE),
          },
          {
            latitude: LATITUDE - SPACE,
            longitude: LONGITUDE - SPACE,
          },
          {
            latitude: LATITUDE - (2 * SPACE),
            longitude: LONGITUDE - SPACE,
          },
        ],
      };
    }
  
    render() {
      const { region, circle, polygon, polyline } = this.state;
      return (
        <View style={styles.container}>
          <MapView
            provider={this.props.provider}
            style={styles.map}
            initialRegion={region}
          >
            <MapView.Circle
              center={circle.center}
              radius={circle.radius}
              fillColor="rgba(255, 255, 255, 1)"
              strokeColor="rgba(0,0,0,0.5)"
              zIndex={2}
              strokeWidth={2}
            />
            <MapView.Polygon
              coordinates={polygon}
              fillColor="rgba(0, 200, 0, 0.5)"
              strokeColor="rgba(0,0,0,0.5)"
              strokeWidth={2}
            />
            <MapView.Polyline
              coordinates={polyline}
              strokeColor="rgba(0,0,200,0.5)"
              strokeWidth={3}
              lineDashPattern={[5, 2, 3, 2]}
            />
          </MapView>
          <View style={styles.buttonContainer}>
            <View style={styles.bubble}>
              <Text>Render circles, polygons, and polylines</Text>
            </View>
          </View>
        </View>
      );
    }
  }
  
  Overlays.propTypes = {
    provider: MapView.ProviderPropType,
  };
  
  const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
    bubble: {
      flex: 1,
      backgroundColor: 'rgba(255,255,255,0.7)',
      paddingHorizontal: 18,
      paddingVertical: 12,
      borderRadius: 20,
    },
    latlng: {
      width: 200,
      alignItems: 'stretch',
    },
    button: {
      width: 80,
      paddingHorizontal: 12,
      alignItems: 'center',
      marginHorizontal: 10,
    },
    buttonContainer: {
      flexDirection: 'row',
      marginVertical: 20,
      backgroundColor: 'transparent',
    },
  });
  
  module.exports = Overlays;
  