React Native IMask Plugin

react-native-imask


Read this before using

> I can't say that this plugin is production ready, use it on your own risk.
> React Native Textinput behavior differs from html input, varies by platform and contains several bugs (1, 2), so some things are not possible to implement.
> Any PRs are welcomed.

Install

npm install react-native-imask

Masked TextInput Example

``javascript
import {IMaskTextInput} from 'react-native-imask';

mask={Number}
radix="."
value="123"
unmask={true} // true|false|'typed'
onAccept={
// depending on prop above first argument is
// value if unmask=false,
// unmaskedValue if unmask=true,
// typedValue if unmask='typed'
(value, mask) => console.log(value) // probably should update state
}
// ...and more mask props in a guide

// other TextInput props
editable={true}
style={{
height: 40,
width: '100%',
borderColor: 'gray',
borderWidth: 1
}}
/>
`

Extend Existing Components


`javascript
import {IMaskNativeMixin} from 'react-native-imask';

// use inputRef to get reference for our custom text input component
const InputComponent = ({inputRef, ...props}) => (
ref={inputRef}
{...props}
/>
);

// wrap component with IMaskNativeMixin
const IMaskTextInput = IMaskNativeMixin(InputComponent);

// use MaskedComponent
mask="0000"
// ...other props
/>
``

More options see in a guide.