react-native-phonecode-picker

React Native components for picking phone number code. Supports 5 languages (Arab, German, French, Italian, Polish, Ukrainian, Russian, English, Spanish, Turkish)

Install

``
npm react-native-phonecode-picker --save
`
---

Minimum examples

`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 (

{ setVisible(true) }} />






)
};
`
---

Examples

`js
import { PhoneList } from 'react-native-phonecode-picker';

console.log('country->', country)} language='en'/>
`

API

Language = 'ru' | 'es' | 'en' | 'ua' | 'ar' | 'de' | 'el' | 'fr' | 'it' | 'pl' | 'tr'

$3

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'));
`

---

$3

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

`

---

$3

#### 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;
};
`
---

$3

#### 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;
};
`
---

$3

#### 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;
};
`
---

$3

#### Component props

`ts
interface Props {
searchString: string;
onChangeText: (text: string) => void;
placeholder?: string;
};
``
---

License

ISC