From a5d9ba91999a437c99b434295b77ee430fe3e5ee Mon Sep 17 00:00:00 2001
From: Sambya Aryasa <sbycrosz@gmail.com>
Date: Sun, 14 Feb 2016 04:48:40 +0800
Subject: [PATCH] Add examples for animating modals

---
 Example/Example.js                        |  2 +
 Example/components/Error.js               | 45 ++++++++++++++++----
 Example/components/Launch.js              |  1 +
 Example/components/ReactNativeModalBox.js | 51 +++++++++++++++++++++++
 Example/package.json                      |  1 +
 README.md                                 |  8 ++++
 6 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 Example/components/ReactNativeModalBox.js

diff --git a/Example/Example.js b/Example/Example.js
index 94d424ab8..5f918ce52 100644
--- a/Example/Example.js
+++ b/Example/Example.js
@@ -11,6 +11,7 @@ var {Route, Schema, Animations, Actions, TabBar} = RNRF;
 var Error = require('./components/Error');
 var Home = require('./components/Home');
 var TabView = require('./components/TabView');
+var ReactNativeModalBox = require('./components/ReactNativeModalBox');
 
 // Redux stuff is optional
 import { createStore } from 'redux'
@@ -80,6 +81,7 @@ export default class Example extends React.Component {
                     </Route>
                     <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
                     <Route name="error" type="modal" component={Error}/>
+                    <Route name="modalBox" type="modal" component={ReactNativeModalBox}/>
                     <Route name="tabbar">
                         <Router footer={TabBar} showNavigationBar={false}>
                             <Route name="tab1" schema="tab" title="Tab #1" >
diff --git a/Example/components/Error.js b/Example/components/Error.js
index 52b7bf701..66d29c1ae 100644
--- a/Example/components/Error.js
+++ b/Example/components/Error.js
@@ -1,20 +1,51 @@
 'use strict';
 
 var React = require('react-native');
-var {View, Text, StyleSheet} = React;
+var {View, Text, StyleSheet, Animated, Dimensions} = React;
 var Button = require('react-native-button');
 var Actions = require('react-native-router-flux').Actions;
 
+var {
+  height: deviceHeight
+} = Dimensions.get('window');
+
+
 class Error extends React.Component {
+    constructor(props){
+        super (props)
+
+        this.state = {
+            offset: new Animated.Value(-deviceHeight)
+        }
+    }
+
+    componentDidMount() {
+        Animated.timing(this.state.offset, {
+            duration: 150,
+            toValue: 0
+        }).start();
+    }
+
+    closeModal() {
+        Animated.timing(this.state.offset, {
+            duration: 150,
+            toValue: -deviceHeight
+        }).start(Actions.dismiss);
+    }
+
     render(){
         return (
-            <View style={[styles.container,{backgroundColor:'rgba(52,52,52,0.5)'}]}>
-            <View style={{width:250,height:250,justifyContent: 'center',
-        alignItems: 'center',backgroundColor:'white'}}>
-                <Text>{this.props.data}</Text>
-                <Button onPress={Actions.dismiss}>Close</Button>
-            </View>
+            <Animated.View style={[styles.container, {backgroundColor:'rgba(52,52,52,0.5)'}, 
+                                  {transform: [{translateY: this.state.offset}]}]}>
+                <View style={{  width:250,
+                                height:250,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                backgroundColor:'white' }}>
+                    <Text>{this.props.data}</Text>
+                    <Button onPress={this.closeModal.bind(this)}>Close</Button>
                 </View>
+            </Animated.View>
         );
     }
 }
diff --git a/Example/components/Launch.js b/Example/components/Launch.js
index 75530b4fb..bd2cc2e7f 100644
--- a/Example/components/Launch.js
+++ b/Example/components/Launch.js
@@ -14,6 +14,7 @@ class Launch extends React.Component {
                 <Button onPress={Actions.register}>Go to Register page</Button>
                 <Button onPress={Actions.register2}>Go to Register page without animation</Button>
                 <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
+                <Button onPress={Actions.modalBox}>PopUp with ReactNativeModalBox</Button>
                 <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
                 <Button onPress={()=>Actions.showActionSheet({callback:index=>alert("Selected:"+index)})}>Show ActionSheet</Button>
             </View>
diff --git a/Example/components/ReactNativeModalBox.js b/Example/components/ReactNativeModalBox.js
new file mode 100644
index 000000000..eecc30514
--- /dev/null
+++ b/Example/components/ReactNativeModalBox.js
@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react-native');
+var {View, Text, StyleSheet} = React;
+var Button = require('react-native-button');
+var Actions = require('react-native-router-flux').Actions;
+
+var Modal   = require('react-native-modalbox');
+
+// Example integration with react-native-modalbox (https://github.com/maxs15/react-native-modalbox)
+// For those people who don't want to animate their own modal
+class ReactNativeModalBox extends React.Component {
+    constructor(){
+        super();
+    }
+    componentWillMount(){
+        this.setState({isOpen: true});
+    }
+    render(){
+        return (
+            <Modal  animationDuration={200}
+                    swipeThreshold={100}
+                    style={styles.modal} 
+                    position={"center"} 
+                    isOpen={this.state.isOpen}
+                    onClosed={Actions.dismiss}>
+                <Text style={styles.text}>
+                    ReactNativeModalBox
+                </Text>
+                <Text>
+                    (swipe down to close)
+                </Text>
+            </Modal>
+        );
+    }
+}
+
+var styles = StyleSheet.create({
+    modal: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 300,
+        width: 300,
+    },
+    text: {
+        color: "black",
+        fontSize: 22
+    },
+});
+
+module.exports = ReactNativeModalBox;
diff --git a/Example/package.json b/Example/package.json
index 97e28dd05..f724f1d6a 100644
--- a/Example/package.json
+++ b/Example/package.json
@@ -9,6 +9,7 @@
     "react-native": "^0.19.0",
     "react-native-button": "^1.2.1",
     "react-native-router-flux": "^2.2.5",
+    "react-native-modalbox": "^1.3.0",
     "react-redux": "^4.4.0",
     "redux": "^3.3.1"
   }
diff --git a/README.md b/README.md
index 844d69ee1..e02c04791 100644
--- a/README.md
+++ b/README.md
@@ -137,6 +137,7 @@ export default class Example extends React.Component {
 ```
 
 components/Launch.js (initial screen)
+
 ```
 import React, {View, Text, StyleSheet, TouchableHighlight} from 'react-native'
 import Button from 'react-native-button'
@@ -168,6 +169,13 @@ var styles = StyleSheet.create({
 
 module.exports = Launch;
 ```
+
+## Modals
+To display a modal use ```type="modal"``` for your route components.
+Modal type inserts its 'component' after navigator component. See the ```Examples``` folder for more details.
+
+Note that **ReactNativeRouterFlux will not provide animations for modals** and you'll need to animate the modal yourself (or use a library)
+
 ## Sidebar/Drawer support
 You can easily configure react-native-router-flux to handle a sidebar/drawer for specific routes:  
 **1.** Create a sidebar/drawer component (you can use both [react-native-drawer](https://github.com/root-two/react-native-drawer) and [react-native-side-menu](https://github.com/react-native-fellowship/react-native-side-menu)) and pass its router props to its children: