0.0.2 • Published 1 year ago
react-native-country-phone-code-picker v0.0.2
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 |