0.0.2 • Published 1 year ago
react-native-dropdown-picker-dg v0.0.2
- Equivalent to React Native Stock Component
 - Use the styles of your choice
 - Search the countries seamlessly
 - Option to add customizable input mobile field next to the Picker
 - Zero dependencies
 
Compatibility
| iOS | Android | Web | Expo | 
|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | 
🔌 Installation
$ npm install react-native-dropdown-country-pickerOR
$ yarn add react-native-dropdown-country-picker😎 Displaying the country picker
import CountryCodeDropdownPicker from "react-native-dropdown-picker-dg";
const App = () => {
  const [selected, setSelected] = React.useState("+91");
  const [country, setCountry] = React.useState("");
  const [phone, setPhone] = React.useState("");
  return (
    <CountryCodeDropdownPicker
      selected={selected}
      setSelected={setSelected}
      setCountryDetails={setCountry}
      phone={phone}
      setPhone={setPhone}
      countryCodeTextStyles={{ fontSize: 13 }}
    />
  );
};⭐ Props for the component
| Name | Type | Description | Default | 
|---|---|---|---|
| selected | state var | The default selected country dial code stored in state variable | N/A | 
| setSelected | Function | setState function to set the selected state variable | N/A | 
| setCountryDetails | Function | setState function to set additional country details in respective state variable (Optional) | N/A | 
| phone | state var | state variable if you want to display phone number field (Optional) | N/A | 
| setPhone | Funtion | setState function to set the phone state variable (Optional) | N/A | 
| countryCodeContainerStyles | style Object | style object to style the country code container (Optional) | N/A | 
| countryCodeTextStyles | style object | style object to style the text inside country code container (Optional) | N/A | 
| phoneStyles | style object | style object to style the text input of phone field (Optional) | N/A | 
| searchIcon | string | URL of the icon if you want to replace the search icon (Optional) | N/A | 
| closeIcon | string | URL of the icon if you want to replace the close icon (Optional) | N/A | 
| searchStyles | style object | style object to style the search field (Optional) | N/A | 
| searchTextStyles | style object | style object to style the search text input field (Optional) | N/A | 
| dropdownStyles | style object | style object to style the dropdown container (Optional) | N/A | 
| dropdownTextStyles | style object | style object to style the text inside dropdown container (Optional) | N/A |