Installation

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

Example Code

CountryPicker Button show using countryCode

import {StyleSheet, Text, View} from 'react-native';
import React, {useRef} from 'react';
import CountryPicker, { PickerModalHandle } from 'react-native-country-picker';

const App = () => {
const countrypickerRef = useRef<PickerModalHandle>(null);
  return (
    <View style={{flex: 1, marginTop: 90}}>
      <Text
        onPress={() => {
          countrypickerRef.current?.open();
        }}
        style={{color: 'red', alignSelf: 'center', marginBottom: 20}}>
        OPEN
      </Text>

      <CountryPicker countryCode="IN" ref={countrypickerRef} />
    </View>
  );
};

export default App;

If you want only country Modal you can use CountryPickerModal

 const countrypickerRef = useRef<PickerModalHandle>(null);
const open=() => {
          countrypickerRef.current?.open();
        }
const close=() => {
          countrypickerRef.current?.close();
        }        

<CountryPickerModal
        lang="en"
        onSelect={({
          capital,
          currency,
          flag,
          iso2,
          iso3,
          name,
          phoneCode,
        }) => {
            console.log(
                 capital,
          currency,
          flag,
          iso2,
          iso3,
          name,
          phoneCode
            )
        }}
        ref={countrypickerRef}
      />

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 |