I am developing the SSN number in react native. Now in my code, I am masking the number like 123 - 45 - xxxx OR xxx - 45 - 6789 only after clicking the save button. But now I wanted to mask that number like 123 - 45 - xxxx OR xxx - 45 - 6789while typing the number before clicking the save button.Note: in my code, I am referring to the values of split by, numOfSplits, pattern, position, mask, length, mask through my metadata.
my code
import React from 'react';import { Controller} from 'react-hook-form';import { StyleProp, ViewStyle} from 'react-native';import { useSelector} from 'react-redux';import { Icon, Input, Layout} from '_atoms';import { Label} from '_organisms';import { fillColor} from '_utils';import { style} from '../style';let SystemMask = ({ attribute, data, formOptions, disable}: any) => { const { name, required, title, info, placeHolder, validationRegEx, defaultValue, canUpdate, unique, splitBy, pattern, numOfSplits, position, mask, length, maskBy, ...others } = attribute; const { control }: any = formOptions || {}; let regEx = /^(?!(000|666|9))\d{3}-?(?!(00))\d{2}-?(?!(0000))\d{4}$/ const { theme } = useSelector((state: any) => state.app); let color = fillColor(disable, theme); const returnSum = (array: any) => { let sum = 0; array.map((e: any) => { sum = sum + e; }); return sum; }; let total = returnSum(pattern); let splittedData = ""; // let numOfSplit = pattern.length - 1; let splitData = (val: any) => { let splittedVal = ""; if (val) { let numOfSplits = 0; val.split("").map((ele: any) => { if (ele === splitBy) { numOfSplits++; } }); if (val.length <= total + numOfSplits) { val.split("").map((each: any, index: any) => { let sum = 0; pattern.map((e: any, i: any) => { sum = sum + 1 + e; if (index + 1 === sum && each !== splitBy) { splittedVal += "".concat("", splitBy); } else if (index + 1 === sum && each === splitBy) { splittedVal += "".concat("", splitBy); } else if (index + 1 !== sum && each === splitBy) { splittedVal += "".concat("", ""); } }); pattern.map((e: any, i: any) => { sum = sum + 1 + e; if (index + 1 !== sum && each === splitBy) { each = ""; } }); splittedVal += "".concat("", each !== maskBy ? each : ""); }); return splittedVal; } } else { return ""; } }; let maskData = (val: any) => { let maskedData = ""; if (val) { splittedData = ""; let numOfSplits = 0; val .replaceAll(splitBy, "") .split("") .map((each1: any, index1: any, array1: any) => { if (array1[index1 - 1] === splitBy) { numOfSplits++; } if ( index1 + 1 <= length + numOfSplits && position === ("LEFT" || "left" || "Left") && each1 !== splitBy ) { splittedData += "".concat("", mask ? maskBy : each1); } else if ( index1 + 1 > val.replaceAll(splitBy, "").length - (length + numOfSplits) && position === ("RIGHT" || "right" || "Right") && each1 !== splitBy ) { splittedData += "".concat("", mask ? maskBy : each1); } else { splittedData += "".concat("", each1); } }); splittedData.split("").map((each2, index2) => { let sum2 = 1; pattern.map((e2: any, i2: any) => { sum2 = sum2 + e2; if (index2 + 1 === sum2 && each2 !== splitBy) { maskedData += "".concat("", `${splitBy}`); } }); maskedData += "".concat("", each2); }); return maskedData; } else { return ""; } }; const handleOnchange = (val: any, onChange: any) => { onChange(val); }; const getMaskValue = (value: any, isDirty: any) => { return isDirty ? splitData(value) : maskData(value); }; return ( < Layout style = { style.container as StyleProp < ViewStyle > } ><>< Label isRequired = { required } title = { title } description = { info } /> < /> < Controller control = { control } name = { name } render = { ({ field, fieldState }: any) => { let { onChange, value, ref } = field || {}; let { error, isDirty } = fieldState || {}; let { message } = error || {}; return ( < Input // ref={ref} placeholder = "123-45-6789" testID = { name } disabled = { disable } onChangeText = { (value: any) => { onChange(value); } } // inputProps={{ // maxLength: total + numOfSplit, // }} onChange = { (val) => handleOnchange(val, onChange) } value = { getMaskValue(value, isDirty) } status = { error ? 'danger' : 'primary' } caption = { error ? message || 'Required' : '' } accessoryRight = { (props: any) => { if (value) { return ( < Icon { ...props } fill = { color } name = {'close' } disabled = { disable } onPress = { () => onChange('') } /> ); } else return < > < />; } } /> ) } } rules = { { required: required, pattern: { value: validationRegEx || regEx, message: 'Enter a valid SSN', }, maxLength: { value: 11, message: "SSN length should be < 9", }, } } defaultValue = { data || defaultValue || '' } /> < /Layout> );};export default SystemMask;