Installation

npm i react-native-country-phone-code-picker

Example Code

CountryPicker Button show using countryCode

1import {StyleSheet, Text, View} from 'react-native';
2import React, {useRef} from 'react';
3import CountryPicker, { PickerModalHandle } from 'react-native-country-picker';
4
5const App = () => {
6const countrypickerRef = useRef<PickerModalHandle>(null);
7  return (
8    <View style={{flex: 1, marginTop: 90}}>
9      <Text
10        onPress={() => {
11          countrypickerRef.current?.open();
12        }}
13        style={{color: 'red', alignSelf: 'center', marginBottom: 20}}>
14        OPEN
15      </Text>
16
17      <CountryPicker countryCode="IN" ref={countrypickerRef} />
18    </View>
19  );
20};
21
22export default App;

If you want only country Modal you can use CountryPickerModal

1 const countrypickerRef = useRef<PickerModalHandle>(null);
2const open=() => {
3          countrypickerRef.current?.open();
4        }
5const close=() => {
6          countrypickerRef.current?.close();
7        }        
8
9<CountryPickerModal
10        lang="en"
11        onSelect={({
12          capital,
13          currency,
14          flag,
15          iso2,
16          iso3,
17          name,
18          phoneCode,
19        }) => {
20            console.log(
21                 capital,
22          currency,
23          flag,
24          iso2,
25          iso3,
26          name,
27          phoneCode
28            )
29        }}
30        ref={countrypickerRef}
31      />

Available with different type of language

"ar" | "bg" | "cs" | "da" | "de" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "fi" | "fr" | "hr" | "hu" | "hy" | "it" | "ja" | "ko" | "lt" | "nl" | "no" | "pl" | "pt" | "ro" | "ru" | "sk" | "sl" | "sr" | "sv" | "th" | "uk" | "zh" | "zh-tw"

Component Props

Prop	type
onSelect	function
countryButtonProp	Object
countryCode	string
renderButton	ReactNode
showiso2	boolean
showiso3	boolean
showcurrency	boolean
showphoneCode	boolean
showflag	boolean
showName	boolean