issue: React Native Controller

[fran-cadenas-fu]

Version Number

7.49.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/eager-sun-jt4df

Steps to reproduce

I'm trying to use React-Hook-Form on the following Stack:

• React Native
• Expo Router v2
• Nativewind 4

And Each time I try to render a Controller component with my inputs y get a Typerror.

The inputs are like this:

import { forwardRef, useState } from "react";
import { TextInput, View, Text } from "react-native";
import { cn } from "~/utils/styles";

type InputTextProps = {
  label?: string;
  prefix?: string;
  error?: string;
} & Omit<React.ComponentProps<typeof TextInput>, "style">;

const InputText = forwardRef<any, InputTextProps>(function InputText(
  { label, error, prefix, ...props },
  ref
) {
  const [isFocused, setIsFocused] = useState(false);
  return (
    <View>
      {label && (
        <Text className="pl-2 text-sm text-gray-600 mb-1">{label}</Text>
      )}
      <View
        className={cn(
          "border rounded-xl border-gray-300 flex justify-center flex-row px-2",
          {
            "border-gray-600": isFocused,
          }
        )}
      >
        {prefix && (
          <View className="my-auto mx-2">
            <Text
              className={cn("font-bold text-lg text-gray-400", {
                "text-gray-600": isFocused,
              })}
            >
              {prefix}
            </Text>
          </View>
        )}
        <TextInput
          onFocus={() => setIsFocused(true)}
          ref={ref}
          onBlur={(e) => {
            setIsFocused(false);
            if (props.onBlur) props.onBlur(e);
          }}
          className="h-12 py-2 flex-1"
          {...props}
        />
      </View>
      {error && <Text className="text-red-500 text-xs pl-2 pt-1">{error}</Text>}
    </View>
  );
});

export default InputText;

And I use them like this:

          <Controller
            control={form.control}
            name="email"
            rules={{ required: true }}
            render={({ field }) => (
              <InputText
                label="Email"
                placeholder="Introduce tu email"
                onChangeText={field.onChange}
                value={field.value}
              />
            )}
          />

Expected behaviour

Work like in the example.

What browsers are you seeing the problem on?

No response

Relevant log output

TypeError: Cannot assign to read-only property 'mount'
    in Unknown (created by SignInScreen)
    in RCTView (created by View)
    in View (created by CSSInterop.View)
    in CSSInterop.View (created by SignInScreen)
    in RCTView (created by View)

Code of Conduct

• I agree to follow this project's Code of Conduct