Small improvements to the country picker (background, touch background to close)

[sbrighiu]

I've played a bit with the package and added a patch to it. Facilitating the changes I added using new properties could benefit someone else.

Most of it may only be visible on Android.

diff --git a/node_modules/react-native-phone-input/lib/countryPicker.js b/node_modules/react-native-phone-input/lib/countryPicker.js
index 46659fc..0f4ec31 100644
--- a/node_modules/react-native-phone-input/lib/countryPicker.js
+++ b/node_modules/react-native-phone-input/lib/countryPicker.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Text, TouchableOpacity, View, Modal, Picker } from 'react-native';
+import { Text, TouchableOpacity, View, Modal, Picker } from "react-native";
 import PropTypes from 'prop-types';
 
 import Country from './country';
@@ -90,14 +90,16 @@ export default class CountryPicker extends Component {
     const itemStyle = this.props.itemStyle || {};
     return (
       <Modal
-        animationType="slide"
+        animationType="fade"
         transparent
         visible={this.state.modalVisible}
+        statusBarTranslucent={true}
         onRequestClose={() => {
           console.log('Country picker has been closed.');
+          this.onPressCancel()
         }}
       >
-        <View style={styles.basicContainer}>
+        <TouchableOpacity activeOpacity={0} style={styles.basicContainer} onPress={this.onPressCancel}>
           <View
             style={[
               styles.modalContainer,
@@ -133,7 +135,7 @@ export default class CountryPicker extends Component {
               </Picker>
             </View>
           </View>
-        </View>
+        </TouchableOpacity>
       </Modal>
     );
   }
diff --git a/node_modules/react-native-phone-input/lib/styles.js b/node_modules/react-native-phone-input/lib/styles.js
index ffb7365..721b36f 100644
--- a/node_modules/react-native-phone-input/lib/styles.js
+++ b/node_modules/react-native-phone-input/lib/styles.js
@@ -15,6 +15,7 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'flex-end',
     alignItems: 'center',
+    backgroundColor: '#00000088',
   },
   modalContainer: {
     width: SCREEN_WIDTH,

[sbrighiu]

Also the hit slop for the flag could be made a bit bigger for default implementation :). Sorry for not submitting a PR :(.