React Native

How to Implement Phone Number masking in react native

Posted On
Posted By Neha Dwivedi

Phone Number masking plugin in react native

 

 

There is a great npm plugin for implementing phone number masking, so let’s start to implement

  • Step1: First we need to install the plugin

       

npm install react-native-masked-text –save
  • Step2: Now start to import the plugin in which page you want to implement this

           

import{ TextInputMask }from'react-native-masked-text'
  • Step3: There is 2 type of phone number masking 

         1) BRL (default): (99) 9999-9999 or (99) 99999-9999 (will detect automatically)

         2)INTERNATIONAL: +999 999 999 999

    

this.state={mobile:''//must be assigned empty string}
<TextInputMask
type={'cel-phone'}
options={{
maskType: 'BRL',//for international set it -&amp;nbsp;INTERNATIONAL type masking
withDDD: true,
dddMask: '(999) 999-9999'//this is a your define formatting you use according to your requirment
}}
maxLength={14}//set length according to your input requirment
value={this.state.mobile}
placeholder={'Mobile Number'} 
onChangeText={(mobile) =>this.setState({ mobile })}
style={styles.input} ref='mobile'
autoCapitalize={'none'}
autoCorrect={false}
returnKeyType={'next'} 
keyboardType={'number-pad'}
  • Step4: we also able to set the option

           Options

nametyperequireddefaultdescription
maskTypestringnomaskTypethe type of the mask to use. Available: BRL or INTERNATIONAL
withDDDbooleannotrueif the mask type is BRL, include the DDD
dddMaskstringno(99)if the mask type is BRL, the DDD mask
  • Step4: you can also able to get the unmasked value by using getRawValue()
const  unmasked = this.phoneField.getRawValue()

exp: in the mask: (51) 98765-4321

unmasked: 51987654321

Expected error: TypeError: text.replace is not a function react-input-mask

Reason: if you did not declare a state of a mobile blank string 

Note:  for more detail or another masking please follow

https://github.com/benhurott/react-native-masked-text 

 

Related Post

leave a Comment

Latest Post

React Native

How to create/generate ipa file in react native iOS

Read More
Posted On
React Native

How to Set Splash Screen and AppIcon in react native iOS

Read More
Posted On
React Native

Getting Started with React Native First App With Little Information(Course for beginners, start with basics)

Read More
Posted On
React Native

How To Integrating Firebase with iOS in React Native

Read More
Posted On
What's Arround

Companies Preferences on Artificial Intelligence (AI) Jobs position and other Skillsets

Read More
Posted On