react-native-masked-input

A customizable react-native-masked-input.

The goal of react-native-masked-input is expanding the default react-native TextInput component by adding masked string and styles customization options.

Features

• Masked Input with different string combinations
• Customisable Style

Setup

This library is available on npm, install it with: npm i @rahulwadhwa238/react-native-masked-input or yarn add @rahulwadhwa238/react-native-masked-input.

Install and setup the dependency react-native-elements by following these instructions.

Usage

1. Import @rahulwadhwa238/react-native-masked-input:

import MaskedInput from '@rahulwadhwa238/react-native-masked-input';

2. Create a component and set mask as shown below:

function WrapperComponent() {

  return (
    <View>
        <MaskedInput mask={'9-9/9-9'} />
    </View>
  );
}

3. Then simply set the text by using the onChangeText prop:

function WrapperComponent() {

  const [text, setText] = useState()

  return (
    <View>
        <MaskedInput onChangeText={setText} />
    </View>
  );
}

The onChangeText prop is the only prop you'll really need to make the masked input work: you should control this prop value by saving it in your wrapper component state.

A complete example

The following example consists in a component (MaskedInputExample) with a masked input. The masked input style is set by the mask prop and onChangeText prop can be used to set state variable.

import React, { useState } from 'react'
import { View } from 'react-native'
import MaskedInput from '@rahulwadhwa238/react-native-masked-input'

export default function MaskedInputExample() {

    const [text, setText] = useState()

    return (
        <View style={{ flex: 1, justifyContent: 'center' }}>
            <MaskedInput
                mask='9-9/9-9'
                onChangeText={setText}
            />
        </View>
    )
}

For a more complex example take a look at the /example directory.

Available props

| Name | Type | Default | Description | | ------------------------------ | ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | mask | string | '9-9-9-9' | String that is used to customise MaskedInput. | | onChangeText | function | | Callback that is called when the MaskedInput's text changes. | | contentContainerStyle | style | | Style prop for MaskedInput Component Container. | | containerStyle | style| | Style prop for MaskedInput Container. | | inputContainerStyle | style | | Style prop for MaskedInput Input Container. | | activeInputStyle | style | | Style prop for MaskedInput active Input Container. | | inputStyle | style | | Style prop for MaskedInput Input. | | | textStyle | style | | Style prop for MaskedInput Input's Text. | | activeTextStyle | style | | Style prop for MaskedInput active Input's Text. | | seperatorTextStyle | style | | Style prop for MaskedInput seperator's Text. |

Pull requests, feedbacks and suggestions are welcome!