TypeError: Cannot read property 'length' of undefined, js engine: hermes

[JoezerSmaniotto]

I'm using react-native's TextInput with NumericFormat in the customInput prop, but whenever I try to edit I get an error. If I try to delete values I get the error: "TypeError: Cannot read property 'length' of undefined, js engine: hermes" if I try to add values I get the error "TypeError: Cannot read property 'start' of undefined, js engine: hermes".

I hope I can edit the values without these errors

Follow the code link https://snack.expo.dev/@joezer.pnt/erroreactnumberformat

The error appears when trying to edit the values either increasing or decreasing the values

Please check the browsers where the issue is seen

• [ ] Chrome
• [ X] Chrome (Android)
• [ ] Safari (OSX)
• [ ] Safari (iOS)
• [ ] Firefox
• [ ] Firefox (Android)

If you decide to get the code and use it in an application, install

1. "npm install @hookform/resolvers yup"
2. If yup error appears, install "npm i yup@latest"

Follow the code

` import React from 'react'; import { yupResolver } from '@hookform/resolvers/yup'; import { useState, useEffect } from 'react'; import { useForm, Controller } from 'react-hook-form'; import * as Yup from 'yup'; import { Text, TextInput, View, StyleSheet, SafeAreaView,TouchableOpacity } from 'react-native'; import { NumericFormat as NumberFormat } from 'react-number-format';

export type TOnSchedule = {
OrderQty: number; PriceLimit: number; };

const setaDados: TOnSchedule = { OrderQty: 100, PriceLimit: 11, }

//Defina o esquema de validação usando Yup const schema = Yup.object().shape({ OrderQty: Yup.number().required('Qtd é obrigatória').min(0.01, "O quantidade tem que ser maior que 1"), PriceLimit: Yup.number().required('Valor obrigatório').min(0.01, "O valor tem que ser maior que R$0,00"), });

const OrderOnSchedule = () => {

const { control, reset, handleSubmit, setValue, watch, formState: { errors } } = useForm<TOnSchedule>({ mode: 'all', resolver: yupResolver(schema), defaultValues: { OrderQty: 200, PriceLimit: 12.23, } });

const onSubmit = async (data: TOnSchedule) => { console.log("Dados enviado: ", JSON.stringify(data)); };

useEffect(() => { reset({ OrderQty: 100, PriceLimit: 121212.125454, }); }, [reset]);

return ( <SafeAreaView> <View> <Controller control={control} name="OrderQty" render={({ field: { onChange, value } }) => ( <NumberFormat value={(value ?? 0).toString()} // Uso de '??' para fallback se value for undefined ou null displayType={'input'} thousandSeparator={true} onValueChange={(values) => { const numValue = values.value ? parseFloat(values.value) : 0; // Fallback para 0 se value onChange(numValue); }} customInput={TextInput} keyboardType="numeric" style={styles.input} /> )} />

    <Controller
      control={control}
      name="PriceLimit"
      render={({ field: { onChange, value } }) => (
        <NumberFormat
          value={(value ?? 0).toString()}
          displayType={'input'}
          decimalScale={2}
          fixedDecimalScale={true}
          thousandSeparator={true}
          decimalSeparator="."
          prefix="R$ "
          onValueChange={(values) => {
            const numValue = values.value ? parseFloat(values.value) : 0; 
            onChange(numValue);
          }}
          customInput={TextInput}
          keyboardType="numeric"
          style={styles.input}
        />
      )}
    /> 
     <TouchableOpacity style={styles.submitButton} onPress={handleSubmit(onSubmit)}>
      <Text style={styles.submitButtonText}>Enviar Dados</Text>
    </TouchableOpacity>  
  </View>
</SafeAreaView>

); };

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, input: { borderWidth: 1, borderColor: 'gray', padding: 10, marginTop: 5, marginBottom: 20, }, errorText: { color: 'red', marginBottom: 10, }, submitButton: { backgroundColor: 'blue', color: 'white', textAlign: 'center', padding: 10, borderRadius: 5, }, submitButtonText: { color: 'white', fontSize: 16, } });

export default OrderOnSchedule;

`