CaioQuirinoMedeiros / react-native-mask-input

🎭:iphone: A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.
https://www.npmjs.com/package/react-native-mask-input
MIT License
309 stars 31 forks source link

Problem submitting a form "maskArray.find is not a function" #45

Open Gabrpimenta opened 1 year ago

Gabrpimenta commented 1 year ago

Hi, I'm having a "Render Error" when I'm submitting my form. My code:

import React from 'react';
import { Controller } from 'react-hook-form';

import { Input, InputProps } from '@components/core/Input';
import { MaskEnum } from '@enums/Mask';
import { Masks } from 'react-native-mask-input';

type ControllerInputProps = InputProps & {
  control?: any;
  name: string;
  maskType?: string;
};
const ControlledInput = ({
  title,
  control,
  name,
  maskType,
  ...rest
}: ControllerInputProps) => {
  function selectTypeMask(name: string) {
    switch (name) {
      case MaskEnum.CPF:
        return Masks.BRL_CPF;
      case MaskEnum.CEP:
        return Masks.ZIP_CODE;
      case MaskEnum.PHONE:
        return Masks.BRL_PHONE;
      case MaskEnum.BIRTH_DATE:
        return Masks.DATE_DDMMYYYY;
    }
  }
  return (
    <Controller
      name={name}
      control={control}
      rules={{ required: true }}
      render={({ field: { onChange, onBlur, value } }) => (
        <Input
          title={title}
          value={value}
          onChangeText={masked => {
            onChange(masked);
          }} // send value to hook form
          mask={selectTypeMask(maskType)}
          onBlur={onBlur} // notify when input is touched
          {...rest}
        />
      )}
    />
  );
};

export { ControlledInput };

My MaskedInput is inside this Input just for styles purpose. All masks are working as expected, but when I submit the form it shows this error:

"Render Error: maskArray.find is not a function. (In 'maskArray.find(function (maskItem) { return Array.isArray(maskItem);})', 'maskArray.find' is undefined)"

I followed back to where this function might be and it was inside "useMaskedInputProps.tsx" file:

const maskHasObfuscation = React.useMemo(
    () => maskArray && !!maskArray.find((maskItem) => Array.isArray(maskItem)),
    [maskArray]
  );

  const isValueObfuscated = React.useMemo(
    () => !!maskHasObfuscation && !!showObfuscatedValue,
    [maskHasObfuscation, showObfuscatedValue]
  );

So I think it goes trough this verification, but thing is that I'm saying in my onChangeText that my item will be masked and not obfuscated, so I thought this function wouldn't cause any problems, but in some way that I'm not being able to understand, it is.

If anyone can enlighten me to where is the problem and how to fix it I'll be grateful :)