Update examples and documentation to use new es6 exports

brandingbrand · Jan 21, 2018 · 100c50a · 100c50a
1 parent dc6bbb7
commit 100c50a
Show file tree

Hide file tree

Showing 38 changed files with 189 additions and 165 deletions.
diff --git a/README.md b/README.md
@@ -26,17 +26,17 @@ versions you should add `react` as a dependency in your `package.json`.
 
 [`<MapView />` Component API](docs/mapview.md)
 
-[`<MapView.Marker />` Component API](docs/marker.md)
+[`<Marker />` Component API](docs/marker.md)
 
-[`<MapView.Callout />` Component API](docs/callout.md)
+[`<Callout />` Component API](docs/callout.md)
 
-[`<MapView.Polygon />` Component API](docs/polygon.md)
+[`<Polygon />` Component API](docs/polygon.md)
 
-[`<MapView.Polyline />` Component API](docs/polyline.md)
+[`<Polyline />` Component API](docs/polyline.md)
 
-[`<MapView.Circle />` Component API](docs/circle.md)
+[`<Circle />` Component API](docs/circle.md)
 
-[`<MapView.Overlay />` Component API](docs/overlay.md)
+[`<Overlay />` Component API](docs/overlay.md)
 
 ## General Usage
 
@@ -98,12 +98,14 @@ render() {
 ### Rendering a list of markers on a map
 
 ```jsx
+import { Marker } from 'react-native-maps';
+
 <MapView
   region={this.state.region}
   onRegionChange={this.onRegionChange}
 >
   {this.state.markers.map(marker => (
-    <MapView.Marker
+    <Marker
       coordinate={marker.latlng}
       title={marker.title}
       description={marker.description}
@@ -115,15 +117,15 @@ render() {
 ### Rendering a Marker with a custom view
 
 ```jsx
-<MapView.Marker coordinate={marker.latlng}>
+<Marker coordinate={marker.latlng}>
   <MyCustomMarkerView {...marker} />
-</MapView.Marker>
+</Marker>
 ```
 
 ### Rendering a Marker with a custom image
 
 ```jsx
-<MapView.Marker
+<Marker
   coordinate={marker.latlng}
   image={require('../assets/pin.png')}
 />
@@ -132,19 +134,21 @@ render() {
 ### Rendering a custom Marker with a custom Callout
 
 ```jsx
-<MapView.Marker coordinate={marker.latlng}>
+import { Callout } from 'react-native-maps';
+
+<Marker coordinate={marker.latlng}>
   <MyCustomMarkerView {...marker} />
-  <MapView.Callout>
+  <Callout>
     <MyCustomCalloutView {...marker} />
-  </MapView.Callout>
-</MapView.Marker>
+  </Callout>
+</Marker>
 ```
 
 ### Draggable Markers
 
 ```jsx
 <MapView initialRegion={...}>
-  <MapView.Marker draggable
+  <Marker draggable
     coordinate={this.state.x}
     onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
   />
@@ -156,11 +160,13 @@ render() {
 #### Tile Overlay using tile server
 
 ```jsx
+import { UrlTile } from 'react-native-maps';
+
 <MapView
   region={this.state.region}
   onRegionChange={this.onRegionChange}
 >
-  <MapView.UrlTile
+  <UrlTile
    /**
    * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
    * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
@@ -181,11 +187,13 @@ For IOS: configure [App Transport Security](https://developer.apple.com/library/
 Tiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage.
 
 ```jsx
+import { LocalTile } from 'react-native-maps';
+
 <MapView
   region={this.state.region}
   onRegionChange={this.onRegionChange}
 >
-  <MapView.LocalTile
+  <LocalTile
    /**
     * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
     * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
@@ -386,14 +394,14 @@ Enable lite mode on Android with `liteMode` prop. Ideal when having multiple map
 
 ### Animated Region
 
-The MapView can accept an `MapView.AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.
+The MapView can accept an `AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.
 
 ```jsx
-import MapView from 'react-native-maps';
+import MapView, { AnimatedRegion, Animated } from 'react-native-maps';
 
 getInitialState() {
   return {
-    region: new MapView.AnimatedRegion({
+    region: new AnimatedRegion({
       latitude: LATITUDE,
       longitude: LONGITUDE,
       latitudeDelta: LATITUDE_DELTA,
@@ -408,7 +416,7 @@ onRegionChange(region) {
 
 render() {
   return (
-    <MapView.Animated
+    <Animated
       region={this.state.region}
       onRegionChange={this.onRegionChange}
     />
@@ -421,9 +429,11 @@ render() {
 Markers can also accept an `AnimatedRegion` value as a coordinate.
 
 ```jsx
+import Mapview, { AnimatedRegion, Marker } from 'react-native-maps';
+
 getInitialState() {
   return {
-    coordinate: new MapView.AnimatedRegion({
+    coordinate: new AnimatedRegion({
       latitude: LATITUDE,
       longitude: LONGITUDE,
     }),
@@ -442,7 +452,7 @@ componentWillReceiveProps(nextProps) {
 render() {
   return (
     <MapView initialRegion={...}>
-      <MapView.Marker.Animated coordinate={this.state.coordinate} />
+      <Marker.Animated coordinate={this.state.coordinate} />
     </MapView>
   );
 }
@@ -451,6 +461,8 @@ render() {
 ### Take Snapshot of map
 
 ```jsx
+import MapView, { Marker } from 'react-native-maps';
+
 getInitialState() {
   return {
     coordinate: {
@@ -480,7 +492,7 @@ render() {
   return (
     <View>
       <MapView initialRegion={...} ref={map => { this.map = map }}>
-        <MapView.Marker coordinate={this.state.coordinate} />
+        <Marker coordinate={this.state.coordinate} />
       </MapView>
       <Image source={{ uri: this.state.mapSnapshot.uri }} />
       <TouchableOpacity onPress={this.takeSnapshot}>

diff --git a/docs/callout.md b/docs/callout.md
@@ -1,4 +1,4 @@
-# `<MapView.Callout />` Component API
+# `<Callout />` Component API
 
 ## Props
 

diff --git a/docs/circle.md b/docs/circle.md
@@ -1,4 +1,4 @@
-# `<MapView.Circle />` Component API
+# `<Circle />` Component API
 
 ## Props
 

diff --git a/docs/marker.md b/docs/marker.md
@@ -1,11 +1,11 @@
-# `<MapView.Marker />` Component API
+# `<Marker />` Component API
 
 ## Props
 
 | Prop | Type | Default | Note |
 |---|---|---|---|
-| `title` | `String` |  | The title of the marker. This is only used if the <Marker /> component has no children that are an `<MapView.Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
-| `description` | `String` |  | The description of the marker. This is only used if the <Marker /> component has no children that are an `<MapView.Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
+| `title` | `String` |  | The title of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
+| `description` | `String` |  | The description of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
 | `image` | `ImageSource` |  | A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
 | `pinColor` | `Color` |  | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used.
 | `coordinate` | `LatLng` |  | The coordinate for the marker.

diff --git a/docs/overlay.md b/docs/overlay.md
@@ -1,4 +1,4 @@
-# `<MapView.Overlay />` Component API
+# `<Overlay />` Component API
 
 ## Props
 

diff --git a/docs/polygon.md b/docs/polygon.md
@@ -1,4 +1,4 @@
-# `<MapView.Polygon />` Component API
+# `<Polygon />` Component API
 
 ## Props
 

diff --git a/docs/polyline.md b/docs/polyline.md
@@ -1,4 +1,4 @@
-# `<MapView.Polyline />` Component API
+# `<Polyline />` Component API
 
 ## Props
 
@@ -37,8 +37,10 @@ Gradient polylines can be created by using the `strokeColors` prop. `strokeColor
 Example:
 
 ```js
+import MapView, { Polyline } from 'react-native-maps';
+
 <MapView>
-	<MapView.Polyline
+	<Polyline
 		coordinates={[
 			{ latitude: 37.8025259, longitude: -122.4351431 },
 			{ latitude: 37.7896386, longitude: -122.421646 },

diff --git a/example/examples/AnimatedMarkers.js b/example/examples/AnimatedMarkers.js
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import MapView from 'react-native-maps';
+import MapView, { ProviderPropType, Marker, AnimatedRegion } from 'react-native-maps';
 
 const screen = Dimensions.get('window');
 
@@ -22,7 +22,7 @@ class AnimatedMarkers extends React.Component {
     super(props);
 
     this.state = {
-      coordinate: new MapView.AnimatedRegion({
+      coordinate: new AnimatedRegion({
         latitude: LATITUDE,
         longitude: LONGITUDE,
       }),
@@ -50,7 +50,7 @@ class AnimatedMarkers extends React.Component {
             longitudeDelta: LONGITUDE_DELTA,
           }}
         >
-          <MapView.Marker.Animated
+          <Marker.Animated
             coordinate={this.state.coordinate}
           />
         </MapView>
@@ -68,7 +68,7 @@ class AnimatedMarkers extends React.Component {
 }
 
 AnimatedMarkers.propTypes = {
-  provider: MapView.ProviderPropType,
+  provider: ProviderPropType,
 };
 
 const styles = StyleSheet.create({

diff --git a/example/examples/AnimatedViews.js b/example/examples/AnimatedViews.js
@@ -6,7 +6,12 @@ import {
   Animated,
 } from 'react-native';
 
-import MapView from 'react-native-maps';
+import {
+  ProviderPropType,
+  Animated as AnimatedMap,
+  AnimatedRegion,
+  Marker,
+} from 'react-native-maps';
 import PanController from './PanController';
 import PriceMarker from './AnimatedPriceMarker';
 
@@ -191,7 +196,7 @@ class AnimatedViews extends React.Component {
       scale,
       translateY,
       markers,
-      region: new MapView.AnimatedRegion({
+      region: new AnimatedRegion({
         latitude: LATITUDE,
         longitude: LONGITUDE,
         latitudeDelta: LATITUDE_DELTA,
@@ -324,7 +329,7 @@ class AnimatedViews extends React.Component {
           onStartShouldSetPanResponder={this.onStartShouldSetPanResponder}
           onMoveShouldSetPanResponder={this.onMoveShouldSetPanResponder}
         >
-          <MapView.Animated
+          <AnimatedMap
             provider={this.props.provider}
             style={styles.map}
             region={region}
@@ -338,7 +343,7 @@ class AnimatedViews extends React.Component {
               } = animations[i];
 
               return (
-                <MapView.Marker
+                <Marker
                   key={marker.id}
                   coordinate={marker.coordinate}
                 >
@@ -352,10 +357,10 @@ class AnimatedViews extends React.Component {
                     amount={marker.amount}
                     selected={selected}
                   />
-                </MapView.Marker>
+                </Marker>
               );
             })}
-          </MapView.Animated>
+          </AnimatedMap>
           <View style={styles.itemContainer}>
             {markers.map((marker, i) => {
               const {
@@ -387,7 +392,7 @@ class AnimatedViews extends React.Component {
 }
 
 AnimatedViews.propTypes = {
-  provider: MapView.ProviderPropType,
+  provider: ProviderPropType,
 };
 
 const styles = StyleSheet.create({

diff --git a/example/examples/BugMarkerWontUpdate.js b/example/examples/BugMarkerWontUpdate.js
@@ -6,7 +6,7 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
-import MapView from 'react-native-maps';
+import MapView, { ProviderPropType } from 'react-native-maps';
 import MyLocationMapMarker from './MyLocationMapMarker';
 
 const { width, height } = Dimensions.get('window');
@@ -93,7 +93,7 @@ class BugMarkerWontUpdate extends React.Component {
 }
 
 BugMarkerWontUpdate.propTypes = {
-  provider: MapView.ProviderPropType,
+  provider: ProviderPropType,
 };
 
 const styles = StyleSheet.create({

diff --git a/example/examples/CachedMap.js b/example/examples/CachedMap.js
@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import MapView from 'react-native-maps';
+import MapView, { ProviderPropType, Marker } from 'react-native-maps';
 import flagImg from './assets/flag-blue.png';
 
 const HORIZONTAL_PADDING = 12;
@@ -69,7 +69,7 @@ class CachedMap extends React.Component {
                 loadingIndicatorColor="#666666"
                 loadingBackgroundColor="#eeeeee"
               >
-                <MapView.Marker
+                <Marker
                   coordinate={region}
                   centerOffset={{ x: -18, y: -60 }}
                   anchor={{ x: 0.69, y: 1 }}
@@ -86,7 +86,7 @@ class CachedMap extends React.Component {
 }
 
 CachedMap.propTypes = {
-  provider: MapView.ProviderPropType,
+  provider: ProviderPropType,
 };
 
 const styles = StyleSheet.create({