WhoBuilt

Forms In React Native

Oct 4, 2019· 30 min· 7.5K views·Watch on YouTube

Speaker

Jared Palmer, lead engineer at The Palmer Group, explains how Formik addresses form management in React Native at React Native EU 2019, hosted by Callstack.

Why forms are difficult

Palmer says React leaves developers to connect input state, validation, error messages, and tests themselves. As an app grows, teams also need consistent patterns and reusable components across forms.

Why he built Formik

While building a large administrative dashboard in 2017, Palmer wanted a form solution that did not put local, short-lived form state in Redux. He designed Formik to use React, keep rendering control with developers, and support gradual adoption and removal.

Building form logic with hooks

Palmer demonstrates a React Native sign-up form with name, email, and password fields, then builds a simplified `useFormik` hook to manage values, change handlers, and submission. He describes adding blur tracking and validation, with errors and touched state keyed by field name.

Formik Native features

Palmer announces Formik Native, a React Native focused build with focus management to move between inputs using `setFocus`. He also shows Yup schema validation and field hooks for building reusable inputs with custom styling, while Formik manages values, errors, touched state, and submission status.

Roadmap and design lessons

Palmer outlines planned hooks for text inputs, pickers, switches, sliders, and focus management, along with TypeScript support. He says Formik 2 was planned to add `useField` and `useFieldArray`, and recommends focusing libraries on common use cases, keeping APIs consistent, and open-sourcing useful tools.

Takeaways

  • Keep form state local when the rest of an app does not need to know about it.
  • A form helper can manage values, validation, touched state, and submission while leaving input rendering and styling to the app.
  • Use field names consistently across values, errors, and touched state to make form state easier to inspect.
  • Build reusable input components around shared form logic to reduce repeated wiring across forms.
  • Prioritize common use cases and a consistent API when designing an internal or open-source tool.

Mentioned in this talk

Search inside this talk

What was claimed 8

Related talks