How to Implement Phone Number masking in react native

Phone Number masking plugin in react native :

Here we are going to discuss about “How to Implement Phone Number masking in react native“, there is a great npm plugin for implementing phone number masking, so let’s start to implement

Output is like – - react native phone number masking


First we need to install the plugin.

npm install react-native-masked-text –save


Now start to import the plugin in which page you want to implement this.

import{ TextInputMask }from'react-native-masked-text'


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

 mobile:''//must be assigned empty string

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
placeholder={'Mobile Number'} 
onChangeText={(mobile) =>this.setState({ mobile })}
style={styles.input} ref='mobile'


We also able to set the option.

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


You can also able to get the unmasked value by using getRawValue()

const  unmasked = this.phoneField.getRawValue()

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.

So the topic is “How to Implement Phone Number masking in react native“ completed, you can find the next lesson here.

You can find my post on medium as well click here please follow me on medium as well.

If have any query/issue, please feel free to ask.

Happy Coding Guys.


Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *