From 49202ee39b45b26fe7a3f4529ec57015a10abbf2 Mon Sep 17 00:00:00 2001
From: Thomas Parslow <tom@almostobsolete.net>
Date: Thu, 18 May 2017 13:52:35 +0100
Subject: [PATCH] Support landscape mode

---
 index.js |  9 ++++++---
 style.js | 19 ++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/index.js b/index.js
index d65bf4c0..30d52f3d 100644
--- a/index.js
+++ b/index.js
@@ -15,7 +15,7 @@ import {
     Platform
 } from 'react-native';
 
-import styles from './style';
+import styles, {OPTION_CONTAINER_HEIGHT} from './style';
 import BaseComponent from './BaseComponent';
 
 let componentIndex = 0;
@@ -128,16 +128,19 @@ export default class ModalPicker extends BaseComponent {
             }
         });
 
+        const {height} = Dimensions.get('window');
+        const containerTop = (height-OPTION_CONTAINER_HEIGHT)/2;
+
         return (
             <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
-                <View style={styles.optionContainer}>
+                <View style={[styles.optionContainer, {top: containerTop}]}>
                     <ScrollView keyboardShouldPersistTaps>
                         <View style={{paddingHorizontal:10}}>
                             {options}
                         </View>
                     </ScrollView>
                 </View>
-                <View style={styles.cancelContainer}>
+                <View style={[styles.cancelContainer, {top: containerTop+10}]}>
                     <TouchableOpacity onPress={this.close}>
                         <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                             <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
diff --git a/style.js b/style.js
index 3a6f5eca..f5998730 100644
--- a/style.js
+++ b/style.js
@@ -2,34 +2,31 @@
 
 import { StyleSheet, Dimensions } from 'react-native';
 
-const {height, width} = Dimensions.get('window');
 
 const PADDING = 8;
 const BORDER_RADIUS = 5;
 const FONT_SIZE = 16;
 const HIGHLIGHT_COLOR = 'rgba(0,118,255,0.9)';
-const OPTION_CONTAINER_HEIGHT = 400;
+export const OPTION_CONTAINER_HEIGHT = 400;
 
 export default StyleSheet.create({
 
     overlayStyle: {
-        width: width,
-        height: height,
+        width: '100%',
+        height: '100%',
         backgroundColor: 'rgba(0,0,0,0.7)'
     },
 
     optionContainer: {
         borderRadius:BORDER_RADIUS,
-        width:width*0.8,
+        width:'80%',
         height:OPTION_CONTAINER_HEIGHT,
         backgroundColor:'rgba(255,255,255,0.8)',
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2
+        left:'10%',
     },
 
     cancelContainer: {
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2 + 10
+        left: '10%',
     },
 
     selectStyle: {
@@ -48,7 +45,7 @@ export default StyleSheet.create({
 
     cancelStyle: {
         borderRadius: BORDER_RADIUS,
-        width: width * 0.8,
+        width: '80%',
         backgroundColor: 'rgba(255,255,255,0.8)',
         padding: PADDING
     },
@@ -81,4 +78,4 @@ export default StyleSheet.create({
         textAlign: 'center',
         fontSize: FONT_SIZE
     }
-});
\ No newline at end of file
+});