add a couple of lifecycle hooks

README.md

@@ -86,6 +86,8 @@ class SampleApp extends Component {
 * `data - []` required, array of objects with a unique key and label
 * `style - object` optional, style definitions for the root element
 * `onChange - function` optional, callback function, when the users has selected an option
+* `beforeOpen - function` optional, will be called before the modal is opened
+* `beforeClose - function` optional, will be called before the modal is closed
 * `initValue - string` optional, text that is initially shown on the button
 * `cancelText - string` optional, text of the cancel button
 * `selectStyle - object` optional, style definitions for the select element (available in default mode only!)

index.js

@@ -23,6 +23,8 @@ let componentIndex = 0;
 const propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
+    beforeOpen: PropTypes.func,
+    beforeClose: PropTypes.func,
     initValue: PropTypes.string,
     style: View.propTypes.style,
     selectStyle: View.propTypes.style,
@@ -33,12 +35,16 @@ const propTypes = {
     cancelStyle: View.propTypes.style,
     cancelTextStyle: Text.propTypes.style,
     overlayStyle: View.propTypes.style,
+    optionContainerStyle: View.propTypes.style,
+    cancelContainerStyle: View.propTypes.style,
     cancelText: PropTypes.string
 };
 
 const defaultProps = {
     data: [],
     onChange: ()=> {},
+    beforeOpen: () => {},
+    beforeClose: () => {},
     initValue: 'Select me!',
     style: {},
     selectStyle: {},
@@ -91,12 +97,14 @@ export default class ModalPicker extends BaseComponent {
     }
 
     close() {
+      this.props.beforeClose();
       this.setState({
         modalVisible: false
       });
     }
 
     open() {
+      this.props.beforeOpen();
       this.setState({
         modalVisible: true
       });
@@ -130,14 +138,14 @@ 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.optionContainerStyle]}>
+                    <ScrollView keyboardShouldPersistTaps='always'>
                         <View style={{paddingHorizontal:10}}>
                             {options}
                         </View>
                     </ScrollView>
                 </View>
-                <View style={styles.cancelContainer}>
+                <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
                     <TouchableOpacity onPress={this.close}>
                         <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                             <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
@@ -171,7 +179,7 @@ export default class ModalPicker extends BaseComponent {
         return (
             <View style={this.props.style}>
                 {dp}
-                <TouchableOpacity onPress={this.open}>
+                <TouchableOpacity onPress={this.open} >
                     {this.renderChildren()}
                 </TouchableOpacity>
             </View>

style.js

@@ -5,6 +5,7 @@ import { StyleSheet, Dimensions } from 'react-native';
 const {height, width} = Dimensions.get('window');
 
 const PADDING = 8;
+const MARGIN = 8;
 const BORDER_RADIUS = 5;
 const FONT_SIZE = 16;
 const HIGHLIGHT_COLOR = 'rgba(0,118,255,0.9)';
@@ -15,21 +16,21 @@ export default StyleSheet.create({
     overlayStyle: {
         width: width,
         height: height,
-        backgroundColor: 'rgba(0,0,0,0.7)'
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        justifyContent: 'flex-end'
     },
 
     optionContainer: {
         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
+        left:width*0.1
     },
 
     cancelContainer: {
         left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2 + 10
+        marginVertical: MARGIN
     },
 
     selectStyle: {
@@ -81,4 +82,4 @@ export default StyleSheet.create({
         textAlign: 'center',
         fontSize: FONT_SIZE
     }
-});
+});