Use flex to automatically size optionContainer to its contents.

overlayStyle and cancelContainer adjusted accordingly to dynamically center content in a generic fashion.

Author: peacechen

style.js

@@ -8,35 +8,34 @@ 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 default StyleSheet.create({
 
     overlayStyle: {
         width: width,
         height: height,
+        padding:width*0.1,
+        justifyContent: 'center',
         backgroundColor: 'rgba(0,0,0,0.7)'
     },
 
     optionContainer: {
         borderRadius:BORDER_RADIUS,
-        width:width*0.8,
-        height:OPTION_CONTAINER_HEIGHT,
+        flexShrink: 1,
+        marginBottom: 8,
+        padding: PADDING,
         backgroundColor:'rgba(255,255,255,0.8)',
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2
     },
 
     cancelContainer: {
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2 + 10
+      alignSelf: 'center'
     },
 
     selectStyle: {
         flex: 1,
         borderColor: '#ccc',
         borderWidth: 1,
-        padding: 8,
+        padding: PADDING,
         borderRadius: BORDER_RADIUS
     },
 
@@ -81,4 +80,4 @@ export default StyleSheet.create({
         textAlign: 'center',
         fontSize: FONT_SIZE
     }
-});
+});