From 1a386d16b273e42f838e805fbee0e3a63cc9158f 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 example modal animations

---
 Example/components/Error.js | 45 +++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 7 deletions(-)

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