Tamagui + React-Hook-Form == @tamagui-extras/form

Installation

To use Tamagui and React Hook Form together, install the following packages first:

1yarn add @tamagui-extras/form

Configuration

Add @tamagui-extras/form to the next.config.js or babel.config.js file to transpile the package.

1withTamagui({
2    config: './tamagui.config.ts',
3    components: ['tamagui', '@tamagui-extras/form' /* any other ui components */],
4    // the rest of your config
5})

Integration of react-hook-form

Form components starts with Lm have a trailing Rhf component name for an easy integration with react-hook-form library.

Wrap any form component with LmFormRhfProvider and add a LmSubmitButtonRhf to validate and receive all form values.

Usage

1import {LmFormRhfProvider, LmInputRhf, LmSliderRhf, LmSubmitButtonRhf} from "@tamagui-extras/form";
2import {YStack} from 'tamagui'
3
4function MyForm() {
5    const [mutate, {isLoading}] = useMutation()
6    return (
7        <LmFormRhfProvider>
8            <YStack space>
9                <LmInputRhf name={'name'} label="Name"/>
10                <LmSliderRhf name={'slider'} label="Slider"/>
11                <LmSubmitButtonRhf
12                    onSubmit={(formData) => {
13                        mutate(formData)
14                    }}
15                    loading={isLoading}
16                >Submit
17                </LmSubmitButtonRhf>
18            </YStack>
19        </LmFormRhfProvider>
20    )
21}

For better Typescript support you can also use the render function of LmFormRhfProvider, have a look at following example:

1<LmFormRhfProvider
2    defaultValues={{
3        name: '',
4        email: ''
5    }}
6>
7    {({control, handleSubmit, reset}) => (
8        <Form gap={'$3'}
9              onSubmit={handleSubmit(data => {
10                  console.log(data);
11              })}
12        >
13            <LmAlert severity={'info'} outlined>
14                <Paragraph>
15                    To be type safe use render function as child of LmFormRhfProvider and pass `control`
16                    to all form components.
17                </Paragraph>
18            </LmAlert>
19            <LmInputRhf name={'name'} control={control} label={'Name'} placeholder={'Type your name...'} labelInline
20                        required/>
21            <LmInputRhf name={'email'} control={control} label={'Name'} placeholder={'Type your email...'} labelInline/>
22            <XStack gap={'$3'}>
23                <LmButton onPress={() => reset()}>Reset</LmButton>
24                <Form.Trigger asChild>
25                    <LmButton colorVariant={'primary'}>Submit</LmButton>
26                </Form.Trigger>
27            </XStack>
28        </Form>)}
29</LmFormRhfProvider>

Demo of all components: Storybook Demo