Installations

npm install rn-country-picker-modal

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.16.0

NPM Version

6.9.0 Pull Requests

Open

24

Total

200

Closed

83

Merged

93

Issues

Open

38

Total

334

Closed

296

Releases

11

v2.0.0

Published on 30 Jul 2020

v1.11.0

Published on 02 Jun 2020

v1.10.0

Published on 27 Dec 2019

v1.9.8

Published on 20 Nov 2019

v1.9.3

Published on 15 Nov 2019

v1.9.2

Published on 14 Nov 2019

View all 11 releases

Contributors

64

Unable to fetch Contributors

View all 64 contributors

Languages

2

TypeScript

JavaScript

TypeScript (82.64%)

JavaScript (17.36%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

xcarpentier

Download Statistics

Total Downloads

19,718

Last Day

1

Last Week

6

Last Month

15

Last Year

221

GitHub Statistics

1,083 Stars

360 Commits

814 Forks

19 Watching

11 Branches

64 Contributors

Maintainers

1

Package Meta Information

Latest Version

1.0.2

Package Id

rn-country-picker-modal@1.0.2

Size

496.45 kB

NPM Version

6.9.0

Node Version

10.16.0

Publised On

04 Jul 2019

Total Downloads

Cumulative downloads

Total Downloads

19,718

Last day

-66.7%

1

Compared to previous day

Last week

-14.3%

6

Compared to previous week

Last month

114.3%

15

Compared to previous month

Last year

-96.1%

221

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

8

@expo/vector-icons babel-preset-react-native-stage-0 fuse.js lodash node-emoji prop-types react-native-safe-area-view world-countries

Dev Dependencies

18

babel-cli babel-eslint babel-preset-latest babel-preset-react-native-stage-0 babel-preset-stage-2 eslint eslint-config-airbnb eslint-plugin-async eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-native flow-bin jest react react-native react-test-renderer

Versions

react-native-country-picker-modal

The best Country Picker for React Native.

Demo on Expo

Installation

1$ yarn add react-native-country-picker-modal

Basic Usage

1import DeviceInfo from 'react-native-device-info'
2
3import React, {
4  AppRegistry,
5  Component,
6  StyleSheet,
7  Text,
8  View,
9  StatusBarIOS,
10  PixelRatio
11} from 'react-native'
12import CountryPicker, {
13  getAllCountries
14} from 'react-native-country-picker-modal'
15
16const NORTH_AMERICA = ['CA', 'MX', 'US']
17
18class Example extends Component {
19  constructor(props) {
20    StatusBarIOS.setHidden(true)
21    super(props)
22    let userLocaleCountryCode = DeviceInfo.getDeviceCountry()
23    const userCountryData = getAllCountries()
24      .filter(country => NORTH_AMERICA.includes(country.cca2))
25      .filter(country => country.cca2 === userLocaleCountryCode)
26      .pop()
27    let callingCode = null
28    let cca2 = userLocaleCountryCode
29    if (!cca2 || !userCountryData) {
30      cca2 = 'US'
31      callingCode = '1'
32    } else {
33      callingCode = userCountryData.callingCode
34    }
35    this.state = {
36      cca2,
37      callingCode
38    }
39  }
40  render() {
41    return (
42      <View style={styles.container}>
43        <Text style={styles.welcome}>Welcome to Country Picker !</Text>
44        <CountryPicker
45          countryList={NORTH_AMERICA}
46          onChange={value => {
47            this.setState({ cca2: value.cca2, callingCode: value.callingCode })
48          }}
49          cca2={this.state.cca2}
50          translation="eng"
51        />
52        <Text style={styles.instructions}>press on the flag</Text>
53        {this.state.country && (
54          <Text style={styles.data}>
55            {JSON.stringify(this.state.country, null, 2)}
56          </Text>
57        )}
58      </View>
59    )
60  }
61}
62
63const styles = StyleSheet.create({
64  container: {
65    flex: 1,
66    justifyContent: 'center',
67    alignItems: 'center'
68  },
69  welcome: {
70    fontSize: 20,
71    textAlign: 'center',
72    margin: 10
73  },
74  instructions: {
75    fontSize: 12,
76    textAlign: 'center',
77    color: '#888',
78    marginBottom: 5
79  },
80  data: {
81    padding: 15,
82    marginTop: 10,
83    backgroundColor: '#ddd',
84    borderColor: '#888',
85    borderWidth: 1 / PixelRatio.get(),
86    color: '#777'
87  }
88})
89
90AppRegistry.registerComponent('example', () => Example)

Props

Key	Type	Default	Description
cca2	string	*required	code ISO 3166-1 alpha-2 (ie. FR, US, etc.)
translation	string	'eng'	The language display for the name of the country (deu, fra, hrv, ita, jpn, nld, por, rus, spa, svk, fin, zho, cym)
onChange	function	*required	The handler when a country is selected
onClose	function	*required	The handler when the close button is clicked
countryList	array	See cca2.json	List of custom CCA2 countries to render in the list. Use getAllCountries to filter what you need if you want to pass in a custom list
excludeCountries	array	[]	List of custom CCA2 countries you don't want to render
closeable	bool	false	If true, the CountryPicker will have a close button
filterable	bool	false	If true, the CountryPicker will have search bar
filterPlaceholder	string	'Filter'	The search bar placeholder
autoFocusFilter	bool	true	Whether or not the search bar should be autofocused
styles	object	{}	Override any style specified in the component (see source code)
disabled	bool	false	Whether or not the Country Picker onPress is disabled
transparent	bool	false	If true, the CountryPicker will render the modal over a transparent background
animationType	string	'none'	The handler that controls how the modal animates
closeButtonImage	React.element	default close button Image	Custom close button Image
flagType	string	'emoji' on iOS, 'flat' on Android	If set, overwrites the default OS based flag type.
hideAlphabetFilter	bool	false	If set to true, prevents the alphabet filter rendering
renderFilter	Function	undefined	If 'filterable={true}' and renderFilter function is provided, render custom filter component.*

*

1renderFilter = ({value, onChange, onClose}) => (
2  <CustomFilterComponent
3     value={value}
4     onChange={onChange}
5     onClose={onClose} 
6   />
7)

Dependencies

world-countries : https://www.npmjs.com/package/world-countries

FAQ

Is it supported and tested both on android and iOS?

YES

Is the data that is populated inside the list saved offline once I install your package?

YES : It used the world-countries package and image is stored into json and base64.

Tiers lib using this lib

react-native-phone-verification

> Your project?

Contribution

@xcapentier The main author.

Questions

Feel free to contact me or create an issue

made with ♥

Licence

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rn-country-picker-modal

rn-country-picker-modal

Installations

Developer Guide

No

CommonJS

10.16.0

6.9.0

Pull Requests

24

200

83

93

Issues

38

334

296

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

19,718

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

The best Country Picker for React Native.

Installation

Basic Usage

Props

Dependencies

FAQ

Is it supported and tested both on android and iOS?

Is the data that is populated inside the list saved offline once I install your package?

Tiers lib using this lib

See also

Contribution

Questions

Licence

10

10

6

0

0

0

0

0

0

0

2.5

/10