From f5abea4f0db9e43f53b2375e4003c0787cc1c98c Mon Sep 17 00:00:00 2001
From: berezynskyi <makc.bereza@gmail.com>
Date: Fri, 3 Nov 2017 11:25:46 +0200
Subject: [PATCH 1/4] fixed prop types dependency

---
 index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index d65bf4c0..a383fb6a 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,7 @@
 'use strict';
 
-import React,{
-    PropTypes
-} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
     View,

From 15d71f26529eaaa55691ad3e4ec4088d33f2726c Mon Sep 17 00:00:00 2001
From: berezynskyi <makc.bereza@gmail.com>
Date: Fri, 3 Nov 2017 15:04:45 +0200
Subject: [PATCH 2/4] fix with keyboardShouldPersistTaps

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index a383fb6a..ac804540 100644
--- a/index.js
+++ b/index.js
@@ -130,7 +130,7 @@ export default class ModalPicker extends BaseComponent {
         return (
             <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
                 <View style={styles.optionContainer}>
-                    <ScrollView keyboardShouldPersistTaps>
+                    <ScrollView keyboardShouldPersistTaps="always">
                         <View style={{paddingHorizontal:10}}>
                             {options}
                         </View>

From 7789a6d79b100315e9c6f6601571288caacdfef2 Mon Sep 17 00:00:00 2001
From: berezynskyi <makc.bereza@gmail.com>
Date: Fri, 3 Nov 2017 15:17:06 +0200
Subject: [PATCH 3/4] clicking on overlay closes modal

---
 index.js | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/index.js b/index.js
index ac804540..08f69a23 100644
--- a/index.js
+++ b/index.js
@@ -128,23 +128,27 @@ export default class ModalPicker extends BaseComponent {
         });
 
         return (
-            <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
-                <View style={styles.optionContainer}>
-                    <ScrollView keyboardShouldPersistTaps="always">
-                        <View style={{paddingHorizontal:10}}>
-                            {options}
-                        </View>
-                    </ScrollView>
+            <TouchableOpacity
+                activeOpacity={1}
+                onPressOut={this.close}
+            >
+                <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker' + (componentIndex++)}>
+                    <View style={styles.optionContainer}>
+                        <ScrollView keyboardShouldPersistTaps="always">
+                            <View style={{ paddingHorizontal: 10 }}>
+                                {options}
+                            </View>
+                        </ScrollView>
+                    </View>
+                    <View style={styles.cancelContainer}>
+                        <TouchableOpacity onPress={this.close}>
+                            <View style={[styles.cancelStyle, this.props.cancelStyle]}>
+                                <Text style={[styles.cancelTextStyle, this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
                 </View>
-                <View style={styles.cancelContainer}>
-                    <TouchableOpacity onPress={this.close}>
-                        <View style={[styles.cancelStyle, this.props.cancelStyle]}>
-                            <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
-                        </View>
-                    </TouchableOpacity>
-                </View>
-
-            </View>);
+            </TouchableOpacity>);
     }
 
     renderChildren() {

From 7e14ab51bcfe89b03649c94e61c49e33fdb46435 Mon Sep 17 00:00:00 2001
From: berezynskyi <makc.bereza@gmail.com>
Date: Fri, 3 Nov 2017 15:54:03 +0200
Subject: [PATCH 4/4] works on Android

---
 index.js | 62 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/index.js b/index.js
index 08f69a23..f08d45be 100644
--- a/index.js
+++ b/index.js
@@ -11,7 +11,8 @@ import {
     Text,
     ScrollView,
     TouchableOpacity,
-    Platform
+    Platform,
+    TouchableNativeFeedback
 } from 'react-native';
 
 import styles from './style';
@@ -37,7 +38,7 @@ const propTypes = {
 
 const defaultProps = {
     data: [],
-    onChange: ()=> {},
+    onChange: () => { },
     initValue: 'Select me!',
     style: {},
     selectStyle: {},
@@ -50,7 +51,7 @@ const defaultProps = {
     overlayStyle: {},
     cancelText: 'cancel'
 };
-
+const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 export default class ModalPicker extends BaseComponent {
 
     constructor() {
@@ -73,49 +74,49 @@ export default class ModalPicker extends BaseComponent {
     }
 
     componentDidMount() {
-        this.setState({selected: this.props.initValue});
-        this.setState({cancelText: this.props.cancelText});
+        this.setState({ selected: this.props.initValue });
+        this.setState({ cancelText: this.props.cancelText });
     }
 
     componentWillReceiveProps(nextProps) {
-      if (nextProps.initValue != this.props.initValue) {
-        this.setState({selected: nextProps.initValue});
-      }
+        if (nextProps.initValue != this.props.initValue) {
+            this.setState({ selected: nextProps.initValue });
+        }
     }
 
     onChange(item) {
         this.props.onChange(item);
-        this.setState({selected: item.label});
+        this.setState({ selected: item.label });
         this.close();
     }
 
     close() {
-      this.setState({
-        modalVisible: false
-      });
+        this.setState({
+            modalVisible: false
+        });
     }
 
     open() {
-      this.setState({
-        modalVisible: true
-      });
+        this.setState({
+            modalVisible: true
+        });
     }
 
     renderSection(section) {
         return (
-            <View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
-                <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{section.label}</Text>
+            <View key={section.key} style={[styles.sectionStyle, this.props.sectionStyle]}>
+                <Text style={[styles.sectionTextStyle, this.props.sectionTextStyle]}>{section.label}</Text>
             </View>
         );
     }
 
     renderOption(option) {
         return (
-            <TouchableOpacity key={option.key} onPress={()=>this.onChange(option)}>
+            <Touchable key={option.key} onPress={() => this.onChange(option)}>
                 <View style={[styles.optionStyle, this.props.optionStyle]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
+                    <Text style={[styles.optionTextStyle, this.props.optionTextStyle]}>{option.label}</Text>
                 </View>
-            </TouchableOpacity>)
+            </Touchable>)
     }
 
     renderOptionList() {
@@ -128,7 +129,7 @@ export default class ModalPicker extends BaseComponent {
         });
 
         return (
-            <TouchableOpacity
+            <Touchable
                 activeOpacity={1}
                 onPressOut={this.close}
             >
@@ -141,19 +142,19 @@ export default class ModalPicker extends BaseComponent {
                         </ScrollView>
                     </View>
                     <View style={styles.cancelContainer}>
-                        <TouchableOpacity onPress={this.close}>
+                        <Touchable onPress={this.close}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                                 <Text style={[styles.cancelTextStyle, this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
                             </View>
-                        </TouchableOpacity>
+                        </Touchable>
                     </View>
                 </View>
-            </TouchableOpacity>);
+            </Touchable>);
     }
 
     renderChildren() {
 
-        if(this.props.children) {
+        if (this.props.children) {
             return this.props.children;
         }
         return (
@@ -164,19 +165,18 @@ export default class ModalPicker extends BaseComponent {
     }
 
     render() {
-
         const dp = (
-          <Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={this.close} animationType={this.state.animationType}>
-          {this.renderOptionList()}
-          </Modal>
+            <Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={this.close} animationType={this.state.animationType}>
+                {this.renderOptionList()}
+            </Modal>
         );
 
         return (
             <View style={this.props.style}>
                 {dp}
-                <TouchableOpacity onPress={this.open}>
+                <Touchable onPress={this.open}>
                     {this.renderChildren()}
-                </TouchableOpacity>
+                </Touchable>
             </View>
         );
     }