npmpackage.info

Gathering detailed insights and metrics for tepecklb_react-native-international-phone-number

tepecklb_react-native-international-phone-number

fork of react-native-international-phone-number to get a quickfix while the PR is not accepted

0.7.6

ISC

JavaScript

1,080

Installations

npm install tepecklb_react-native-international-phone-number

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

trying to publish fork

0.7.6b

Published on 21 Jun 2024

fix on AT masks

0.7.6a

Published on 21 Jun 2024

View all 2 releases

Developer

tepecklb

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.12.1

NPM Version

10.5.1 Statistics

154 Commits

1 Branches

1 Contributors

Updated on 21 Jun 2024

Languages

JavaScript (97.03%)

TypeScript (2.97%)

Total Downloads

Cumulative downloads

Total Downloads

1,080

Last day

Compared to previous day

Last week

21.9%

Compared to previous week

Last month

-6.5%

203

Compared to previous month

Last year

1,080

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React Native International Phone Number Input

Try it out

Demo

List of Contents

Old Versions
Installation
Additional Config to Web
Features
Basic Usage
Intermediate Usage
- Typescript + useRef
Advanced Usage
- React-Hook-Form + Typescript + Default Phone Number Value
Customizing Lib
Lib Props
Lib Functions
Supported languages
Contributing
License

Old Versions

Installation

1$ npm i --save react-native-international-phone-number

1$ yarn add react-native-international-phone-number

Additional config to `Web`

Using React Native CLI:

create a react-native.config.js file at the root of your react-native project with:

1 module.exports = {
2  project: {
3    ios: {},
4    android: {},
5  },
6  assets: [
7    './node_modules/react-native-international-phone-number/lib/assets/fonts',
8  ],
9 };

Then link the font to your native projects with:

1npx react-native-asset

Using Expo:

Install expo-fonts: npx expo install expo-font;
Initialize the expo-font:

1 import { useFonts } from 'expo-font';
2
3 ...
4
5 useFonts({
6    'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2'),
7  });
8
9 ...

Observation: you need to recompile your project after adding new fonts.

Features

📱 Works with iOS, Android (Cross-platform), Expo and Web;
🎨 Lib with UI customizable;
🌎 Phone Input Mask according with the selected country;
👨‍💻 Functional and class component support;
🈶 21 languages supported.

Basic Usage

Class Component:

1import React from 'react';
2import { View, Text } from 'react-native';
3import PhoneInput from 'react-native-international-phone-number';
4
5export class App extends React.Component {
6  constructor(props) {
7    super(props)
8    this.state = {
9      selectedCountry: null,
10      inputValue: ''
11    }
12  }
13
14  function handleSelectedCountry(country) {
15    this.setState({
16      selectedCountry: country
17    })
18  }
19
20  function handleInputValue(phoneNumber) {
21    this.setState({
22      inputValue: phoneNumber
23    })
24  }
25
26  render(){
27    return (
28      <View style={{ width: '100%', flex: 1, padding: 24 }}>
29        <PhoneInput
30          value={this.state.inputValue}
31          onChangePhoneNumber={this.handleInputValue}
32          selectedCountry={this.state.selectedCountry}
33          onChangeSelectedCountry={this.handleSelectedCountry}
34        />
35        <View style={{ marginTop: 10 }}>
36          <Text>
37            Country:{' '}
38            {`${this.state.selectedCountry?.name?.en} (${this.state.selectedCountry?.cca2})`}
39          </Text>
40          <Text>
41            Phone Number: {`${this.state.selectedCountry?.callingCode} ${this.state.inputValue}`}
42          </Text>
43        </View>
44      </View>
45    );
46  }
47}

Function Component:

1import React, { useState } from 'react';
2import { View, Text } from 'react-native';
3import PhoneInput from 'react-native-international-phone-number';
4
5export default function App() {
6  const [selectedCountry, setSelectedCountry] = useState(null);
7  const [inputValue, setInputValue] = useState('');
8
9  function handleInputValue(phoneNumber) {
10    setInputValue(phoneNumber);
11  }
12
13  function handleSelectedCountry(country) {
14    setSelectedCountry(country);
15  }
16
17  return (
18    <View style={{ width: '100%', flex: 1, padding: 24 }}>
19      <PhoneInput
20        value={inputValue}
21        onChangePhoneNumber={handleInputValue}
22        selectedCountry={selectedCountry}
23        onChangeSelectedCountry={handleSelectedCountry}
24      />
25      <View style={{ marginTop: 10 }}>
26        <Text>
27          Country:{' '}
28          {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`}
29        </Text>
30        <Text>
31          Phone Number:{' '}
32          {`${selectedCountry?.callingCode} ${inputValue}`}
33        </Text>
34      </View>
35    </View>
36  );
37}

Typescript

1import React, { useState } from 'react';
2import { View, Text } from 'react-native';
3import PhoneInput, {
4  ICountry,
5} from 'react-native-international-phone-number';
6
7export default function App() {
8  const [selectedCountry, setSelectedCountry] =
9    useState<null | ICountry>(null);
10  const [inputValue, setInputValue] = useState<string>('');
11
12  function handleInputValue(phoneNumber: string) {
13    setInputValue(phoneNumber);
14  }
15
16  function handleSelectedCountry(country: ICountry) {
17    setSelectedCountry(country);
18  }
19
20  return (
21    <View style={{ width: '100%', flex: 1, padding: 24 }}>
22      <PhoneInput
23        value={inputValue}
24        onChangePhoneNumber={handleInputValue}
25        selectedCountry={selectedCountry}
26        onChangeSelectedCountry={handleSelectedCountry}
27      />
28      <View style={{ marginTop: 10 }}>
29        <Text>
30          Country:{' '}
31          {`${selectedCountry?.name?.en} (${selectedCountry?.cca2})`}
32        </Text>
33        <Text>
34          Phone Number:{' '}
35          {`${selectedCountry?.callingCode} ${inputValue}`}
36        </Text>
37      </View>
38    </View>
39  );
40}

Intermediate Usage

Typescript + useRef

1import React, { useRef } from 'react';
2import { View, Text } from 'react-native';
3import PhoneInput, {
4  ICountry,
5  IPhoneInputRef,
6} from 'react-native-international-phone-number';
7
8export default function App() {
9  const phoneInputRef = useRef<IPhoneInputRef>(null);
10
11  function onSubmitRef() {
12    Alert.alert(
13      'Intermediate Result',
14      `${phoneInputRef.current?.selectedCountry?.callingCode} ${phoneInputRef.current?.value}`
15    );
16  }
17
18  return (
19    <View style={{ width: '100%', flex: 1, padding: 24 }}>
20      <PhoneInput ref={phoneInputRef} />
21      <TouchableOpacity
22        style={{
23          width: '100%',
24          paddingVertical: 12,
25          backgroundColor: '#2196F3',
26          borderRadius: 4,
27          marginTop: 10,
28        }}
29        onPress={onSubmit}
30      >
31        <Text
32          style={{
33            color: '#F3F3F3',
34            textAlign: 'center',
35            fontSize: 16,
36            fontWeight: 'bold',
37          }}
38        >
39          Submit
40        </Text>
41      </TouchableOpacity>
42    </View>
43  );
44}

Observation: Don't use the useRef hook combined with the useState hook to manage the phoneNumber and selectedCountry values. Instead, choose to use just one of them (useRef or useState).

Advanced Usage

React-Hook-Form + Typescript + Default Phone Number Value

1import React, { useState, useEffect } from 'react';
2import { View, Text, TouchableOpacity, Alert } from 'react-native';
3import PhoneInput, {
4  ICountry,
5} from 'react-native-international-phone-number';
6import { Controller, FieldValues } from 'react-hook-form';
7
8interface FormProps extends FieldValues {
9  phoneNumber: string;
10}
11
12export default function App() {
13  const [selectedCountry, setSelectedCountry] = useState<
14    undefined | ICountry
15  >(undefined);
16
17  function handleSelectedCountry(country: ICountry) {
18    setSelectedCountry(country);
19  }
20
21  function onSubmit(form: FormProps) {
22    Alert.alert(
23      'Advanced Result',
24      `${selectedCountry?.callingCode} ${form.phoneNumber}`
25    );
26  }
27
28  return (
29    <View style={{ width: '100%', flex: 1, padding: 24 }}>
30      <Controller
31        name="phoneNumber"
32        control={control}
33        render={({ field: { onChange, value } }) => (
34          <PhoneInput
35            defaultValue="+12505550199"
36            value={value}
37            onChangePhoneNumber={onChange}
38            selectedCountry={selectedCountry}
39            onChangeSelectedCountry={handleSelectedCountry}
40          />
41        )}
42      />
43      <TouchableOpacity
44        style={{
45          width: '100%',
46          paddingVertical: 12,
47          backgroundColor: '#2196F3',
48          borderRadius: 4,
49        }}
50        onPress={handleSubmit(onSubmit)}
51      >
52        <Text
53          style={{
54            color: '#F3F3F3',
55            textAlign: 'center',
56            fontSize: 16,
57            fontWeight: 'bold',
58          }}
59        >
60          Submit
61        </Text>
62      </TouchableOpacity>
63    </View>
64  );
65}

Observations:

You need to use a default value with the following format: +(country callling code)(area code)(number phone)

The lib has the mechanism to set the flag and mask of the supplied defaultValue. However, if the supplied defaultValue does not match any international standard, the input mask of the defaultValue will be set to "BR" (please make sure that the default value is in the format mentioned above).

Customizing lib

Dark Mode:

1  ...
2  <PhoneInput
3    ...
4    theme="dark"
5  />
6  ...

Custom Lib Styles:

1  ...
2  <PhoneInput
3    ...
4    phoneInputStyles={{
5      container: {
6        backgroundColor: '#575757',
7        borderWidth: 1,
8        borderStyle: 'solid',
9        borderColor: '#F3F3F3',
10      },
11      flagContainer: {
12        borderTopLeftRadius: 7,
13        borderBottomLeftRadius: 7,
14        backgroundColor: '#808080',
15        justifyContent: 'center',
16      },
17      flag: {},
18      caret: {
19        color: '#F3F3F3',
20        fontSize: 16,
21      },
22      divider: {
23        backgroundColor: '#F3F3F3',
24      }
25      callingCode: {
26        fontSize: 16,
27        fontWeight: 'bold',
28        color: '#F3F3F3',
29      },
30      input: {
31        color: '#F3F3F3',
32      },
33    }}
34    modalStyles={{
35      modal: {
36        backgroundColor: '#333333',
37        borderWidth: 1,
38      },
39      backdrop: {},
40      divider: {
41        backgroundColor: 'transparent',
42      },
43      countriesList: {},
44      searchInput: {
45        borderRadius: 8,
46        borderWidth: 1,
47        borderColor: '#F3F3F3',
48        color: '#F3F3F3',
49        backgroundColor: '#333333',
50        paddingHorizontal: 12,
51        height: 46,
52      },
53      countryButton: {
54        borderWidth: 1,
55        borderColor: '#F3F3F3',
56        backgroundColor: '#666666',
57        marginVertical: 4,
58        paddingVertical: 0,
59      },
60      noCountryText: {},
61      noCountryContainer: {},
62      flag: {
63        color: '#FFFFFF',
64        fontSize: 20,
65      },
66      callingCode: {
67        color: '#F3F3F3',
68      },
69      countryName: {
70        color: '#F3F3F3',
71      },
72    }}
73  />
74  ...

Custom Caret:

1  ...
2  <PhoneInput
3    ...
4    customCaret={<Icon name="chevron-down" size={30} color="#000000" />}  // react-native-vector-icons
5  />
6  ...

Custom Placeholders/Messages:

1  ...
2  <PhoneInput
3    ...
4    placeholder="Custom Phone Input Placeholder"
5    modalSearchInputPlaceholder="Custom Modal Search Input Placeholder"
6    modalNotFoundCountryMessage="Custom Modal Not Found Country Message"
7  />
8  ...

Custom Modal Height:

1  ...
2  <PhoneInput
3    ...
4    modalHeight="80%"
5  />
6  ...

Country Modal Disabled Mode:

1  ...
2  <PhoneInput
3    ...
4    modalDisabled
5  />
6  ...

Phone Input Disabled Mode:

1  ...
2  <PhoneInput
3    ...
4    disabled
5  />
6  ...

Custom Disabled Mode Style:

1  const [isDisabled, setIsDisabled] = useState<boolean>(true)
2  ...
3  <PhoneInput
4    ...
5    containerStyle={ isDisabled ? { backgroundColor: 'yellow' } : {} }
6    disabled={isDisabled}
7  />
8  ...

Change Default Language:

1  ...
2  <PhoneInput
3    ...
4    language="pt"
5  />
6  ...

Custom Phone Mask:

1  ...
2  <PhoneInput
3    ...
4    customMask={['#### ####', '##### ####']}
5  />
6  ...

Custom Default Flag/Country:

1  ...
2  <PhoneInput
3    ...
4    defaultCountry="CA"
5  />
6  ...

Default Phone Number Value:

1  ...
2  <PhoneInput
3    ...
4    defaultValue="+12505550199"
5  />
6  ...

Observations:

You need to use a default value with the e164 format: +(country callling code)(area code)(number phone)

The lib has the mechanism to set the flag and mask of the supplied defaultValue. However, if the supplied defaultValue does not match any international standard, the input mask of the defaultValue will be set to "BR" (please make sure that the default value is in the format mentioned above).

Show Only Some Countries Inside Modal:

1  ...
2  <PhoneInput
3    ...
4    showOnly={['BR', 'PT', 'CA', 'US']}
5  />
6  ...

Exclude Some Countries Inside Modal:

1  ...
2  <PhoneInput
3    ...
4    excludedCountries={['BR', 'PT', 'CA', 'US']}
5  />
6  ...

Show Popular Countries at the Top of the Countries List Inside Modal:

1  ...
2  <PhoneInput
3    ...
4    popularCountriess={['BR', 'PT', 'CA', 'US']}
5  />
6  ...

Component Props (PhoneInputProps)

language?: ILanguage;
customMask?: string[];
defaultValue?: string;
value?: string;
onChangePhoneNumber?: (phoneNumber: string) => void;
defaultCountry?: ICountryCca2;
selectedCountry?: ICountry;
onChangeSelectedCountry?: (country: ICountry) => void;
showOnly?: ICountryCca2[];
excludedCountries?: ICountryCca2[];
popularCountries?: ICountryCca2[];
disabled?: boolean;
modalDisabled?: boolean;
modalHeight?: number | string;
theme?: ITheme;
phoneInputStyles?: IPhoneInputStyles;
modalStyles?: IModalStyles;
modalSearchInputPlaceholder?: string;
modalSearchInputPlaceholderTextColor?: string;
modalSearchInputSelectionColor?: string;
modalNotFoundCountryMessage?: string;
customCaret?: ReactNode;
ref?: Ref<IPhoneInputRef>

Functions

getAllCountries: () => ICountry[];
getCountriesByCallingCode: (callingCode: string) => ICountry[] | undefined;
getCountryByCca2: (cca2: string) => ICountry | undefined;
getCountriesByName: (name: string, language: ILanguage) => ICountry[] | undefined;
getCountryByPhoneNumber: (phoneNumber: string) => ICountry | undefined;

🎌 Supported languages 🎌

1  "name": {
2    "bg": "Bulgarian",
3    "by": "Belarusian",
4    "cn": "Chinese",
5    "cz": "Czech",
6    "de": "German",
7    "ee": "Estonian",
8    "el": "Greek",
9    "en": "English",
10    "es": "Espanol",
11    "fr": "French",
12    "he": "Hebrew",
13    "it": "Italian",
14    "jp": "Japanese",
15    "nl": "Dutch",
16    "pl": "Polish",
17    "pt": "Portuguese",
18    "ro": "Romanian",
19    "ru": "Russian",
20    "ua": "Ukrainian",
21    "zh": "Chinese (Simplified)",
22    "ar": "Arabic"
23  },

Contributing

Fork or clone this repository

1  $ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git

Repair, Update and Enjoy 🛠️🚧⚙️
Create a new PR to this repository

License

ISC

Thanks for stopping by! 😁

No vulnerabilities found.

No security vulnerabilities found.

tepecklb_react-native-international-phone-number

Installations

Pull Requests

0

0

0

Issues

0

0

0

Releases

Developer

Developer Guide

CommonJS

Yes

20.12.1

10.5.1

Statistics

Languages

Total Downloads

1,080

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Native International Phone Number Input

Try it out

List of Contents

Old Versions

Installation

Additional config to Web

Features

Basic Usage

Class Component:

Function Component:

Typescript

Intermediate Usage

Typescript + useRef

Advanced Usage

React-Hook-Form + Typescript + Default Phone Number Value

Customizing lib

Dark Mode:

Custom Lib Styles:

Custom Caret:

Custom Placeholders/Messages:

Custom Modal Height:

Country Modal Disabled Mode:

Phone Input Disabled Mode:

Custom Disabled Mode Style:

Change Default Language:

Custom Phone Mask:

Custom Default Flag/Country:

Default Phone Number Value:

Show Only Some Countries Inside Modal:

Exclude Some Countries Inside Modal:

Show Popular Countries at the Top of the Countries List Inside Modal:

Component Props (PhoneInputProps)

Functions

🎌 Supported languages 🎌

Contributing

License

Additional config to `Web`