Controller rules are not working in React Native.

[haerim95]

Hi, I'm using hook-form in my RN project to manage forms.

I'm using a library called react-native-wheely to add some values to the form.

This is my code.

import WheelPicker from 'react-native-wheely';
const { control } = useFormContext<MyFormType>();

<Controller
  control={control}
  name={keyField}
  rules={{ required: true }}
  render={({ field: { onChange } }) => (
    <WheelPicker
      selectedIndex={selectedIndex}
      options={options}
      onChange={(index) => onChange(Number(options[index]))}
      visibleRest={1}
      itemHeight={50}
    />
  )}
/>

rules={{ required: true }} option, but it doesn't respond with an error.
(I'm getting the name as a props called keyField to use as a common component, but when I check in the console, the name value is coming in normally and it's accumulating in the hook-form data, so I don't think there's a problem.)

Why is this happening? It just works fine on TextInput.
Is it because we're using the picker library? help me please 🙏 😭

[RajeshPandey057]

I would suggest to try using zod, that has a validation after data is collected so it should not matter what UI you are using to get data.
something like this,

import { z } from "zod";
import { useForm } from "react-hook-form";
import WheelPicker from 'react-native-wheely';
import { zodResolver } from "@hookform/resolvers/zod";

const formSchema = z.object({wheel:z.string().min(1,'String is required')});
const { control } = useForm<z.infer<typeof formSchema>>({
                                  resolver:zodResolver(formSchema),
                                  defaultValue:{wheel:""}
                              });

<Controller
  control={control}
  name={keyField}
  render={({ field: { onChange } }) => (
    <WheelPicker
      selectedIndex={selectedIndex}
      options={options}
      onChange={(index) => onChange(Number(options[index]))}
      visibleRest={1}
      itemHeight={50}
    />
  )}
/>