 |  |  |  |  |
- 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
| iOS | Android | Web | Expo |
|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ |
$ npm install react-native-dropdown-country-picker OR
$ yarn add react-native-dropdown-country-pickerimport 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)
| 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 |
