Merge pull request #218 from sbycrosz/master

Add examples for animating modals

Author: Pavlo Aksonov

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" >

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>
         );
     }
 }

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>

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;

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"
   }

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: