add Callout component

Author: kasajei

docs/stories/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 import MapView from 'react-native-maps';
 
 import { storiesOf } from '@storybook/react';
@@ -40,18 +40,39 @@ storiesOf('MapView', module)
     </View>
   ));
 
-storiesOf('Marker', module).add('basic', () => (
-  <View style={styles.container}>
-    <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
-      <MapView.Marker
-        title='BAM'
-        description='Shape the future of mobile with us'
-        coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
-        onPress={action('onPresss')}
-      />
-    </MapView>
-  </View>
-));
+storiesOf('Marker', module)
+  .add('basic', () => (
+    <View style={styles.container}>
+      <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
+        <MapView.Marker
+          title="BAM"
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
+          onPress={action('onPresss')}
+        />
+      </MapView>
+    </View>
+  ))
+  .add('Callout', () => (
+    <View style={styles.container}>
+      <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
+        <MapView.Marker
+          title="BAM"
+          ref={marker => (this.marker = marker)}
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
+          onPress={() => {
+            this.marker.showCallout();
+          }}>
+          <MapView.Callout onPress={action('onPress callout')}>
+            <View style={{ padding: 10 }}>
+              <Text>Paris</Text>
+            </View>
+          </MapView.Callout>
+        </MapView.Marker>
+      </MapView>
+    </View>
+  ));
 
 const styles = StyleSheet.create({
   container: {

src/Callout.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { InfoWindow } from 'react-google-maps';
+
+class MapViewCallout extends Component {
+  render() {
+    const { onPress, ...rest } = this.props;
+    return (
+      <TouchableOpacity onPress={onPress}>
+        <InfoWindow onCloseClick={this.props.hideCallout} {...rest}>
+          {this.props.children}
+        </InfoWindow>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default MapViewCallout;

src/Marker.js

@@ -2,15 +2,29 @@ import React, { Component } from 'react';
 import { Marker } from 'react-google-maps';
 
 class MapViewMarker extends Component {
+  state = {
+    isOpen: false,
+  };
+  showCallout() {
+    this.setState({ isOpen: true });
+  }
+  hideCallout() {
+    this.setState({ isOpen: false });
+  }
   render() {
     const { description, title, coordinate, onPress, ...rest } = this.props;
+
+    const childrenWithProps = React.Children.map(this.props.children, child => {
+      return React.cloneElement(child, { hideCallout: this.hideCallout.bind(this) });
+    });
     return (
       <Marker
         {...rest}
         title={description ? `${title}\n${description}` : title}
         position={{ lat: coordinate.latitude, lng: coordinate.longitude }}
-        onClick={onPress}
-      />
+        onClick={onPress}>
+        {this.state.isOpen && childrenWithProps}
+      </Marker>
     );
   }
 }

src/index.js

@@ -3,6 +3,7 @@ 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';
 
 const GoogleMapContainer = withGoogleMap(props => (
   <GoogleMap {...props} ref={props.handleMapMounted} />
@@ -75,6 +76,7 @@ class MapView extends Component {
 
 MapView.Marker = Marker;
 MapView.Polyline = Polyline;
+MapView.Callout = Callout;
 
 const styles = StyleSheet.create({
   container: {