add example modal animations

sbycrosz · Feb 13, 2016 · 1a386d1 · 1a386d1
1 parent f55f516
commit 1a386d1
Showing 1 changed file with 38 additions and 7 deletions.
diff --git 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>
         );
     }
 }