react-native-m49-area-picker-modal
The area picker for apps that need to use the UN defined areas in their apps.
Installation
$ yarn add react-native-m49-area-picker-modal
Basic Usage
- Install
react-native
first
$ npm i react-native -g
- Initialization of a react-native project
$ react-native init myproject
- Then, edit
myproject/index.ios.js
, like this:
import DeviceInfo from 'react-native-device-info'; import React AppRegistry Component StyleSheet Text View StatusBarIOS PixelRatio from 'react-native';import CountryPicker getAllCountries from 'react-native-country-picker-modal'; const NORTH_AMERICA = 'CA' 'MX' 'US'; { StatusBarIOS; ; let userLocaleCountryCode = DeviceInfo; const userCountryData = ; let callingCode = null; let cca2 = userLocaleCountryCode; if !cca2 || !userCountryData cca2 = 'US'; callingCode = '1'; else callingCode = userCountryDatacallingCode; thisstate = cca2 callingCode ; } { return <View => <Text => Welcome to Country Picker ! </Text> <CountryPicker = = = ='eng' /> <Text => press on the flag </Text> thisstatecountry && <Text => JSON </Text> </View> ; } const styles = StyleSheet; AppRegistry;
Props
Key | Type | Default | Description |
---|---|---|---|
m49 | string | *required | code ISO 3166-1 alpha-2 (ie. FR, US, etc.) |
translation | string | 'eng' | The language display for the name of the country (en, fr) |
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 |
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.
Apps using this component
Questions
Feel free to contact me or create an issue