npmpackage.info

Gathering detailed insights and metrics for react-native-international-phone-number_omur

react-native-international-phone-number_omur - 1.1.3 | npmpackage.info

react-native-international-phone-number_omur

1.1.3

63.12 kB

Installations

npm install react-native-international-phone-number_omur

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.5.1

NPM Version

9.8.0 Releases

Unable to fetch releases

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

Maintainers

Package Meta Information

Latest Version

1.1.3

Package Id

react-native-international-phone-number_omur@1.1.3

Unpacked Size

63.12 kB

Size

12.48 kB

File Count

NPM Version

9.8.0

Node Version

20.5.1

Published on

Aug 25, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Native International Phone Number Input

Try it out

List of Contents

Installation
Features
Basic Usage
Basic Usage - Typescript
Intermediate Usage - Typescrypt + Default Phone Number Value
Advanced Usage - React Hook Form + Typescript + Default Phone Number Value
Customizing Lib
Lib Props
Lib Functions
Contributing
License

Installation

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

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

AND

Update your metro.config.js file:

1module.exports = {
2 ...
3 resolver: {
4   sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
5 },
6};

Features

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

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: undefined,
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} (${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(undefined);
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} (${selectedCountry?.cca2})`}
29        </Text>
30        <Text>
31          Phone Number:{' '}
32          {`${selectedCountry?.callingCode} ${inputValue}`}
33        </Text>
34      </View>
35    </View>
36  );
37}

Custom Default Flag:

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

Basic Usage - Typescript

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

Intermediate Usage - Typescript + Default Phone Number Value

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

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).

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

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  <PhoneInput
2    ...
3    withDarkTheme
4  />

Custom Lib Styles:

1  <PhoneInput
2    ...
3    inputStyle={{
4      color: '#F3F3F3',
5    }}
6    containerStyle={{
7      backgroundColor: '#575757',
8      borderWidth: 1,
9      borderStyle: 'solid',
10      borderColor: '#F3F3F3',
11      marginVertical: 16,
12    }}
13    flagContainerStyle={{
14      borderTopLeftRadius: 7,
15      borderBottomLeftRadius: 7,
16      backgroundColor: '#808080',
17      justifyContent: 'center',
18    }}
19  />

Phone Input Disabled Mode:

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

Country Modal Disabled Mode:

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

Custom Disabled Mode Style:

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

Component Props (PhoneInputProps)

defaultValue?: string;
value: string;
onChangePhoneNumber: (phoneNumber: string) => void;
selectedCountry: undefined | ICountry;
onChangeSelectedCountry: (country: ICountry) => void;
disabled?: boolean;
modalDisabled?: boolean;
withDarkTheme?: boolean;
containerStyle?: StyleProp<ViewStyle>;
flagContainerStyle?: StyleProp<ViewStyle>;
inputStyle?: StyleProp<TextStyle>;

Functions

getAllCountries: () => ICountry[];
getCountryByPhoneNumber: (phoneNumber: string) => ICountry | undefined;
getCountryByCca2: (phoneNumber: string) => ICountry | undefined;
getCountriesByCallingCode: (phoneNumber: string) => ICountry[] | undefined;
getCountriesByName: (phoneNumber: string) => ICountry[] | undefined;

Contributing

Fork or clone this repository

1  $ git clone https://github.com/Omurbek1/react-native-internation-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.

react-native-international-phone-number_omur

Installations

Developer Guide

Yes

CommonJS

20.5.1

9.8.0

Releases

Unable to fetch releases

Download Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Native International Phone Number Input

Try it out

List of Contents

Installation

Features

Basic Usage

Class Component:

Function Component:

Custom Default Flag:

Basic Usage - Typescript

Intermediate Usage - Typescript + Default Phone Number Value

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

Customizing lib

Dark Mode:

Custom Lib Styles:

Phone Input Disabled Mode:

Country Modal Disabled Mode:

Custom Disabled Mode Style:

Component Props (PhoneInputProps)

Functions

Contributing

License