Cannot change Country when initialCountry is set

[Bill-Niz]

When i set initialCountry, the picker always return to this country, i can't change it. Also happen when i select a country in the list, i can't change it anymore

[nikosvr88]

Same for me. Trying to change country but when select new one the dropdown option turns into the old one. I have to delete country code in order to change country. Any suggestions?

[Zakyyy]

Same issue

[Zakyyy]

Any clue on this?

[elblogdelbeto]

same issue

[zizzle6717]

Please make a PR and I will do my best to address the bug. I have been busy lately and I'm looking for help maintaining the project

[zizzle6717]

Here is some example code. I'm not seeing this issue.

import CountryPicker, { CountryCode } from 'react-native-country-picker-modal';

...

    onCountryCodeSelect = (country) => {
        this.phone.selectCountry(country.cca2.toLowerCase());
        this.setState({
            countryCode: country.cca2,
            isCountryPickerVisible: false,
        });
    }

...

              <View style={phoneStyles.phoneInputContainer}>
                    <PhoneInput
                        autoFormat={true}
                        ref={(ref) => { this.phone = ref; }}
                        onPressFlag={this.onPressFlag}
                        offset={0}
                        onChangePhoneNumber={this.onPhoneInputChange}
                        initialCountry={'us'}
                        flagStyle={styles.displayNone}
                        style={formStyles.phoneInput}
                        textProps={{
                            placeholder: this.translate('forms.registerForm.labels.mobilePhone'),
                            selectionColor: therrTheme.colors.ternary,
                            style: {...formStyles.phoneInputText},
                            placeholderTextColor: therrTheme.colors.placeholderTextColor,
                        }}
                    />
                    <View style={phoneStyles.countryFlagContainer}>
                        <CountryPicker
                            closeButtonStyle={phoneStyles.pickerCloseButton}
                            containerButtonStyle={phoneStyles.countryFlag}
                            onSelect={this.onCountryCodeSelect}
                            translation="common"
                            countryCode={countryCode}
                            visible={isCountryPickerVisible}
                            withAlphaFilter={true}
                        />
                    </View>
                </View>

[nguyenvanphuc2203]

same issue for me, i can't change country after select first time

[rililive]

What version do you have installed? Also please share an your configuration and code so I can better debug

[shahidcodes]

@rililive

export default function Login() {
  const [countryISO, setCountryISO] = useState('sa');
  const [phone, setPhone] = useState('');
  return (
    <SafeAreaView style={{ flex: 1, padding: 20 }}>
      <Title style={{ textAlign: 'center', fontSize: 30, marginBottom: 30 }}>
        Login to {'\n'} Your Account
      </Title>
      <PhoneInput
        style={styles.phoneInput}
        onSelectCountry={(iso2) => console.log(iso2)}
        initialCountry="sa"
        onChangePhoneNumber={setPhone}
      />
    </SafeAreaView>
  );
}

package.json

    "react-native-phone-input": "^1.0.10",

[zizzle6717]

Your onChangePhoneNumber function needs to update the countryCode prop on the PhoneInput component. See my code above and this example function for updating the countryCode state

onPhoneInputChange = (value: string, iso2: string) => {
        const newState: any = {
            phoneInputValue: value,
        };
        if (iso2) {
            newState.countryCode = (iso2?.toUpperCase() as CountryCode);
        }
        this.setState(newState);
};

[shahidcodes]

@zizzle6717 onChangePhoneNumber is not getting called when country is selected, it does not get past the country selection screen

import { StackScreenProps } from '@react-navigation/stack';
import React from 'react';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button, Title } from 'react-native-paper';
import PhoneInput from 'react-native-phone-input';
import { SafeAreaView } from 'react-native-safe-area-context';
import theme from '../../constants/Theme';
import { RootStackParamList } from '../../types';

export default function Login({
  navigation,
}: StackScreenProps<RootStackParamList>) {
  const [phoneInput, setPhoneInput] = useState({
    phone: '',
    iso2: '',
  });

  console.log({ phoneInput });
  return (
    <SafeAreaView style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      <Title
        style={{
          textAlign: 'center',
          fontSize: 30,
          marginBottom: 30,
          fontWeight: 'bold',
        }}
      >
        Login to {'\n'} Your Account
      </Title>
      <PhoneInput
        style={styles.phoneInput}
        // initialCountry={phoneInput.iso2}
        onSelectCountry={(iso2) => {
          console.log({ iso2 });
          setPhoneInput({
            ...phoneInput,
            iso2,
          });
        }}
        onChangePhoneNumber={(phone: string, iso2: string) => {
          console.log({ phone, iso2 });
          setPhoneInput({
            phone,
            iso2,
          });
        }}
      />
      <Button
        mode="contained"
        color={theme.colors.accent}
        style={{ marginTop: 20, borderRadius: 8 }}
        onPress={() => {
          navigation.navigate('OTPVerification');
        }}
        labelStyle={{ fontSize: 17, paddingVertical: 8 }}
      >
        Get OTP
      </Button>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  phoneInput: {
    borderWidth: 1,
    padding: 10,
    borderRadius: 8,
    borderColor: '#736899',
  },
});

[zizzle6717]

Feel free to open a PR

[HasanAlyazidi]

Same issue. tested all v1

[ebaynaud]

Same issue.

Fixed in https://github.com/rili-live/react-native-phone-input/pull/20.

Waiting for the merge, you guys can use this react-native-phone-input+1.0.10.patch with https://github.com/ds300/patch-package:

diff --git a/node_modules/react-native-phone-input/dist/CountryPicker.js b/node_modules/react-native-phone-input/dist/CountryPicker.js
index d829c1c..9869463 100644
--- a/node_modules/react-native-phone-input/dist/CountryPicker.js
+++ b/node_modules/react-native-phone-input/dist/CountryPicker.js
@@ -61,14 +61,6 @@ class CountryPicker extends react_1.Component {
             selectedCountry: this.props.selectedCountry || country_1.default.getAll()[0],
         };
     }
-    componentDidUpdate() {
-        const { selectedCountry } = this.props;
-        if (selectedCountry && selectedCountry !== this.state.selectedCountry) {
-            this.setState({
-                selectedCountry: this.props.selectedCountry,
-            });
-        }
-    }
     selectCountry(selectedCountry) {
         this.setState({
             selectedCountry,

[zizzle6717]

Sorry for the delay. The confusion here was that I am using a custom (external) library for the picker (react-native-country-picker-modal). It uses the prop onSelect rather than onSelectCountry. I didn't notice this until recently and realized that the built in picker had the bug (which is why I couldn't reproduce it locally).

Thank you @ebaynaud for the PR! Please let me know if this is not resolved in the recent release (v1.1.0)

[Karsens]

It's resolved @zizzle6717 ! Thanks