TamaGUI Sheet rendered inside react-hook-form's FormProvider gives error 'Cannot read property 'control' of null, only on Android

222 Views Asked by At

In a react-native (TamaGUI) app, I'm using a FormProvider from react-hook-form to control some form fields which are all rendered inside a TamaGUI Sheet component.

const methods = useForm(formData);
return (
  <>
    <FormProvider {...methods}>
      <Form onSubmit={handleSubmit(onSubmit)} f={1}>
        <Timeline items={items} />
        <Sheet
          {...someProps}
        />
      </Form>
    </FormProvider>
  </>
);

Inside the Sheet, I have a controlled Select field like this:

const { control } = useFormContext();

return (<Controller
    name={name}
    control={control}
    render={({ field, fieldState }) => {

      return (
          <Select
            onValueChange={onChange}
            value={value ?? ''}
            {...otherProps}
          />)
    }}
/>
)

On Android devices, I get the error "Cannot read property 'control' of null", on IOS it works fine.

I know I can move the <Provider /> component inside the Sheet and for some reason the error goes away. I don't know why tho.

Also, Although it works, I cannot move the <Provider /> inside the Sheet, because I need its context also inside <Timeline />

All help and suggestions are welcome.

Some dependencies:

"react-native": "0.72.6",
"tamagui": "latest",
"react-hook-form": "^7.46.2",
0

There are 0 best solutions below