React-native-input-masking NPM

react-native-input-masking

React-Native-Input-Masking is an open source package which is developed natively, to provide the input masking feature to the developers. It is pretty easy to use, go through the documentation to help you get started.

Installation

If you prefer npm,

$ npm install react-native-input-masking --save

On Android:

No additional steps are required.

On Ios:

Run the following command from the root of your project:

$ cd ios
$ pod install

Usage:

Following is the basic example of using react-native-input-masking in your app. See the example folder for more implementation.

import RNInputMasking from 'react-native-input-masking'
import {Text, TouchableOpacity} from 'react-native'


class ExampleApp extends React.Component {

  state = {
    value: ''
  }

  onChangeText = ({ nativeEvent }) => {
    this.setState({ value: nativeEvent.text })
  }
  
  

  render() {
    return ( 
        <RNInputMasking
          style={{
            borderColor: 'black',
            borderWidth: 1,
            height: 50,
            alignSelf: 'center',
            marginTop: 5
          }}
          value={this.state.value}
          onChangeText={this.onChangeText}
          maskFormat="DD-DD-DD"
        /> 
        
    );
  };
}

export default ExampleApp;

More Props

Name	Description	Accepted Values	Platform (ios or android)
style	The style property to set the height, width and so on.	-	both
onChangeText	This callback function is helpful if you want to get access to the values changing while typing the text.	A call back function	both
onFocus	This callback function is helpful when you want to know when the input field is focus or blurred.	A call back function	both
onErrorForMasking (Required)	This callback function is helpful when you want to know why the typing is stopped. (The typing is stopped when the user types a character that doesn't match the given format.)	A call back function	both
onSubmitEditing	This callback function is helpful when you want to know when the user has pressed the return key.	A call back function	both
underlineColorAndroid	Use this prop to set the underline color of the text input.	Any hex color, default: #cccccc	android
placeholder	Use this prop to set the placeholder for the text input.	Any string	both
placeholderTextColor	Use this prop to set the placeholder text color for the text input.	Any hex color, default: #cccccc	both
textColor	Use this prop to set the text color for the text input.	Any hex color, default: Os's default	both
textSize	Use this prop to set the text size for the text input	Any number, default: Os's default	both
disabled	Use this prop to disable the editing for the text input.	Any boolean, default: false	both
value	Use this prop to set the default value for the text input.	Any String, default: ""	both
textAlign	Use this prop to set the alignment of the text inside the text input.	"Left" or "Right", default: "Left"	both
keyboardType	Use this prop to set the keyboard type for the text input.	"number-pad" , "date-time" , "email-address" , "password" , default: Os's default	both
returnKeyType	Use this prop to set the returnKeyType of the keyboard for the text input.	"go" , "next" , "search" , "done" , default: "done"	both
maskType (Required)	Use this prop to set the maskType for the text input.	"credit-card" , "phone-number" , "default"	android
maskFormat (Required)	Use this prop to set the maskFormat for the text input.	Use A where you want to show the alphabet and use D where you want to show a digit. Eg: DD-AA-DD	both
fontFamily	Use this prop to set the font-family for the text input.	Pass the name of the font which you have in your project. (for eg: Poppins-Bold.otf )	both
focus	You can use this method by creating a ref of the text input.	-	both
blur	You can use this method by creating a ref of the text input.	-	both

Important Note

Following is the elaborated example on how to use the maskFormat prop:

Use the following format to set the maskFormat:
For android: use A where you want to show the alphabet and use D where you want to show a digit For example: To mask the input for credit-card following format is suitable: DDDD-DDDD-DDDD-DDDD To mask the input for id card following format is suitable: AA-DDD To mask the input for date following format is suitable: DD/DD/DD To mask the input for phone-number following format is suitable: for eg if UK's phone no. needed to be masked: +44-DDDD-DDDDDD !!! IMPORTANT !!! use default or no maskType if using for other than credit-card or phone-number
For ios: use A where you want to show the alphabet and use D where you want to show a digit. For example: AA-DDD !!! IMPORTANT !!! To mask the input for phone-number following format is suitable: for eg if UK's phone no. needed to be masked: +44-DDDD-DDDDDD