Masked text in react native || React native masked text

If you want to modify normal text input according to your usage you need this library. For example you want to add phone input in your form then normal text field show it as 9394050324 but with this library it is like

(88) 8888-8888 or (88) 88888-8888 

All this modification is done by this library.

Installation of React Native Masked Text

npm install react-native-masked-text --save

if you prefers yarn then

yarn add react-native-masked-text

Masked Input text usage

first import it like this for usage.

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

For cel phone you can use

<TextInputMask
  type={'cel-phone'}
  options={{
    maskType: 'BRL',
    withDDD: true,
    dddMask: '(99) '
  }}
  value={this.state.international}
  onChangeText={text => {
    this.setState({
      international: text
    })
  }}
/>

for credit card you can pass this type

  type={'credit-card'}

for date time

  type={'datetime'}
  options={{
    format: 'YYYY/MM/DD'
  }}

for zip code

  type={'zip-code'}

for money

  type={'money'}
  options={{
    precision: 2,
    separator: ',',
    delimiter: '.',
    unit: '$',
    suffixUnit: ''
  }}

As you can see from these examples you can write any type of input from these fields.

for another props you can check it out