fix: prevent from unnecessary state updates

Author: wzs

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
 };