https://github.com/mmusaib/react-native-dropdown-country-picker
React Native Dropdown Country Select List
https://github.com/mmusaib/react-native-dropdown-country-picker
country dropdown expo expo-country-picker expo-dropdown expo-picker picker react-native react-native-country-picker react-native-dropdown react-native-picker
Last synced: 28 days ago
JSON representation
React Native Dropdown Country Select List
- Host: GitHub
- URL: https://github.com/mmusaib/react-native-dropdown-country-picker
- Owner: mmusaib
- License: mit
- Created: 2023-02-21T09:57:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T15:59:36.000Z (8 months ago)
- Last Synced: 2025-03-24T16:41:11.828Z (about 2 months ago)
- Topics: country, dropdown, expo, expo-country-picker, expo-dropdown, expo-picker, picker, react-native, react-native-country-picker, react-native-dropdown, react-native-picker
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-dropdown-country-picker
- Size: 42 KB
- Stars: 21
- Watchers: 1
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
|  |  |  |  | 
🏳️🌈 React Native Dropdown Country 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
```sh
$ npm install react-native-dropdown-country-picker
```
OR
```sh
$ yarn add react-native-dropdown-country-picker
```
# 😎 Displaying the country picker
```jsx
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(
)
};
```
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-dropdown-country-picker)
# ⭐ 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
# ▶️ Watch Tutorial Video -->
[](https://www.youtube.com/watch?v=ZstelmTWhjw)
