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.