React-native-dropdown-country-picker NPM

🟢 React Native Dropdown Country Picker Similar as HTML Select List. It's not a modal.

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

$ yarn add react-native-dropdown-country-picker

😎 Displaying the country picker

import CountryCodeDropdownPicker from 'react-native-dropdown-country-picker'

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}}
      />
  )

};

For Live Demo (Expo Snack)

⭐ 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