Fixed disabled issue

garganurag893 · Aug 10, 2020 · 0c3c303 · 0c3c303
1 parent 2b94b1b
commit 0c3c303
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-<a href="https://twitter.com/AnuragG94634191"><img src="./gif/Phone_Number_Input.gif" height="400" title="Anurag Garg"  alt="Anurag Garg" style="box-shadow: 0 20px 30px 3px rgba(9, 9, 16, 0.2);"></a>
+<img src="./gif/Phone_Number_Input.gif" height="400" title="Anurag Garg"   alt="Anurag Garg" style="box-shadow: 0 20px 30px 3px rgba(9, 9, 16, 0.2);">
 </p>
 
 <h1 align="center">React Native Phone Number Input

diff --git a/gif/Phone_Input_2.gif b/gif/Phone_Input_2.gif
diff --git a/lib/index.js b/lib/index.js
@@ -4,6 +4,7 @@ import CountryPicker, {
   getCallingCode,
   DARK_THEME,
   DEFAULT_THEME,
+  CountryModalProvider,
 } from "react-native-country-picker-modal";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import styles from "./styles";
@@ -38,7 +39,7 @@ export default class PhoneInput extends Component {
     if ((defaultValue || defaultValue === "") && defaultValue !== number) {
       this.setState({ number: defaultValue });
     }
-    if (nextDisabled && disabled !== nextDisabled) {
+    if (disabled !== nextDisabled) {
       this.setState({ disabled: nextDisabled });
     }
   }
@@ -106,61 +107,63 @@ export default class PhoneInput extends Component {
     } = this.props;
     const { modalVisible, code, countryCode, number, disabled } = this.state;
     return (
-      <View
-        style={[
-          styles.container,
-          withShadow ? styles.shadow : {},
-          containerStyle ? containerStyle : {},
-        ]}
-      >
-        <TouchableOpacity
+      <CountryModalProvider>
+        <View
           style={[
-            styles.flagButtonView,
-            flagButtonStyle ? flagButtonStyle : {},
+            styles.container,
+            withShadow ? styles.shadow : {},
+            containerStyle ? containerStyle : {},
           ]}
-          disabled={disabled}
-          onPress={() => this.setState({ modalVisible: true })}
         >
-          <CountryPicker
-            onSelect={this.onSelect}
-            withEmoji
-            withFilter
-            withFlag
-            countryCode={countryCode}
-            withCallingCode
-            disableNativeModal={disabled}
-            visible={modalVisible}
-            theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-            onClose={() => this.setState({ modalVisible: false })}
-          />
-          {!disableArrowIcon && (
-            <Image
-              source={{ uri: dropDown }}
-              resizeMode="contain"
-              style={styles.dropDownImage}
+          <TouchableOpacity
+            style={[
+              styles.flagButtonView,
+              flagButtonStyle ? flagButtonStyle : {},
+            ]}
+            disabled={disabled}
+            onPress={() => this.setState({ modalVisible: true })}
+          >
+            <CountryPicker
+              onSelect={this.onSelect}
+              withEmoji
+              withFilter
+              withFlag
+              countryCode={countryCode}
+              withCallingCode
+              disableNativeModal={disabled}
+              visible={modalVisible}
+              theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+              onClose={() => this.setState({ modalVisible: false })}
             />
-          )}
-        </TouchableOpacity>
-        <View style={styles.textContainer}>
-          {code && (
-            <Text
-              style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
-            >{`+${code}`}</Text>
-          )}
-          <TextInput
-            style={[styles.numberText, textInputStyle ? textInputStyle : {}]}
-            placeholder="Phone Number"
-            onChangeText={this.onChangeText}
-            value={number}
-            editable={disabled ? false : true}
-            selectionColor="black"
-            keyboardAppearance={withDarkTheme ? "dark" : "default"}
-            keyboardType="number-pad"
-            autoFocus={autoFocus}
-            {...textInputProps}
-          />
+            {!disableArrowIcon && (
+              <Image
+                source={{ uri: dropDown }}
+                resizeMode="contain"
+                style={styles.dropDownImage}
+              />
+            )}
+          </TouchableOpacity>
+          <View style={styles.textContainer}>
+            {code && (
+              <Text
+                style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
+              >{`+${code}`}</Text>
+            )}
+            <TextInput
+              style={[styles.numberText, textInputStyle ? textInputStyle : {}]}
+              placeholder="Phone Number"
+              onChangeText={this.onChangeText}
+              value={number}
+              editable={disabled ? false : true}
+              selectionColor="black"
+              keyboardAppearance={withDarkTheme ? "dark" : "default"}
+              keyboardType="number-pad"
+              autoFocus={autoFocus}
+              {...textInputProps}
+            />
+          </View>
         </View>
-      </View>
+      </CountryModalProvider>
     );
   }
 }