Able to customize container style

Author: Minishlink

docs/stories/index.js

@@ -1,31 +1,44 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import MapView from 'react-native-maps';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 storiesOf('MapView', module)
-  .add('basic', () => <MapView region={{ latitude: 48.86, longitude: 2.34 }} />)
+  .add('basic', () => (
+    <View style={styles.container}>
+      <MapView region={{ latitude: 48.86, longitude: 2.34 }} />
+    </View>
+  ))
   .add('onRegionChangeComplete', () => (
-    <View>
+    <View style={styles.container}>
       <MapView
         region={{ latitude: 48.86, longitude: 2.34 }}
         onRegionChangeComplete={action('onRegionChangeComplete toggled')}
       />
     </View>
   ))
   .add('onPress', () => (
-    <View>
+    <View style={styles.container}>
       <MapView region={{ latitude: 48.86, longitude: 2.34 }} onPress={action('onPress toggled')} />
     </View>
   ));
+
 storiesOf('Marker', module).add('basic', () => (
-  <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 }}
-    />
-  </MapView>
+  <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 }}
+      />
+    </MapView>
+  </View>
 ));
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100vh',
+  },
+});

src/index.js

@@ -23,14 +23,18 @@ class MapView extends Component {
   };
 
   render() {
-    if (!this.state.center)
+    const style = this.props.style || styles.container;
+
+    if (!this.state.center) {
       return (
-        <View style={styles.container}>
+        <View style={style}>
           <ActivityIndicator />
         </View>
       );
+    }
+
     return (
-      <View style={styles.container}>
+      <View style={style}>
         <GoogleMapContainer
           handleMapMounted={this.handleMapMounted}
           containerElement={<div style={{ height: '100%' }} />}
@@ -52,7 +56,7 @@ MapView.Polyline = Polyline;
 
 const styles = StyleSheet.create({
   container: {
-    height: '100vh',
+    height: '100%',
   },
 });