react-native-dropdown-country-picker
v1.0.11
Published
React Native Dropdown Country Picker is same as that of HTML select list
Downloads
1,514
Maintainers
Readme
| | | | | | | --------------------------------------- | -------- | ---------- |---------- |---------- | | | | | |
🟢 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
OR
$ 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