react-native-dropdown-picker-dg

React Native Dropdown Picker

Light Weight and Robust Country Picker So Far.

• 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-picker

OR

$ 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