Introduction

Install package

tamagui and react-hook-form are peer-dependencies, so you should install it if are not installed yet.

npm install tamagui-react-hook-form tamagui react-hook-form

Getting Started

Create you createForm function with your component (by default use tamagui Form components)


// import { createConfigForm, defaultComponents, defaultHelpers } from "tamagui-react-hook-form";
// import { Button, Label, XStack, SizableText } from "tamagui";

const createForm = createConfigForm(defaultComponents, defaultHelpers);

interface FormValues {
  text: string
};

const Form = createForm<FormValues>();

const App = () => {
  return (
    <Form
      onSubmit={(value) => console.log(value)}
      defaultValues={{ text: "World" }}
      width="50%"
      marginHorizontal="auto"
      gap="$4"
    >
      <Label height="$2" htmlFor="name">Your Name</Label>
      <Form.Input name="text" id="name" />
      <XStack gap="$4">
        <SizableText>Hello</SizableText>
        <Form.Value name="text" backgroundColor="$yellow7" paddingHorizontal="$4" />
      </XStack>
      <Form.Trigger asChild>
        <Button>Submit</Button>
      </Form.Trigger>
    </Form>
  )
};

render(<App />);

Introduction