Banch of fixes

README.md

@@ -10,6 +10,7 @@ Phone input box for React Native
 
 ```
 npm i react-native-phone-input --save
+npm install @react-native-community/picker --save
 ```
 
 ## Basic Usage

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';
@@ -34,9 +35,11 @@ export default class CountryPicker extends Component {
   }
 
   componentDidUpdate() {
-    this.setState({
-      selectedCountry: this.props.selectedCountry,
-    });
+    if(this.props.selectedCountry !== this.state.selectedCountry) {
+      this.setState({
+        selectedCountry: this.props.selectedCountry,
+      });
+    }
   }
 
   selectCountry(selectedCountry) {
@@ -70,9 +73,8 @@ export default class CountryPicker extends Component {
   }
 
   onValueChange(selectedCountry) {
-    this.setState({
-      selectedCountry,
-    });
+    this.selectCountry(selectedCountry);
+    this.props.onSubmit(selectedCountry);
   }
 
   show() {

lib/index.js

@@ -19,39 +19,65 @@ export default class PhoneInput extends Component {
     this.onChangePhoneNumber = this.onChangePhoneNumber.bind(this);
     this.onPressFlag = this.onPressFlag.bind(this);
     this.selectCountry = this.selectCountry.bind(this);
-    this.getFlag = this.getFlag.bind(this);
-    this.getISOCode = this.getISOCode.bind(this);
+    this.constructNumber = this.constructNumber.bind(this);
+    this.prepareValue = this.prepareValue.bind(this);
 
-    const { countriesList, disabled, initialCountry } = this.props;
+    const { countriesList, disabled, initialCountry, value = '', } = this.props;
+    const countryData = PhoneNumber.getCountryDataByCode(initialCountry);
+    const dialCode = (countryData && countryData.dialCode) || '';
 
     if (countriesList) {
       Country.setCustomCountriesData(countriesList);
     }
-    const countryData = PhoneNumber.getCountryDataByCode(initialCountry);
 
     this.state = {
       iso2: initialCountry,
+      dialCode,
       disabled,
-      formattedNumber: countryData ? `+${countryData.dialCode}` : "",
-      value: null,
-      inputValue: "",
+      inputValue: this.constructNumber({
+        iso2: initialCountry,
+        dialCode,
+        value: this.prepareValue({value, dialCode})
+      }),
     };
   }
 
   componentDidMount() {
-    if (this.props.value) {
+    if (this.props.value && this.props.value !== this.state.inputValue) {
       this.updateFlagAndFormatNumber(this.props.value);
     }
   }
 
   componentDidUpdate() {
-    const { value, disabled } = this.props;
-    this.setState({ disabled });
+    const { 
+      value = '',
+      disabled = null
+    } = this.props;
 
-    if (value && value !== this.state.value) {
-      this.setState({ value });
-      this.updateFlagAndFormatNumber(value);
+    if (disabled) {
+      this.setState({disabled});
     }
+
+    if (value && value !== this.state.inputValue) {
+      this.updateFlagAndFormatNumber(
+        this.prepareValue({ dialCode: this.state.dialCode, value})
+      );
+    }
+  }
+
+  constructNumber({dialCode, value, iso2}) {
+    const {useCountryCode, autoFormat} = this.props;
+    const number = `+${dialCode}${value}`;
+    if(autoFormat) {
+      const formatted = this.format(number, iso2);
+      return useCountryCode ? formatted : formatted.replace(`+${dialCode}`, "");
+    }
+    return useCountryCode ? number : value;
+  }
+
+  prepareValue({dialCode, value = ""}) {
+    const clearedValue = value.replace(/\s/gm, '');
+    return clearedValue.replace(`+${dialCode}`, '');
   }
 
   onChangePhoneNumber(number) {
@@ -83,8 +109,7 @@ export default class PhoneInput extends Component {
   }
 
   getCountryCode() {
-    const countryData = PhoneNumber.getCountryDataByCode(this.state.iso2);
-    return countryData ? countryData.dialCode : null;
+    return this.state.dialCode;
   }
 
   getAllCountries() {
@@ -96,16 +121,16 @@ export default class PhoneInput extends Component {
   }
 
   getDialCode() {
-    return PhoneNumber.getDialCode(this.state.formattedNumber);
+    return this.state.dialCode;
   }
 
   getValue() {
-    return this.state.formattedNumber.replace(/\s/g,'');
+    return this.state.inputValue;
   }
 
   getNumberType() {
     return PhoneNumber.getNumberType(
-      this.state.formattedNumber,
+      this.state.inputValue,
       this.state.iso2
     );
   }
@@ -117,14 +142,23 @@ export default class PhoneInput extends Component {
   selectCountry(iso2) {
     if (this.state.iso2 !== iso2) {
       const countryData = PhoneNumber.getCountryDataByCode(iso2);
+      const {inputValue, dialCode} = this.state;
+
       if (countryData) {
         this.setState(
           {
             iso2,
-            formattedNumber: `+${countryData.dialCode}`
+            dialCode: countryData.dialCode,
+            inputValue: this.constructNumber({
+              iso2,
+              dialCode: countryData.dialCode,
+              value: this.prepareValue({
+                value: inputValue,
+                dialCode,
+              }) 
+            })
           },
           () => {
-            this.updateFlagAndFormatNumber(this.state.inputValue)
             if (this.props.onSelectCountry) this.props.onSelectCountry(iso2);
           }
         );
@@ -133,40 +167,65 @@ export default class PhoneInput extends Component {
   }
 
   isValidNumber() {
-    if (this.state.inputValue.length < 3) return false;
+    const {inputValue, iso2} = this.state;
+    if (inputValue < 3) return false;
     return PhoneNumber.isValidNumber(
-      this.state.formattedNumber,
-      this.state.iso2
+      inputValue,
+      iso2
     );
   }
 
-  format(text) {
-    return this.props.autoFormat
-      ? PhoneNumber.format(text, this.state.iso2)
-      : text;
+  format(text, iso2) {
+    return PhoneNumber.format(text, iso2);
   }
 
   updateFlagAndFormatNumber(number, actionAfterSetState = null) {
-    const { allowZeroAfterCountryCode, initialCountry } = this.props;
-    let iso2 = this.getISOCode() || initialCountry;
-    let formattedPhoneNumber = number;
-    if (number) {
-      const countryCode = this.getCountryCode();
-      if (formattedPhoneNumber[0] !== "+" && countryCode !== null) {
-        formattedPhoneNumber = '+' + countryCode.toString() + formattedPhoneNumber.toString();
+    const {useCountryCode, allowZeroAfterCountryCode} = this.props;
+    const {dialCode, iso2} = this.state;
+
+    let newInputValue = number;
+    let newDialCode = dialCode;
+    let newIso2 = iso2;
+
+    if(useCountryCode) {
+      const isoCode = PhoneNumber.getCountryCodeOfNumber(number);
+      if(isoCode !== iso2) {
+        if(isoCode) {
+          newIso2 = isoCode;
+          const countryData = PhoneNumber.getCountryDataByCode(newIso2);
+          newDialCode = countryData ? countryData.dialCode : dialCode;
+        } else {
+          newIso2 = '';
+          newDialCode = '';
+        }
       }
-      formattedPhoneNumber = allowZeroAfterCountryCode
-        ? formattedPhoneNumber
-        : this.possiblyEliminateZeroAfterCountryCode(formattedPhoneNumber);
-      iso2 = PhoneNumber.getCountryCodeOfNumber(formattedPhoneNumber);
+      newInputValue = this.prepareValue({
+        dialCode: newDialCode,
+        value: number
+      });
     }
-    this.setState({ iso2, formattedNumber: formattedPhoneNumber, inputValue: number }, actionAfterSetState);
+
+    const formatted = this.constructNumber({
+      dialCode: newDialCode, value: newInputValue, iso2: newIso2
+    });
+
+    const inputValue = allowZeroAfterCountryCode
+      ? formatted
+      : this.possiblyEliminateZeroAfterCountryCode(formatted);
+
+    this.setState({ 
+      inputValue,
+      dialCode: newDialCode,
+      iso2: newIso2
+    }, actionAfterSetState);
   }
 
   possiblyEliminateZeroAfterCountryCode(number) {
-    const dialCode = PhoneNumber.getDialCode(number);
-    return number.startsWith(`${dialCode}0`)
-      ? dialCode + number.substr(dialCode.length + 1)
+    const {dialCode} = this.state;
+    const formatted = this.prepareValue({value: number, dialCode});
+
+    return formatted.startsWith('0')
+      ? `+${dialCode}${formatted.replace(/0/gm, '')}`
       : number;
   }
 
@@ -179,20 +238,22 @@ export default class PhoneInput extends Component {
   }
 
   render() {
-    const { iso2, inputValue, disabled } = this.state;
+    const { iso2, disabled } = this.state;
     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 && this.props.useCountryCode) && (
+          <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 => {
@@ -206,28 +267,30 @@ export default class PhoneInput extends Component {
             }}
             keyboardType="phone-pad"
             underlineColorAndroid="rgba(0,0,0,0)"
-            value={inputValue}
+            value={this.state.inputValue}
             {...this.props.textProps}
           />
         </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 && this.props.useCountryCode) && (
+          <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 +328,17 @@ PhoneInput.propTypes = {
   confirmText: PropTypes.string,
   confirmTextTextStyle: styleType,
   disabled: PropTypes.bool,
-  allowZeroAfterCountryCode: PropTypes.bool
+  allowZeroAfterCountryCode: PropTypes.bool,
+  shouldShowCountryPicker: PropTypes.bool,
+  useCountryCode: PropTypes.bool,
+  autoFormat: PropTypes.bool,
 };
 
 PhoneInput.defaultProps = {
   initialCountry: "us",
   disabled: false,
-  allowZeroAfterCountryCode: true
+  allowZeroAfterCountryCode: true,
+  shouldShowCountryPicker: true,
+  useCountryCode: true,
+  autoFormat: true
 };

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"