Gathering detailed insights and metrics for co-react-native-international-phone-number
Gathering detailed insights and metrics for co-react-native-international-phone-number
⚛️ International mobile phone input component for React Native 📱
Installations
npm install co-react-native-international-phone-numberDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.16.0
NPM Version
8.13.1
Score
43.3
Supply Chain
57.9
Quality
67.8
Maintenance
50
Vulnerability
93.6
License
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
guiliuri13
Download Statistics
Total Downloads
726
Last Day
2
Last Week
14
Last Month
42
Last Year
348
GitHub Statistics
ISC License
2 Stars
37 Commits
1 Branches
1 Contributors
Updated on Nov 08, 2023
Maintainers
2
Package Meta Information
Latest Version
0.0.2
Package Id
co-react-native-international-phone-number@0.0.2
Unpacked Size
67.16 kB
Size
18.46 kB
File Count
10
NPM Version
8.13.1
Node Version
16.16.0
Published on
Mar 21, 2023
Total Downloads
Cumulative downloads
Total Downloads
726
Last Day
-60%
2
Compared to previous day
Last Week
-12.5%
14
Compared to previous week
Last Month
16.7%
42
Compared to previous month
Last Year
71.4%
348
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
1
React Native International Phone Number Input
Table of Contents
- Installation
- Features
- Basic Usage
- With Function Component
- With Class Component
- Basic Usage - Typescript
- Intermediate Usage - Typescrypt + Default Phone Number Value
- Advanced Usage - React Hook Form + Typescript + Default Phone Number Value
- Customizing Lib
- Theme Mode: Light (default) and Dark
- Custom Lib Styles
- Disabled Mode
- Custom Disabled Mode Style
- Lib Props
- Contributing
- License
Installation
1$ npm i --save react-native-international-phone-number
OR
1$ yarn add react-native-international-phone-number
AND
Update your
metro.config.jsfile: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
- 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}
- 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.inputValue} 31 onChangePhoneNumber={this.handleInputValue} 32 selectedCountry={this.selectedCountry} 33 onChangeSelectedCountry={this.handleSelectedCountry} 34 /> 35 <View style={{ marginTop: 10 }}> 36 <Text> 37 Country:{' '} 38 {`${this.selectedCountry?.name} (${this.selectedCountry?.cca2})`} 39 </Text> 40 <Text> 41 Phone Number: {`${this.selectedCountry?.callingCode} ${this.inputValue}`} 42 </Text> 43 </View> 44 </View> 45 ); 46 } 47}
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 supplieddefaultValuedoes not match any international standard, theinput mask of the defaultValuewill 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 supplieddefaultValuedoes not match any international standard, theinput mask of the defaultValuewill 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 />
- Disabled Mode:
1 <PhoneInput 2 ... 3 disabled 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 ...
Props
defaultValue?:string;value:string;onChangePhoneNumber:(phoneNumber: string) => void;selectedCountry:undefined | ICountry;onChangeSelectedCountry:(country: ICountry) => void;disabled?:boolean;withDarkTheme?:boolean;containerStyle?:StyleProp<ViewStyle>;flagContainerStyle?:StyleProp<ViewStyle>;inputStyle?:StyleProp<TextStyle>;
Contributing
- Fork or clone this repository
1 $ git clone https://github.com/guiliuri13/CO-react-native-international-phone-number.git
-
Repair, Update and Enjoy 🛠️🚧⚙️
-
Create a new PR to this repository
License
Thanks for stopping by! 😁
No vulnerabilities found.
No security vulnerabilities found.