Add circle support

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log
 
 dist
 /.vscode
+.history

src/Circle.js

@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import { Circle } from "react-google-maps";
+
+class MapViewCircle extends Component {
+	render() {
+		return (
+			<Circle
+				center={{ lat: this.props.center ? this.props.center.latitude : 0, lng: this.props.center ? this.props.center.longitude : 0 }}
+				radius={this.props.radius}
+				visible={true}
+				options={{
+					fillColor: this.props.fillColor,
+					strokeColor: this.props.strokeColor,
+				}}
+			/>
+		);
+	}
+}
+
+export default MapViewCircle;

src/index.js

@@ -1,112 +1,113 @@
-import React, { Component } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { withGoogleMap, GoogleMap } from 'react-google-maps';
-import Marker from './Marker';
-import Polyline from './Polyline';
-import Callout from './Callout';
+import React, { Component } from "react";
+import { View, StyleSheet } from "react-native";
+import { withGoogleMap, GoogleMap } from "react-google-maps";
+import Marker from "./Marker";
+import Polyline from "./Polyline";
+import Callout from "./Callout";
+import Circle from "./Circle";
 
-const GoogleMapContainer = withGoogleMap(props => (
-  <GoogleMap {...props} ref={props.handleMapMounted} />
-));
+const GoogleMapContainer = withGoogleMap((props) => <GoogleMap {...props} ref={props.handleMapMounted} />);
 
 class MapView extends Component {
-  state = {
-    center: null,
-  };
+	state = {
+		center: null,
+	};
 
-  handleMapMounted = map => {
-    this.map = map;
-    this.props.onMapReady && this.props.onMapReady();
-  };
+	handleMapMounted = (map) => {
+		this.map = map;
+		this.props.onMapReady && this.props.onMapReady();
+	};
 
-  getCamera = () => {
-    return {
-      zoom: this.map.getZoom(),
-      center: this.map.getCenter(),
-      heading: this.map.getHeading(),
-    };
-  };
+	getCamera = () => {
+		return {
+			zoom: this.map.getZoom(),
+			center: this.map.getCenter(),
+			heading: this.map.getHeading(),
+		};
+	};
 
-  animateCamera(camera) {
-    this.setState({ zoom: camera.zoom });
-    this.setState({ center: camera.center });
-  }
+	animateCamera(camera) {
+		this.setState({ zoom: camera.zoom });
+		this.setState({ center: camera.center });
+	}
 
-  animateToRegion(coordinates) {
-    this.setState({
-      center: { lat: coordinates.latitude, lng: coordinates.longitude },
-    });
-  }
+	animateToRegion(coordinates) {
+		this.setState({
+			center: { lat: coordinates.latitude, lng: coordinates.longitude },
+		});
+	}
 
-  onDragEnd = () => {
-    const { onRegionChangeComplete } = this.props;
-    if (this.map && onRegionChangeComplete) {
-      const center = this.map.getCenter();
-      onRegionChangeComplete({
-        latitude: center.lat(),
-        longitude: center.lng(),
-      });
-    }
-  };
+	onDragEnd = () => {
+		const { onRegionChangeComplete } = this.props;
+		if (this.map && onRegionChangeComplete) {
+			const center = this.map.getCenter();
+			onRegionChangeComplete({
+				latitude: center.lat(),
+				longitude: center.lng(),
+			});
+		}
+	};
 
-  render() {
-    const { region, initialRegion, onRegionChange, onPress, options, defaultZoom } = this.props;
-    const { center } = this.state;
-    const style = this.props.style || styles.container;
+	render() {
+		const { region, initialRegion, onRegionChange, onPress, options, defaultZoom } = this.props;
+		const { center } = this.state;
+		const style = this.props.style || styles.container;
 
-    const googleMapProps = center
-      ? { center }
-      : region
-      ? {
-          center: {
-            lat: region.latitude,
-            lng: region.longitude,
-          },
-        }
-      : {
-          defaultCenter: {
-            lat: initialRegion.latitude,
-            lng: initialRegion.longitude,
-          },
-        };
-    const zoom =
-      defaultZoom ||
-      (region && region.latitudeDelta
-        ? Math.round(Math.log(360 / region.latitudeDelta) / Math.LN2)
-        : initialRegion && initialRegion.latitudeDelta
-        ? Math.round(Math.log(360 / initialRegion.latitudeDelta) / Math.LN2)
-        : 15);
-    googleMapProps['zoom'] = this.state.zoom ? this.state.zoom : zoom;
-    return (
-      <View style={style}>
-        <GoogleMapContainer
-          handleMapMounted={this.handleMapMounted}
-          containerElement={<div style={{ height: '100%' }} />}
-          mapElement={<div style={{ height: '100%' }} />}
-          onZoomChanged={() => {
-            this.setState({ zoom: this.map.getZoom() });
-          }}
-          {...googleMapProps}
-          onDragStart={onRegionChange}
-          onIdle={this.onDragEnd}
-          defaultZoom={zoom}
-          onClick={onPress}
-          options={options}>
-          {this.props.children}
-        </GoogleMapContainer>
-      </View>
-    );
-  }
+		const googleMapProps = center
+			? { center }
+			: region
+			? {
+					center: {
+						lat: region.latitude,
+						lng: region.longitude,
+					},
+			  }
+			: {
+					defaultCenter: {
+						lat: initialRegion.latitude,
+						lng: initialRegion.longitude,
+					},
+			  };
+		const zoom =
+			defaultZoom ||
+			(region && region.latitudeDelta
+				? Math.round(Math.log(360 / region.latitudeDelta) / Math.LN2)
+				: initialRegion && initialRegion.latitudeDelta
+				? Math.round(Math.log(360 / initialRegion.latitudeDelta) / Math.LN2)
+				: 15);
+		googleMapProps["zoom"] = this.state.zoom ? this.state.zoom : zoom;
+		return (
+			<View style={style}>
+				<GoogleMapContainer
+					handleMapMounted={this.handleMapMounted}
+					containerElement={<div style={{ height: "100%" }} />}
+					mapElement={<div style={{ height: "100%" }} />}
+					onZoomChanged={() => {
+						this.setState({ zoom: this.map.getZoom() });
+					}}
+					{...googleMapProps}
+					onDragStart={onRegionChange}
+					onIdle={this.onDragEnd}
+					defaultZoom={zoom}
+					onClick={onPress}
+					options={options}
+				>
+					{this.props.children}
+				</GoogleMapContainer>
+			</View>
+		);
+	}
 }
 
 MapView.Marker = Marker;
 MapView.Polyline = Polyline;
 MapView.Callout = Callout;
+MapView.Circle = Circle;
 
 const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-  },
+	container: {
+		height: "100%",
+	},
 });
 
 export default MapView;