garganurag893 · rayansys · Jan 12, 2022 · Jan 12, 2022 · Jan 15, 2022 · Jan 17, 2022
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ npm-debug.log
 tmp
 build
 dist
+.idea
 
 # Dependency directory
 node_modules
diff --git a/lib/index.js b/lib/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from "react";
-import { View, Text, TouchableOpacity, Image, TextInput } from "react-native";
+import { View, Text, TouchableOpacity, Image, TextInput,I18nManager } from "react-native";
 import CountryPicker, {
   getCallingCode,
   DARK_THEME,
@@ -11,7 +11,7 @@ import { PhoneNumberUtil } from "google-libphonenumber";
 import styles from "./styles";
 
 const dropDown =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAi0lEQVRYR+3WuQ6AIBRE0eHL1T83FBqU5S1szdiY2NyTKcCAzU/Y3AcBXIALcIF0gRPAsehgugDEXnYQrUC88RIgfpuJ+MRrgFmILN4CjEYU4xJgFKIa1wB6Ec24FuBFiHELwIpQxa0ALUId9wAkhCnuBdQQ5ngP4I9wxXsBDyJ9m+8y/g9wAS7ABW4giBshQZji3AAAAABJRU5ErkJggg==";
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAi0lEQVRYR+3WuQ6AIBRE0eHL1T83FBqU5S1szdiY2NyTKcCAzU/Y3AcBXIALcIF0gRPAsehgugDEXnYQrUC88RIgfpuJ+MRrgFmILN4CjEYU4xJgFKIa1wB6Ec24FuBFiHELwIpQxa0ALUId9wAkhCnuBdQQ5ngP4I9wxXsBDyJ9m+8y/g9wAS7ABW4giBshQZji3AAAAABJRU5ErkJggg==";
 const phoneUtil = PhoneNumberUtil.getInstance();
 
 export default class PhoneInput extends PureComponent {
@@ -20,25 +20,29 @@ export default class PhoneInput extends PureComponent {
     this.state = {
       code: props.defaultCode ? undefined : "91",
       number: props.value
-        ? props.value
-        : props.defaultValue
-        ? props.defaultValue
-        : "",
+          ? props.value
+          : props.defaultValue
+              ? props.defaultValue
+              : "",
       modalVisible: false,
       countryCode: props.defaultCode ? props.defaultCode : "IN",
       disabled: props.disabled || false,
     };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.disabled !== prevState.disabled) {
-      if ((nextProps.value || nextProps.value === "") && nextProps.value !== prevState.number) {
-        return ({ disabled: nextProps.disabled, number: nextProps.value });
+  async componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
+    if (this.props.disabled !== prevState.disabled) {
+      if ((this.props.value || this.props.value === "") && this.props.value !== prevState.number) {
+        this.setState({ disabled: this.props.disabled, number: this.props.value });
       }
-      return ({ disabled: nextProps.disabled });
+      this.setState({ disabled: this.props.disabled });
+    }
+    if (this.props.defaultCode !== prevState.countryCode){
+      const code = await getCallingCode(this.props.defaultCode);
+      this.setState({ countryCode: this.props.defaultCode,code })
     }
     return null;
-  };
+  }
 
   async componentDidMount() {
     const { defaultCode } = this.props;
@@ -69,29 +73,37 @@ export default class PhoneInput extends PureComponent {
   onSelect = (country) => {
     const { onChangeCountry } = this.props;
     this.setState(
-      {
-        countryCode: country.cca2,
-        code: country.callingCode[0],
-      },
-      () => {
-        const { onChangeFormattedText } = this.props;
-        if (onChangeFormattedText) {
-          if (country.callingCode[0]) {
-            onChangeFormattedText(
-              `+${country.callingCode[0]}${this.state.number}`
-            );
-          } else {
-            onChangeFormattedText(this.state.number);
+        {
+          countryCode: country.cca2,
+          code: country.callingCode[0],
+        },
+        () => {
+          const { onChangeFormattedText } = this.props;
+          if (onChangeFormattedText) {
+            if (country.callingCode[0]) {
+              onChangeFormattedText(
+                  `+${country.callingCode[0]}${this.state.number}`
+              );
+            } else {
+              onChangeFormattedText(this.state.number);
+            }
           }
         }
-      }
     );
     if (onChangeCountry) {
       onChangeCountry(country);
     }
   };
 
   onChangeText = (text) => {
+    text =  text.toString().trim();
+    text = text.replace(/\s+/g, "");
+    if (text.startsWith("0")){
+      text = text.substring(1)
+    }
+    if (text.startsWith("+"+this.state.code)){
+      text = text.substring(1+this.state.code.length)
+    }
     this.setState({ number: text });
     const { onChangeText, onChangeFormattedText } = this.props;
     if (onChangeText) {
@@ -119,11 +131,11 @@ export default class PhoneInput extends PureComponent {
 
   renderDropdownImage = () => {
     return (
-      <Image
-        source={{ uri: dropDown }}
-        resizeMode="contain"
-        style={styles.dropDownImage}
-      />
+        <Image
+            source={{ uri: dropDown }}
+            resizeMode="contain"
+            style={styles.dropDownImage}
+        />
     );
   };
 
@@ -132,10 +144,10 @@ export default class PhoneInput extends PureComponent {
     const { countryCode } = this.state;
     if (layout === "first") {
       return (
-        <Flag
-          countryCode={countryCode}
-          flagSize={flagSize ? flagSize : DEFAULT_THEME.flagSize}
-        />
+          <Flag
+              countryCode={countryCode}
+              flagSize={flagSize ? flagSize : DEFAULT_THEME.flagSize}
+          />
       );
     }
     return <View />;
@@ -162,78 +174,81 @@ export default class PhoneInput extends PureComponent {
     } = this.props;
     const { modalVisible, code, countryCode, number, disabled } = this.state;
     return (
-      <CountryModalProvider>
-        <View
-          style={[
-            styles.container,
-            withShadow ? styles.shadow : {},
-            containerStyle ? containerStyle : {},
-          ]}
-        >
-          <TouchableOpacity
-            style={[
-              styles.flagButtonView,
-              layout === "second" ? styles.flagButtonExtraWidth : {},
-              flagButtonStyle ? flagButtonStyle : {},
-              countryPickerButtonStyle ? countryPickerButtonStyle : {},
-            ]}
-            disabled={disabled}
-            onPress={() => this.setState({ modalVisible: true })}
-          >
-            <CountryPicker
-              onSelect={this.onSelect}
-              withEmoji
-              withFilter
-              withFlag
-              filterProps={filterProps}
-              countryCode={countryCode}
-              withCallingCode
-              disableNativeModal={disabled}
-              visible={modalVisible}
-              theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
-              renderFlagButton={this.renderFlagButton}
-              onClose={() => this.setState({ modalVisible: false })}
-              {...countryPickerProps}
-            />
-            {code && layout === "second" && (
-              <Text
-                style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
-              >{`+${code}`}</Text>
-            )}
-            {!disableArrowIcon && (
-              <React.Fragment>
-                {renderDropdownImage
-                  ? renderDropdownImage
-                  : this.renderDropdownImage()}
-              </React.Fragment>
-            )}
-          </TouchableOpacity>
+        <CountryModalProvider>
           <View
-            style={[
-              styles.textContainer,
-              textContainerStyle ? textContainerStyle : {},
-            ]}
+              style={[
+                styles.container,
+                withShadow ? styles.shadow : {},
+                containerStyle ? containerStyle : {},
+                {flexDirection:I18nManager.isRTL ? "row-reverse" : "row"},
+              ]}
           >
-            {code && layout === "first" && (
-              <Text
-                style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
-              >{`+${code}`}</Text>
-            )}
-            <TextInput
-              style={[styles.numberText, textInputStyle ? textInputStyle : {}]}
-              placeholder={placeholder ? placeholder : "Phone Number"}
-              onChangeText={this.onChangeText}
-              value={number}
-              editable={disabled ? false : true}
-              selectionColor="black"
-              keyboardAppearance={withDarkTheme ? "dark" : "default"}
-              keyboardType="number-pad"
-              autoFocus={autoFocus}
-              {...textInputProps}
-            />
+            <TouchableOpacity
+                style={[
+                  styles.flagButtonView,
+                  layout === "second" ? styles.flagButtonExtraWidth : {},
+                  flagButtonStyle ? flagButtonStyle : {},
+                  countryPickerButtonStyle ? countryPickerButtonStyle : {},
+                ]}
+                disabled={disabled}
+                onPress={() => this.setState({ modalVisible: true })}
+            >
+              <CountryPicker
+                  onSelect={this.onSelect}
+                  withEmoji
+                  withFilter
+                  withFlag
+                  filterProps={filterProps}
+                  countryCode={countryCode}
+                  withCallingCode
+                  disableNativeModal={disabled}
+                  visible={modalVisible}
+                  theme={withDarkTheme ? DARK_THEME : DEFAULT_THEME}
+                  renderFlagButton={this.renderFlagButton}
+                  onClose={() => this.setState({ modalVisible: false })}
+                  {...countryPickerProps}
+              />
+              {code && layout === "second" && (
+                  <Text
+                      style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
+                  >{`+${code}`}</Text>
+              )}
+              {!disableArrowIcon && (
+                  <React.Fragment>
+                    {renderDropdownImage
+                        ? renderDropdownImage
+                        : this.renderDropdownImage()}
+                  </React.Fragment>
+              )}
+            </TouchableOpacity>
+            <View
+                style={[
+                  styles.textContainer,
+                  textContainerStyle ? textContainerStyle : {},
+                  {flexDirection:I18nManager.isRTL ? "row-reverse" : "row"},
+                ]}
+            >
+              {code && layout === "first" && (
+                  <Text
+                      style={[styles.codeText, codeTextStyle ? codeTextStyle : {}]}
+                  >{`+${code}`}</Text>
+              )}
+              <TextInput
+                  returnKeyType={this.props.returnKeyType ?? 'done'}
+                  style={[{textAlign:"left"},styles.numberText, textInputStyle ? textInputStyle : {}]}
+                  placeholder={placeholder ? placeholder : "Phone Number"}
+                  onChangeText={this.onChangeText}
+                  value={number}
+                  editable={!disabled}
+                  selectionColor="black"
+                  keyboardAppearance={withDarkTheme ? "dark" : "default"}
+                  keyboardType="number-pad"
+                  autoFocus={autoFocus}
+                  {...textInputProps}
+              />
+            </View>
           </View>
-        </View>
-      </CountryModalProvider>
+        </CountryModalProvider>
     );
   }
 }
@@ -245,4 +260,4 @@ export const isValidNumber = (number, countryCode) => {
   } catch (err) {
     return false;
   }
-};
+};
diff --git a/lib/styles.js b/lib/styles.js
@@ -1,4 +1,4 @@
-import {StyleSheet, Dimensions} from 'react-native';
+import {StyleSheet, Dimensions,I18nManager} from 'react-native';
 const {width: viewportWidth, height: viewportHeight} = Dimensions.get('window');
 function wp(percentage) {
   const value = (percentage * viewportWidth) / 100;
@@ -50,7 +50,8 @@ const styles = StyleSheet.create({
   },
   codeText: {
     fontSize: 16,
-    marginRight: 10,
+    marginRight: I18nManager.isRTL ? 0:10,
+    marginLeft: I18nManager.isRTL ? 10:0,
     fontWeight: '500',
     color: '#000000',
   },