rn-country-picker

Country picker for react native support both platform IOs and android

Important Note

While selecting the USA It showed the wrong flag icon because both countries have the same country code so we added a new prop that is the countryId field.

1. For USA countryId is 231
2. For Canada, countryId is 38
3. For Anguilla, countryId is 7
4. For Antarctica, countryId is 8

Features

1. Lightweight country picker npm.
2. Cross-platform compatibility android and ios both.
3. Search country using country code or country code.
4. Support multiple language search and list items.
5. Dynamically change dropdown, search, and back button images.
6. Customizable search bar style and text colors.
7. Change animation(Slide, fade, none).

Installation

npm i rn-country-picker

Usage

import React, { useState } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import CountryPicker from "./src/countryPicker/CountryPicker";

const App = () => {
  const [countryCode, setCountryCode] = useState<string>("92");

  const selectedValue = (value) => {
    setCountryCode(value?.callingCode);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>React Native Country Picker</Text>

      <CountryPicker
        animationType={"slide"}
        language="en"
        countryCode={countryCode}
        selectedValue={selectedValue}
      />
    </View>
  );
};
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  titleText: {
    color: "#000",
    fontSize: 25,
    marginBottom: 25,
    fontWeight: "bold",
  },

});

Properties

| Prop | Default | Type | Description | Required/Optional | | ----------------------------- | ------- | ------------------------ | -------------------------------------------------------------- | ----------------- | | countryId | - | string | Default and selected country Id | Required | | countryCode | - | string | Default and selected country code | Required | | searchBarPlaceHolder | - | string | Change search bar placeholder | Optional | | searchBarStyle | - | object | Customize search bar text input style | Optional | | pickerContainerStyle | - | object | Customize picker style | Required | | searchBarContainerStyle. | - | object | Customize search bar style | Optional | | searchInputStyle | - | object | Customize search bar Text Input style | Optional | | searchBarPlaceholderTextColor | - | object | Customize search bar placeholder color | Optional | | countryNameTextStyle | - | object | Customize country name text style(List View) | Optional | | selectedCountryTextStyle | - | object | Customize selected label text style | Optional | | dropDownIconStyle | - | object | Change dropdown arrow style | Optional | | countryFlagStyle | - | object | Customize flag style | Optional | | searchIcon | - | png/jpg | Add custom search Icon | Optional | | dropDownIcon | - | png/jpg | Add custom drop down icon | Optional | | selectedValue | - | function | callback function received value from list selection | Required | | animationType | - | string [slide,none,fade] | Change Modal Animation | Optional | | hideCountryCode | - | bool | hide country code from component only show flag | Optional | | hideCountryFlag | - | bool | hide country flag from component | Optional | | disable | - | bool | Disable picker | Optional | | language | en | string | Change the language of list | required |