Update demo

bokuweb · Jan 22, 2016 · 6599d9e · 6599d9e
1 parent f6d8184
commit 6599d9e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/index.android.js b/index.android.js
@@ -28,7 +28,7 @@ class Example extends Component {
     const modalStyles = {
       modal : {
         width: 240,
-        height: 180,
+        height: 160,
         backgroundColor: '#FFF'
       },
       overlay : {
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center', 
     alignItems: 'center',
-    paddingTop: 80
+    paddingTop: 70
   },
   button: {
     paddingTop: 20,

diff --git a/index.js b/index.js
@@ -37,28 +37,38 @@ export default class Modal extends Component {
 
   render() {
     if (!this.state.isOpen) return null;
-    const style = {
-      position: 'absolute',
-      top: (deviceHeight - this.props.styles.modal.height) / 2,
-      left: (deviceWidth - this.props.styles.modal.width) / 2
-    };
+    const styles = StyleSheet.create({
+      overlay: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: deviceWidth,
+        height: deviceHeight
+      },
+      modal: {
+        position: 'absolute',
+        top: (deviceHeight - this.props.styles.modal.height) / 2,
+        left: (deviceWidth - this.props.styles.modal.width) / 2
+      }
+    });
+
     return (
-      <Animated.View style={[styles.overlay, styles.flexCenter, this.props.styles.overlay, {transform: [{translateY: this.state.offset}]}]}>
-        <View style={[this.props.styles.modal, style]}>
+      <Animated.View style={[
+                       styles.overlay,
+                       styles.flexCenter,
+                       this.props.styles.overlay,
+                       {transform: [{translateY: this.state.offset}]}
+                     ]}>
+        <View style={[
+                this.props.styles.modal,
+                styles.modal
+              ]}>
           {this.props.children}
         </View>
       </Animated.View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  overlay: {
-    backgroundColor: 'rgba(0,0,0,0.8)',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: deviceWidth,
-    height: deviceHeight
-  }
-});
+