From 32c967466639edbbd86c0c388339b914d2e6b5c3 Mon Sep 17 00:00:00 2001
From: Pawel Wrzosek <pawelwrzosek@gmail.com>
Date: Mon, 22 Jun 2020 12:39:10 +0200
Subject: [PATCH 1/2] use Picker from `react-native-community` instead of
 deprecated RN built-in component

fixes #120
---
 lib/countryPicker.js | 3 ++-
 package.json         | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/countryPicker.js b/lib/countryPicker.js
index 1879ebee..9b25e339 100644
--- a/lib/countryPicker.js
+++ b/lib/countryPicker.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Text, TouchableOpacity, View, Modal, Picker } from 'react-native';
+import { Text, TouchableOpacity, View, Modal } from 'react-native';
+import {Picker} from '@react-native-community/picker';
 import PropTypes from 'prop-types';
 
 import Country from './country';
diff --git a/package.json b/package.json
index ab4450df..a6fe2c51 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
   "dependencies": {
     "google-libphonenumber": "^3.2.2",
     "lodash": "^4.17.4",
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "@react-native-community/picker": "^1.6.5"
   },
   "peerDependencies": {
     "react-native": ">= 0.25"

From 721a02dc5387e81df5951e5d06a113c78ef0d9ea Mon Sep 17 00:00:00 2001
From: Pawel Wrzosek <pawelwrzosek@gmail.com>
Date: Fri, 26 Jun 2020 13:31:05 +0200
Subject: [PATCH 2/2] fix: prevent from unnecessary state updates

---
 lib/index.js | 66 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index db864957..f919c158 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -46,7 +46,9 @@ export default class PhoneInput extends Component {
 
   componentDidUpdate() {
     const { value, disabled } = this.props;
-    this.setState({ disabled });
+    if (disabled != null && disabled !== this.state.disabled) {
+      this.setState({disabled});
+    }
 
     if (value && value !== this.state.value) {
       this.setState({ value });
@@ -183,16 +185,18 @@ export default class PhoneInput extends Component {
     const TextComponent = this.props.textComponent || TextInput;
     return (
       <View style={[styles.container, this.props.style]}>
-        <TouchableWithoutFeedback
-          onPress={this.onPressFlag}
-          disabled={disabled}
-        >
-          <Image
-            source={Flags.get(iso2)}
-            style={[styles.flag, this.props.flagStyle]}
+        {this.props.shouldShowCountryPicker && (
+          <TouchableWithoutFeedback
             onPress={this.onPressFlag}
-          />
-        </TouchableWithoutFeedback>
+            disabled={disabled}
+          >
+            <Image
+              source={Flags.get(iso2)}
+              style={[styles.flag, this.props.flagStyle]}
+              onPress={this.onPressFlag}
+            />
+          </TouchableWithoutFeedback>
+        )}
         <View style={{ flex: 1, marginLeft: this.props.offset || 10 }}>
           <TextComponent
             ref={ref => {
@@ -211,23 +215,25 @@ export default class PhoneInput extends Component {
           />
         </View>
 
-        <CountryPicker
-          ref={ref => {
-            this.picker = ref;
-          }}
-          selectedCountry={iso2}
-          onSubmit={this.selectCountry}
-          buttonColor={this.props.pickerButtonColor}
-          buttonTextStyle={this.props.pickerButtonTextStyle}
-          cancelText={this.props.cancelText}
-          cancelTextStyle={this.props.cancelTextStyle}
-          confirmText={this.props.confirmText}
-          confirmTextStyle={this.props.confirmTextStyle}
-          pickerBackgroundColor={this.props.pickerBackgroundColor}
-          itemStyle={this.props.pickerItemStyle}
-          onPressCancel={this.props.onPressCancel}
-          onPressConfirm={this.props.onPressConfirm}
-        />
+        {this.props.shouldShowCountryPicker && (
+          <CountryPicker
+            ref={ref => {
+              this.picker = ref;
+            }}
+            selectedCountry={iso2}
+            onSubmit={this.selectCountry}
+            buttonColor={this.props.pickerButtonColor}
+            buttonTextStyle={this.props.pickerButtonTextStyle}
+            cancelText={this.props.cancelText}
+            cancelTextStyle={this.props.cancelTextStyle}
+            confirmText={this.props.confirmText}
+            confirmTextStyle={this.props.confirmTextStyle}
+            pickerBackgroundColor={this.props.pickerBackgroundColor}
+            itemStyle={this.props.pickerItemStyle}
+            onPressCancel={this.props.onPressCancel}
+            onPressConfirm={this.props.onPressConfirm}
+          />
+        )}
       </View>
     );
   }
@@ -265,11 +271,13 @@ PhoneInput.propTypes = {
   confirmText: PropTypes.string,
   confirmTextTextStyle: styleType,
   disabled: PropTypes.bool,
-  allowZeroAfterCountryCode: PropTypes.bool
+  allowZeroAfterCountryCode: PropTypes.bool,
+  shouldShowCountryPicker: PropTypes.bool
 };
 
 PhoneInput.defaultProps = {
   initialCountry: "us",
   disabled: false,
-  allowZeroAfterCountryCode: true
+  allowZeroAfterCountryCode: true,
+  shouldShowCountryPicker: true
 };