Close modal button (#1739)

* Add a button to the modal example to hide modal

* Render button only for iOS

example/src/screens/types/Modal.js

@@ -1,7 +1,34 @@
 import React, {Component} from 'react';
-import {StyleSheet, View, Text, Button} from 'react-native';
+import {StyleSheet, View, Text, Button, TouchableOpacity, Platform} from 'react-native';
+import {Navigation} from 'react-native-navigation';
+
+const CloseModalButton = ({text}) =>
+<TouchableOpacity
+  style={[styles.buttonContainer]}
+  onPress={() => navigator.dismissModal()}
+>
+  <View style={styles.closeModalButton}>
+    <Text style={styles.buttonText}>{text}</Text>
+  </View>
+</TouchableOpacity>;
+Navigation.registerComponent('CloseModalButton', () => CloseModalButton);
 
 class Modal extends Component {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        id: 'close-modal-button',
+        component: Platform.OS === 'ios' ? 'CloseModalButton' : null,
+        passProps: {
+          text: 'Close'
+        }
+      }
+    ]
+  };
+
+  componentWillMount() {
+    navigator = this.props.navigator;
+  }
 
   onPushScreen = () => {
     this.props.navigator.push({
@@ -58,6 +85,24 @@ const styles = StyleSheet.create({
   },
   button: {
     marginTop: 16
+  },
+  buttonContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  closeModalButton: {
+    backgroundColor: 'tomato',
+    width: 50,
+    height: 25,
+    borderRadius: 2,
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonText: {
+    color: 'white'
   }
 });