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",