Package Exports
- react-native-region-country-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-region-country-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-region-country-picker
Various country picker for iOS and Android
Demo

Getting started
$ npm install react-native-region-country-picker --save
OR
$ yarn add react-native-region-country-picker
Example
import CountryPicker from "react-native-region-country-picker";
let countryPickerRef = undefined;
// use countryPickerRef
countryPickerRef.open();
countryPickerRef.close();
<CountryPicker
countryPickerRef={(ref: any) => {
countryPickerRef = ref;
}}
enable={true}
darkMode={false}
countryCode={"US"}
containerConfig={{
showFlag: true,
showCallingCode: true,
showCountryName: true,
showCountryCode: true,
}}
modalConfig={{
showFlag: true,
showCallingCode: true,
showCountryName: true,
showCountryCode: true,
}}
onSelectCountry={(data: any) => {
console.log("DATA", data);
}}
onInit={(data: any) => {
console.log("DATA", data);
}}
onOpen={() => {
console.log("Open");
}}
onClose={() => {
console.log("Close");
}}
containerStyle={{
container: {},
flagStyle: {},
callingCodeStyle: {},
countryCodeStyle: {},
countryNameStyle: {},
}}
modalStyle={{
container: {},
searchStyle: {},
tileStyle: {},
itemStyle: {
itemContainer: {},
flagStyle: {},
countryCodeStyle: {},
countryNameStyle: {},
callingNameStyle: {},
},
}}
title={"Country"}
searchPlaceholder={"Search"}
showCloseButton={true}
showModalTitle={true}
/>;
Options
Props | Default | Options/Info |
---|---|---|
enable (Boolean) | true | Show component that choose the country. |
countryPickerRef (Function) | null | Get the open() and close() modal methods. |
darkMode (Boolean) | true | Dark mode for country modal. |
countryCode (String) | US | Country code displayed is selected at start. |
modalConfig (Object) | US | Config for component that choose the country. Note: See more details below. |
containerConfig (Object) | US | Config for component that choose the country. Note: See more details below. |
onSelectCountry (Function) | null | Called when the user chooses a country and returns information for the selected country. |
onInit (Function) | null | Called when the component set default country and returns information for the selected country. |
onOpen (Function) | null | Called when the open modal. |
onClose (Function) | null | Called when the close modal. |
title (String) | "Country" | The title of the modal select country. |
showCloseButton (Boolean) | true | Show the close button of the modal select country. |
showModalTitle (Boolean) | true | Show the title of the modal select country. |
containerStyle (Object) | null | Style for component that choose the country. Note: See more details below. |
modalStyle (Object) | null | Style for modal select country. Note: See more details below. |
renderChildren (Component) | null | The child component replaces the component element of the library |
containerStyle
Props | Default | Options/Info |
---|---|---|
container (Object) | style | Style for component container. |
flagStyle (Object) | style | Style for the icon country. |
callingCodeStyle (Object) | style | Style for country code. |
countryNameStyle (Object) | style | Style for country name. |
countryCodeStyle (Object) | style | Style for country code. |
modalConfig && containerConfig
Props | Default | Options/Info |
---|---|---|
showFlag (Boolean) | true | Show/hide Flag. |
showCallingCode (Boolean) | true | Show/hide Calling Code. |
showCountryName (Boolean) | true | Show/hide Country Name. |
showCountryCode (Boolean) | true | Show/hide Country Code. |
modalStyle
Props | Default | Options/Info |
---|---|---|
container (Object) | style | Style for modal container |
searchStyle (Object) | style | Style for modal search input |
tileStyle (Object) | style | Style for modal title |
itemStyle (Object) | style | Style for item select country Note: See more details below. |
itemStyle
Props | Default | Options/Info |
---|---|---|
itemContainer (Object) | style | Style for item country container |
flagStyle (Object) | style | Style for the icon country. |
callingCodeStyle (Object) | style | Style for country code. |
countryNameStyle (Object) | style | Style for country name. |
countryCodeStyle (Object) | style | Style for country code. |