https://github.com/simformsolutionspvtltd/react-native-country-code-select
A React Native component that allows users to select a country code ✨ 🔥
https://github.com/simformsolutionspvtltd/react-native-country-code-select
country-code country-codes country-flags country-list country-picker countrycodes countrynames react react-native typescript
Last synced: about 1 month ago
JSON representation
A React Native component that allows users to select a country code ✨ 🔥
- Host: GitHub
- URL: https://github.com/simformsolutionspvtltd/react-native-country-code-select
- Owner: SimformSolutionsPvtLtd
- License: mit
- Created: 2022-05-11T05:59:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-12T08:27:04.000Z (about 3 years ago)
- Last Synced: 2025-08-15T15:45:18.315Z (about 2 months ago)
- Topics: country-code, country-codes, country-flags, country-list, country-picker, countrycodes, countrynames, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 8.44 MB
- Stars: 44
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-country-code-select
[](https://www.npmjs.org/package/react-native-country-code-select) [](https://www.android.com) [](https://developer.apple.com/ios) [](https://opensource.org/licenses/MIT)
---
This is a pure javascript library for selecting a country with search and filter functionality
This library is easy to use and provides you full customization, so you can customize component based on your need
## 🎬 Preview
---
---
## Quick Access
[Installation](#installation) | [CountryPicker](#countrypicker) | [Methods](#methods) | [Properties](#props) | [Example](#example) | [License](#license)
## Installation
##### 1. Install library, react-native-reanimated and react-native-gesture-handler
```bash
$ npm install react-native-country-code-select react-native-reanimated react-native-gesture-handler
# --- or ---
$ yarn add react-native-country-code-select react-native-reanimated react-native-gesture-handler
```
##### 2. Install cocoapods in the ios project
```bash
cd ios && pod install
```
> Note: Make sure to wrap your root component / entry point with [GestureHandleRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/)
```bash
import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default const App = () => {
return {/* content */};
}
```
> Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`
```bash
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
##### Know more about [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler), [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)
---
## Compatibility
---
Only supports `react-native` `0.62+`
---
## CountryPicker
#### 🎬 Preview
---
#### Basic usage
---
```jsx
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { CountryPickerModal } from 'react-native-country-code-select';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const App = () => {
const [isVisible, setIsVisible] = useState(false);
const [selectedValue, setSelectedValue] = useState({});
return (
{JSON.stringify(selectedValue, null, 2)}
{'-- --'}
setIsVisible((oldStatus) => !oldStatus)}
>
Select Country
setIsVisible(false)}
{...{ onSelect: setSelectedValue }}
/>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e6d7b8',
},
textView: {
width: '60%',
backgroundColor: '#261a08',
padding: 20,
borderWidth: 1,
borderRadius: 20,
overflow: 'hidden',
color: '#ffffff',
fontWeight: '500',
},
viewStyle: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
selectCountryButton: {
width: '60%',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 15,
backgroundColor: '#261a08',
borderRadius: 20,
},
selectCountry: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: 16,
},
separator: {
marginVertical: 20,
letterSpacing: 2,
fontSize: 15,
fontWeight: 'bold',
},
});
```
---
## Selected Country Data
```javascript
{
name: string;
flag: string;
countryInitials: string;
region: string;
subregion: string;
callingCode: string[];
currency: string[];
}
```
## Methods
> | Name | Default | Type |
Description |
> | :------------- | :------ | :------- | :----------------------------------------------------------------- |
> | **onClose\*** | - | function | Close modal callback function |
> | **onSelect\*** | - | function | Select country callback function that returns the selected country |
## Props
> | Name | Default | Type |
Description |
> | :---------------------------- | :-----------------------------------: | :------------------ | ----------------------------------------------------------- |
> | **isVisible\*** | false | boolean | Hide / show country list modal |
> | customBackImageSource | Image | ImageSourcePropType | Custom close modal image source |
> | customBackImageStyle | {} | ImageStyle | Close modal image style |
> | isFlagVisible | true | boolean | If false, Country flag will be hidden |
> | isAlphabetsVisible | true | boolean | If false, Quick country fliter will be hidden |
> | headerSearchPlaceholder | "Enter Country" | string | Custom search placeholder text |
> | isSearchInputVisible | true | boolean | If false, Search input will be hidden |
> | renderCustomSearchInput | - | function | Render custom search input |
> | searchHeaderInputStyle | {} | ViewStyle | Search input style |
> | isCloseButtonVisible | false | boolean | If true, Modal close button will be visible |
> | searchHeaderProps | {} | TextInputProps | Search input props |
> | countryListTitleStyle | {} | TextStyle | Country name / title style |
> | modalContentStyle | {} | ViewStyle | Modal content style |
> | modalContainerStyle | {} | ViewStyle | Modal container style |
> | customRowStyle | {} | ViewStyle | Country list item / row style |
> | customAlphabetsStyles | {} | TextStyle | Quick filter (A-Z) text style |
> | customAlphabetContainerStyles | {} | ViewStyle | Quick filter (A-Z) container style |
> | emptyText | `Oops, there is no country available` | string | Custom message to show when there's no search result found |
> | emptyTextStyle | {} | TextStyle | Custom empty message style |
> | emptyContainerStyles | {} | ViewStyle | Custom empty message container style |
> | renderCustomEmptyComponent | - | function | Render custom component when there's no search result found |
> | customCloseButton | - | function | Render custom modal close button |
> | renderSearchInputClear | - | function | Render custom cancel image in search input |
> | handleStyle | {} | ViewStyle | View style to be applied to the handle bar component |
> | handleComponent | - | function | Render custom handle bar component |
---
## Example
A full working example project is here [Example](./example/src/App.tsx)
```sh
$ yarn
$ yarn example ios // For ios
$ yarn example android // For Android
```
## Find this library useful? ❤️
Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/stargazers) for this repository.⭐
## Bugs / Feature requests / Feedbacks
For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=bug&late=BUG_REPORT.md&title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-country-code-select/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEEDBACK%5D%3A)
## 🤝 How to Contribute
We'd love to have you improve this library or fix a problem 💪
Check out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.
## License
- [MIT License](LICENSE)