How to create basic form with Formik in React Native

In the world of React Native application development, building forms is essential for creating a smooth user experience. Forms in React Native serve as the primary means through which users interact with our application, providing a bridge for data input and user engagement. Whether it’s signing up for an account, submitting a search query, or providing feedback, forms are the conduits that facilitate these actions. The design and functionality of forms have a direct impact on the user experience and the overall success of our application.

Why use Formik for React Native forms?

React Native offers a variety of components and tools to simplify the form-building process. However, as our application grows and the complexity of our forms increases, managing state, validation, and user feedback can become challenging.

Creating forms with Formik in React Native makes managing state, input handling, and validation much easier, especially for complex forms. As mobile apps grow, maintaining form state and ensuring smooth user feedback can become challenging. This is where Formik simplifies form creation and state management.

Note: Want to build real world applications with React Native? Try this project out: Build an E-Commerce App with React Native, Redux, and Firebase.

Key features of Formik in React Native

Here are the basic components and utilities we’ll commonly use when working with Formik:

• <Formik>: This is the top-level component that wraps the entire form. It handles form state, form submission, and various form-level actions. We pass the initial values of various form fields in initialValues and an onSubmit handler function, which utilizes these values once the form is submitted.

• <Form>: This component is used to wrap the form fields. All form elements, like <Field> components, should be placed within this component. When submitting the form, it automatically triggers the onSubmit handler to collect the user input.

Note: Explore key concepts of React Native with the help of this project: Build a Music Player Application Using React Native.

• <Field>: This component is used for rendering form fields. It takes care of field-level state management, validation, and user input handling. We can specify the name prop to link it to a specific field in the initialValues. This reduces boilerplate code when working with complex forms in React Native.

• <ErrorMessage>: This component is used for displaying validation errors associated with a specific field. It shows an error message when a field’s validation fails.

• onSubmit: This function is specified within the <Formik> component as a callback that gets triggered when the form is submitted. This function takes two parameters:

  • values: This parameter contains an object that holds the current values of all form fields. Each field value is associated with the name attribute defined in the <Field> component.

  • formBag: This parameter is an object that contains various helper methods and properties for managing the form. It includes functions like setFieldValue, setFieldTouched, and resetForm, as well as properties like dirty, isValid, and isSubmitting.

• resetForm: This function allows us to clear the form after submission. This ensures a seamless user experience.

Code example

Let’s look at the demo React Native application, which demonstrates how to use Formik to create a basic form.

Note: Click the “Run” button to execute the code. Once the server starts, you can click the URL next to “Your app can be found at:” to view the application in the new browser tab.

Code explanation

• Line 11: First, we initialize a Formik form using the <Formik> component.

• Line 12: We set the initialValues prop to define the initial values for the form fields: fullname, email, and password.

• Line 13: The onSubmit function logs the values of the form fields to the console using console.log(values). Then, the resetForm() function is called to clear the form.

• Lines 25–51:

  • The form fields are created using the <Field> component. For each field, attributes like type, name, placeholder, and inline styles are defined. The name attribute links the field to the corresponding key in the initialValues object, making it easier to manage form data.

  • To display validation errors for each field, the <ErrorMessage> component is utilized. The name prop of the <ErrorMessage> component corresponds to the name prop of the <Field>, associating it with a specific form field. If validation fails, the <ErrorMessage> component displays a relevant error message.

• Line 46: A “submit” button is included within the form using a <button> element.

• Line 50: A green-colored success message is displayed to inform the user that their form has been submitted successfully.

• Lines 57–86: This code includes basic styling for the form and its elements. The customized styling is applied using the styles object created with StyleSheet.create().

Note: Want to build an AI powered game in React Native, try out this project: Create a Connect 4 Game Using React Native.

Benefits of Formik for mobile app development

1. By using Formik’s form state management, developers can avoid unnecessary complexity when tracking input changes across multiple fields.

2. Using Formik avoids frequent re-renders and minimizes performance issues in React Native applications compared to traditional state management methods.

3. Developers can build multi-step forms with Formik or dynamically add and remove fields using FieldArray.

Challenges of using Formik in React Native

1. New developers may find the initial setup and use of Formik’s APIs, such as <Field>, <Formik>, and <ErrorMessage>, a bit complex compared to traditional form handling.

2. Although Formik optimizes re-renders, managing state for extremely large forms with a lot of fields can sometimes result in noticeable performance overhead compared to alternatives like React Hook Form.

Building reliable forms is a critical part of mobile app development. With Formik’s advanced form handling, managing state and handling form submissions becomes seamless. Using Formik for React Native will improve user experience, reduce bugs, and enhance the performance of your mobile app. Try it in your next project to see how dynamic forms in React Native can simplify your development process.