Setting Up TanStack Form in React Native
Show how to install and initially configure TanStack Form in a React Native project, including the installation of necessary dependencies.
// Install TanStack Form using npm
npm install @tanstack/react-form
This command installs the TanStack Form package from npm, which is required to use it in your React Native project.
import { useForm, useField } from '@tanstack/react-form';
const MyForm = () => {
const {
Form,
meta: { isSubmitting, canSubmit },
} = useForm({
onSubmit: async (values) => {
// handle form submission
console.log(values);
},
});
return (
<Form>
<Field name="firstName" />
<Field name="lastName" />
<button type="submit" disabled={!canSubmit || isSubmitting}>
Submit
</button>
</Form>
);
};
const Field = ({ name }) => {
const [field, fieldMeta] = useField({
name,
});
return (
<>
<input {...field} />
{fieldMeta.error ? <span>{fieldMeta.error}</span> : null}
</>
);
};
This example sets up a basic form with TanStack Form in a React Native project. It includes a custom `Field` component for handling inputs. The `useForm` and `useField` hooks are used to manage the form state and individual field states respectively.