How to make forms in React Native

In React Native, forms play a crucial role in collecting user input and facilitating interactions within mobile applications. Whether it's a login screen, a registration form, or a feedback submission, creating and handling forms efficiently is essential for a smooth user experience. React Native provides a set of components and libraries that allow developers to build dynamic and responsive forms, making it easier to gather data and create engaging user interfaces.

For this purpose, we use the react-hook-form library, which enables developers to incorporate forms into their React Native applications easily.

Installing dependencies

We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.

You can see here how to create a React Native application.

Navigate to the root directory of your React Native project and install the dependencies using the following commands.

import React from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
const SimpleForm = () => {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
    // Here you can perform further actions with the form data, like sending it to a server
  };
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Forms</Text>
      <Controller
        control={control}
        name="fieldName"
        render={({ field }) => (
          <TextInput
            {...field}
            style={styles.input}
            placeholder="Enter your data"
            // Add other TextInput props as needed
          />
        )}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 20,
    width: '70%',
  },
});
export default SimpleForm;

Line 6: The useForm hook from the react-hook-form is used to create the form and manage its state. It provides methods and state variables for handling form data efficiently.
Lines 8–11: The onSubmit function is called when the user submits the form. It logs the form data to the console (you can replace this with your own logic, such as placing these items into your database).
Lines 16–27: The Controller component from the react-hook-form is used to connect the TextInput to the form state.
- Lines 20–25: A TextInput component from React Native is used for user input.
Line 28: A simple submit Button is added to the form so that user data can be passed, and the function onSubmit can be triggered for further actions.

{
  "name": "awesomeproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-svg-transformer": "^1.0.0"
  },
  "private": true
}

Forms in React Native application

Note: Press 'w' key to see the output in web browser.

Lines 15–17: The onChangeField function is used to update the form field values in the state whenever the user types in the input fields.
Lines 19–23: The useEffect hook is used to register the form fields with their respective names ('username', 'email', and 'password') when the component changes.
Lines 28–48: The form fields are defined using the TextInput components.
Line 49: The "Submit" button is bound to the handleSubmit function, which triggers the onSubmit function when clicked.
Line 50: If the registration is successful (when isRegistered is true), a "Registration successful!" message is displayed in green text.

Overall, the code demonstrates a simple and efficient way to create a user registration form in React Native using the react-hook-form library, ensuring a good user experience with form validation and easy handling of form data.

Free Resources

How to make forms in React Native

Installing dependencies

Creating a form in React Native

Form in a React Native application