Is there a way to only include one country code and no dropdown using react-native-phone-number-inpu-CodePudding

<PhoneInput
        ref={phoneInput}
        defaultValue={phoneNumber}
        defaultCode="GB"
        layout="second"
        withShadow
        filterProps
        autoFocus
        disableArrowIcon
        containerStyle={styles.phoneContainer}
        textContainerStyle={styles.textInput}
        onChangeFormattedText={(text) => {
          setphoneNumber(text);
        }}
      />

I am using the library 'react-native-phone-number-input' so a user can easily enter their number with the country code already there. Right now our app only allows users from the UK so I was wondering if there is a way to only have the 'GB' country code with no other country codes available?

I disabled the arrow icon but the user is still able to click on the country code and then given the option to select another.

CodePudding user response：

Hey you can do via passing countryPickerProps as.

<PhoneInput
        ref={phoneInput}
        defaultValue={phoneNumber}
        defaultCode="GB"
        layout="second"
        withShadow
        filterProps
        autoFocus
        disableArrowIcon
        containerStyle={styles.phoneContainer}
        textContainerStyle={styles.textInput}
        onChangeFormattedText={(text) => {
          setphoneNumber(text);
        }}
        countryPickerProps={{
          countryCodes: ['GB'],
        }}
      />

CodePudding user response：

I think you can create state for country code and set "GB" as default country code and pass this state to "defaultCode" and you can may be write the following code in "onChangeCountry" prop,

onChangeCountry = {(country)=>{
     if(country !== "GB"){
          //you can show toast or error message whatever you like
          console.log('---our service is currently only available in UK');
          return;
     }
     //set the state of country code
     setCountryCode(country)
}}