Phone code picker
npm install react-native-phonecode-pickerReact Native components for picking phone number code. Supports 5 languages (Arab, German, French, Italian, Polish, Ukrainian, Russian, English, Spanish, Turkish)
```
npm react-native-phonecode-picker --save
---
`ts
import React, { useEffect, useState } from 'react';
import { View, Modal, SafeAreaView } from 'react-native';
import { PhoneInput, Countries, PhoneList } from 'react-native-phonecode-picker';
export const PhonePicker = () => {
const [phone, setPhone] = useState('');
const [country, setCountry] = useState({ countryName: '', phcode: '', key: '', mask: '', });
const [visible, setVisible] = useState(false);
useEffect(() => {
const country = Countries.getCountryByIso('en', 'UA');
setCountry(country);
}, []);
const onChooseCountry = (country: { countryName: string; phcode: string; key: string; mask: string; }) => {
setCountry(country);
setVisible(false);
};
return (
)
};
`
---
`js
import { PhoneList } from 'react-native-phonecode-picker';
`
Language = 'ru' | 'es' | 'en' | 'ua' | 'ar' | 'de' | 'el' | 'fr' | 'it' | 'pl' | 'tr'
getCountries - returns countries array filtered by search.
#### Class type
`ts`
interface ICountries {
getCountries: (lang: Language, search?: string) => Array
getCountryByIso: (lang: Language, key: string) => Array
getCountryByPhoneCode: (lang: Language, key: string) => Country | undefined;
};
#### Usage example
`js`
console.log(CountriesApi.getCountries('en'));
---
getFlag - returns source flag by country key.
getAllFlags - returns all source flag.
#### Class type
`ts`
interface IFlags {
getFlag: (key: string) => any;
getAllFlags: () => object;
};
#### Usage example
`js`
---
#### Component props
`ts`
interface Props {
language: Language;
isSearch?: boolean;
onPress: (country: { countryName: string; phcode: string; key: string; mask: string; }) => void;
containerStyle?: object;
itemContainerStyle?: object;
textStyle?: object;
placeholder?: string;
};
---
#### Component props
`ts`
interface Props {
country: { countryName: string; phcode: string; key: string; };
flag: sourseImage;
testID: string;
onPress: (country: { countryName: string; phcode: string; key: string; }) => void;
itemContainerStyle?: object;
textStyle?: object;
};
---
#### Component props
`ts`
interface Props {
country: { countryName: string; phcode: string; key: string; mask: string };
onPress: () => void;
value: string;
onChangeText: (formatted: string, extracted: string | undefined) => void;
style?: {
container?: ViewStyle,
flag?: ImageStyle;
textInput?: TextStyle,
textCode?: TextStyle,
phoneCodeContainer?: ViewStyle,
placeholderTextColor?: ColorValue,
};
inputProps: TextInputMaskProps;
showFlag?: boolean;
};
---
#### Component props
`ts``
interface Props {
searchString: string;
onChangeText: (text: string) => void;
placeholder?: string;
};
---
ISC