| title | React Native Input Mask |
|---|---|
| description | Learn how to use React Native Input Mask with Unform |
React Native Masked Text offers an easy way to add masks to inputs.
Create a base Input component, as described in the React Native example.
Here is a small difference: assuming that the data to be sent in the form should not be formatted, we will use a rawText property that will inform us of the component's gross value.
Note that getValue can return the rawText property, that is, if the form does not use an InputMask, the returned value will be the one stored in inputRef
import React, { useRef, useEffect, useCallback } from 'react';
import { TextInput } from 'react-native';
import { useField } from '@unform/core';
function Input({ name, label, onChangeText, rawText, onInitialData, ...rest }) {
// this will cause the InputMask to be updated if the Form receives initial data
useEffect(() => {
if (onInitialData) onInitialData(defaultValue);
}, [defaultValue, onInitialData]);
useEffect(() => {
registerField({
// modify getValue
getValue() {
if (rawText) return rawText;
if (inputRef.current) return inputRef.current.value;
return '';
},
});
}, [fieldName, rawText, registerField]);
return (
{...}
);
}
export default Input;Inform which component should be rendered using the customTextInput property, in this case Input.
Add rawText to the Input properties using customTextInputProps
import React, { useState, useCallback, forwardRef } from 'react';
import { TextInputMask } from 'react-native-masked-text';
import Input from '../Input';
const InputMask = ({ type, ...rest }, inputRef) => {
const [text, setText] = useState('');
const [rawText, setRawText] = useState('');
const handleChangeText = useCallback((maskedText, unmaskedText) => {
setText(maskedText);
setRawText(unmaskedText);
}, []);
return (
<TextInputMask
type={type}
includeRawValueInChangeText
value={text}
onChangeText={handleChangeText}
customTextInput={Input}
customTextInputProps={{
ref: inputRef,
rawText,
onInitialData: setText,
}}
{...rest}
/>
);
};
export default forwardRef(InputMask);const App = () => {
const formRef = useRef(null);
function handleSubmit(data) {
/**
Out: { first_name: 'Lorem Ipsum', cpf: '11111111111' }
On screen: { first_name: 'Lorem Ipsum', cpf: '111.111.111-11' }
*/
console.log(data);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
<Form ref={formRef} onSubmit={handleSubmit}>
<Input name="first_name" label="Name" />
<InputMask type="cpf" name="cpf" keyboardType="numeric" label="CPF" />
<Button
onPress={() => formRef.current.submitForm()}
title="console.log"
/>
</Form>
</View>
);
};