rn-country-phone-picker

It's an international phone input with country selection and phone mask for React Native.

New Version Information

This package is a fork of the original react-native-intl-phone-input with several modifications and improvements. We've made changes to enhance functionality, improve performance, and add new features. As a result, we're continuing with a new version under this new package name.

1. Handling Default Country:

   • The code now checks if a defaultCountry prop is provided. If not, it uses the country with code 'TR' as the default.
   • It initializes the state with the default country's details like dial code, flag, and mask.

2. Input Mask and Phone Number Validation:

   • The onChangeText function handles user input in the phone number field.
   • It counts the number of digits ('9') in the mask and validates the entered phone number length against the mask.
   • It calls the onChangePropText function to update the parent component with the formatted phone number and validation status.

3. Country Selection Modal:

   • The code updates the modal visibility based on the disableCountryChange prop. If true, the modal won't be shown.
   • Selecting a country in the modal updates the state with the selected country's details and calls the onSelectCountry prop function if provided.
   • In case of errors, it falls back to the default country.

4. Country Filtering:

   • The filterCountries function filters the list of countries based on the search term entered by the user.
   • It searches by country name, dial code, or code (uppercase).

5. Minor UI Changes:

   • The code removes some commented-out styles, likely for the border color of the country modal items.

This usage creates a visual component for users to select their country

import CountryPhonePicker from "rn-country-phone-picker";

<CountryPhonePicker
  showCountryBox={true}  // Display the country selection box
  showInput={false}     // Hide the phone number input field
  phoneInputStyle={styles.selectBox}  // Style for the selection box
  containerStyle={styles.countryBox}  // Style for the entire country box
  flagStyle={styles.countryCode}      // Style for the country flag
  dialCodeTextStyle={styles.callingCode} // Style for the dial code text
  defaultCountry={countryCode}      // Set the default country based on `countryCode`
  lang={locale}                        // Set the language for country names based on `locale`
  filterText={I18n.t("countrySearchBoxPlaceholder", { locale })}  // Placeholder text for the country search box (localized)
  closeText={I18n.t("countrySearchBoxCloseText", { locale })}    // Text for the close button (localized)
  placeholder={I18n.t("countryBoxPlaceholder", { locale })}      // Placeholder text for the selection box (localized)
  onSelectCountry={onSelect}            // Callback function for country selection
/>

This usage creates a phone number input field where users can enter their phone number.

<CountryPhonePicker
  showInput={true}        // Display the phone number input field
  showCountryBox={false}  // Hide the country selection box
  inputProps={{
    autoFocus: !!(callingCode && countryCode),  // Set auto-focus if dial code and country code are provided
    editable: !!(callingCode && countryCode),   // Enable editing only if dial code and country code are provided
  }}
  numberOfLines={1}        // Limit to a single line
  placeholder={I18n.t("phoneNumberPlaceholder", { locale })}  // Localized placeholder text (e.g., "Phone number")
  phoneInputStyle={styles.input}            // Style for the input field (using `styles`)
  defaultCountry={countryCode}      // Set the default country based on `countryCode`
  value={phoneNumber}          // Set the initial phone number value
  onChangeText={onChangeText}     // Callback function for phone number changes
/>

Overall, the changes improve the functionality and error handling of the CountryPhonePicker component. It provides a better user experience for entering and managing international phone numbers.

Installation

Install the package via npm:

npm install rn-country-phone-picker

Usage

Import the component:

import CountryPhonePicker from 'rn-country-phone-picker';

Use the component:

onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
  console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
};

render() {
  return (
    <SafeAreaView>
      <CountryPhonePicker 
        onChangeText={this.onChangeText} 
        defaultCountry="TR" 
        renderAction={() => <Text>XX</Text>} 
      />
    </SafeAreaView>
  );
}

Custom Modal Example

renderCustomModal = (modalVisible, countries, onCountryChange) => (
  <Modal visible={modalVisible}>
    <SafeAreaView style={{ flex: 1 }}>
      <View>
        <View>
          <TextInput placeholder="Search" />
          <Text>🔍</Text>
        </View>
        <FlatList
          style={{ flex: 1 }}
          data={countries}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <TouchableWithoutFeedback onPress={() => onCountryChange(item.code)}>
              <Text>{item['your language code here for example tr']}</Text>
            </TouchableWithoutFeedback>
          )}
        />
      </View>
      <TouchableOpacity onPress={() => this.phoneInput.hideModal()}>
        <Text>CLOSE</Text>
      </TouchableOpacity>
    </SafeAreaView>
  </Modal>
)

render() {
  return (
    <CountryPhonePicker
      ref={(ref) => this.phoneInput = ref}
      customModal={this.renderCustomModal}
      defaultCountry="TR"
      lang="TR"
    />
  );
}

Supported Languages

| Code | Language | |------|----------| | TR | Turkish | | LT | Lithuanian | | EN | English | | RU | Russian |

Props

| Prop Name | Type | Default | Description | |-----------|------|---------|-------------| | lang | String | | Translate country name on modal | | placeholder | String | | Phone input placeholder | | defaultCountry | String | TR | Default country code | | mask | String | | Custom mask for phone number | | onChangeText | Function | | Callback when input text changes | | customModal | Function | | Generate custom modal for country selection | | phoneInputStyle | Style | | Style for the phone input TextInput | | containerStyle | Style | | Style for the container | | dialCodeTextStyle | Style | | Style for the dial code text | | flagStyle | Style | | Style for the country flag | | modalContainer | Style | | Style for the modal's SafeAreaView | | filterInputStyle | Style | | Style for the filter input in modal | | closeButtonStyle | Style | | Style for the close button text | | modalCountryItemCountryNameStyle | Style | | Style for country names in modal | | filterText | String | Filter | Placeholder text for filter input | | closeText | String | CLOSE | Text for close button | | disableCountryChange | Boolean | false | Disable country selection | | renderAction | Function | | Render component to the right of phone input | | placeholderTextColor | String | black | Color for placeholder text |

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.