fixed PropTypes import and pass modal's animationType as prop

index.js

@@ -1,8 +1,7 @@
 'use strict';
 
-import React,{
-    PropTypes
-} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
     View,
@@ -33,7 +32,8 @@ const propTypes = {
     cancelStyle: View.propTypes.style,
     cancelTextStyle: Text.propTypes.style,
     overlayStyle: View.propTypes.style,
-    cancelText: PropTypes.string
+    cancelText: PropTypes.string,
+    animationType: PropTypes.string
 };
 
 const defaultProps = {
@@ -49,14 +49,15 @@ const defaultProps = {
     cancelStyle: {},
     cancelTextStyle: {},
     overlayStyle: {},
-    cancelText: 'cancel'
+    cancelText: 'cancel',
+    animationType: 'slide'
 };
 
 export default class ModalPicker extends BaseComponent {
 
-    constructor() {
+    constructor(props) {
 
-        super();
+        super(props);
 
         this._bind(
             'onChange',
@@ -66,8 +67,7 @@ export default class ModalPicker extends BaseComponent {
         );
 
         this.state = {
-            animationType: 'slide',
-            modalVisible: false,
+            modalVisible: props.opened || false,
             transparent: false,
             selected: 'please select'
         };
@@ -112,14 +112,16 @@ export default class ModalPicker extends BaseComponent {
 
     renderOption(option) {
         return (
-            <TouchableOpacity key={option.key} onPress={()=>this.onChange(option)}>
+            <TouchableOpacity key={option.key} onPress={()=>{this.props.onClose && this.props.onClose(); this.onChange(option);}}>
                 <View style={[styles.optionStyle, this.props.optionStyle]}>
                     <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
                 </View>
             </TouchableOpacity>)
     }
 
     renderOptionList() {
+        let {onClose} = this.props;
+
         var options = this.props.data.map((item) => {
             if (item.section) {
                 return this.renderSection(item);
@@ -130,15 +132,15 @@ export default class ModalPicker extends BaseComponent {
 
         return (
             <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
-                <View style={styles.optionContainer}>
-                    <ScrollView keyboardShouldPersistTaps>
+                <View style={[styles.optionContainer, this.props.optionContainer]}>
+                    <ScrollView keyboardShouldPersistTaps="always">
                         <View style={{paddingHorizontal:10}}>
                             {options}
                         </View>
                     </ScrollView>
                 </View>
                 <View style={styles.cancelContainer}>
-                    <TouchableOpacity onPress={this.close}>
+                    <TouchableOpacity onPress={() => {onClose && onClose(); this.close()}}>
                         <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                             <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
                         </View>
@@ -162,8 +164,10 @@ export default class ModalPicker extends BaseComponent {
 
     render() {
 
+        let {opened, onClose} = this.props;
+
         const dp = (
-          <Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={this.close} animationType={this.state.animationType}>
+          <Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={() => {onClose && onClose(); this.close();}} animationType={this.props.animationType}>
           {this.renderOptionList()}
           </Modal>
         );

style.js

@@ -15,21 +15,23 @@ export default StyleSheet.create({
     overlayStyle: {
         width: width,
         height: height,
-        backgroundColor: 'rgba(0,0,0,0.7)'
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingLeft: width*0.1,
+        paddingRight: width*0.1,
     },
 
     optionContainer: {
+        width: '100%',
         borderRadius:BORDER_RADIUS,
-        width:width*0.8,
-        height:OPTION_CONTAINER_HEIGHT,
+        maxHeight: OPTION_CONTAINER_HEIGHT,
         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
+        marginTop:10,
+        width: '100%',
     },
 
     selectStyle: {
@@ -47,8 +49,8 @@ export default StyleSheet.create({
     },
 
     cancelStyle: {
+        width: '100%',
         borderRadius: BORDER_RADIUS,
-        width: width * 0.8,
         backgroundColor: 'rgba(255,255,255,0.8)',
         padding: PADDING
     },
@@ -81,4 +83,4 @@ export default StyleSheet.create({
         textAlign: 'center',
         fontSize: FONT_SIZE
     }
-});
+});