Unlock the Power of React Native Forms

Forms are an essential part of any website or product UI, enabling users to provide feedback, take surveys, and collect data. However, if not designed correctly, forms can lead to a poor user experience, ultimately affecting your product’s success.

What Are Forms in React Native?

React Native forms offer a seamless way to gather user input and submit it to a backend server or store it locally. These forms typically consist of input fields, such as text inputs, checkboxes, radio buttons, dropdown menus, and submit buttons. React Native provides built-in components, like TextInput, Switch, Picker, and Slider, to create forms. You can also create custom components to suit your specific needs.

Creating Forms in React Native

To get started, you’ll need to have Xcode or Android Studio installed, as well as Node.js v14+. Some knowledge of React Native is helpful but not mandatory. We’ll focus on functionality, and all styles will be available in the project repository.

Using Native UI Components

The Picker Component

The React Native Picker component is equivalent to a dropdown in regular JavaScript. It’s used to render a list of multiple choices for users to select only one option. We’ll create a demo app to showcase how to implement the Picker component.

import React, { useState } from 'eact';
import { Picker } from 'eact-native';

const App = () => {
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(itemValue) => setSelectedValue(itemValue)}
    >
      <Picker.Item label="Item 1" value="item1" />
      <Picker.Item label="Item 2" value="item2" />
      <Picker.Item label="Item 3" value="item3" />
    </Picker>
  );
};

The Slider Component

The React Native Slider component is used to select a single value from a range of values. This feature is especially useful in forms where you need to present users with a range of values from a defined minimumValue to a maximumValue scale.

import React, { useState } from 'eact';
import { Slider } from 'eact-native';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <Slider
      value={value}
      onValueChange={(setValue) => setValue}
      minimumValue={0}
      maximumValue={100}
    />
  );
};

The Modal Component

The Modal UI component lets you present content directly on top of a parent (enclosing) view. This functionality is usually useful when performing several activities while avoiding navigation into different pages.

Building Forms with React Form Libraries

React form libraries simplify building forms by providing pre-built components and functionalities for handling form inputs, validation, and submission.

Using Formik Library

We’ll build a simple sign-up form using the Formik Library. Formik provides pre-built components and functionalities for handling form inputs, validation, and submission.

import { useFormik } from 'formik';

const SignUpForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: (values) => {
      // Submit form values
    },
  });

  return (
    <form>
      <label>Name:</label>
      <input type="text" {...formik.getFieldProps('name')} />
      <br />
      <label>Email:</label>
      <input type="email" {...formik.getFieldProps('email')} />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

Using React Hook Form

React Hook Form is a form library that uses React Hooks to handle form inputs, validation, and submission. We’ll build a sign-up form with the React Hook Form.

import { useForm } from 'eact-hook-form';

const SignUpForm = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // Submit form values
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Name:</label>
      <input {...register('name')} />
      <br />
      <label>Email:</label>
      <input {...register('email')} />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

Take Your React Native Forms to the Next Level

In this article, we’ve demonstrated how to build better React Native forms using native UI components and React form libraries. We covered the Picker, Slider, and Modal components and built sign-up form examples using Formik and React Hook Form. You can find the source code for this project here.