trezor-suite/suite-native/forms/README.md

@suite-native/forms

Small wrapper around react-hook-form to make usage easier.

Usage

import { yup } from '@trezor/validation';
import { useForm, Form, TextInputField } from '@suite-native/forms';
import { Button } from '@suite-native/atoms';

// Do not use yup.object().shape() - it will broke yup.InferType, use just yup.object({ firstName: ... }) instead
const myFormValidationSchema = yup.object({
    firstName: yup.string().required(),
    lastName: yup.string().required(),
});

type MyFormValues = yup.InferType<typeof myFormValidationSchema>;

export const MyForm = () => {
    const form = useForm<MyFormValues>({ validation: myFormValidationSchema });
    const { handleSubmit } = form;

    const onSubmit = (values: MyFormValues) => {
        console.log(values);
    };

    return (
        <Form form={form}>
            <TextInputField name="firstName" label="Xpub address" />
            <TextInputField name="lastName" label="Xpub address" />

            <Button
                onPress={() => {
                    handleSubmit(onSubmit);
                }}
            >
                Submit
            </Button>
        </Form>
    );
};

As you may noticed usage is very similar to react-hook-form, but there are few differences:

1. You need always wrap you form with Form component and pass form prop.
2. You are allowed to use Field components only, if you don't find one you need, you can implement it using useField hook.
3. useForm hook accepts validation arg, which is yup schema, you don't need to use yupResolver because this is handled automatically.
4. Validation schema is considered as source truth for shape of you form and for also is used as source for types, because of that validation arg for useForm and is mandatory.