The best Country Picker for React Native.
Installation
$ yarn add react-native-country-picker-modal
Basic Usage
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 |
---|---|---|---|
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.* |
*
<CustomFilterComponent value=value onChange=onChange onClose=onClose />
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
See also
Contribution
- @xcapentier The main author.
Questions
Feel free to contact me or create an issue
made with ♥