React Native Form Container

The purpose of this project is to provide a simple and flexible form validation library for React Native applications. With this library, developers can easily implement form validation logic and handle errors in their React Native forms.

📝 Medium Article

Support the Project

If you would like to support the work I do on this project, you can buy me a coffee through Buy Me a Coffee. Every small contribution will be a big support for the development and sustainability of the project.

How Can You Help?

• ☕️ Buy Me a Coffee: You can support by buying a coffee. It's an easy and enjoyable way to contribute to the project.
• ⭐️ Star Repository: You can help the project reach more people by starring the repo.
• 👨‍💻 Contribute: You can directly contribute to the development of the project by working on it or providing feedback.

Thank You

Thank you for your support and interest! I need amazing community members like you to continue developing the project.

Installation

react-native-form-container

react-native-form-container is a simple and customizable form container component for React Native. This library simplifies form validation and manages form elements efficiently.

Features

• Easy form management
• Flexible and customizable
• Simple validation for form elements

Installation

To add the react-native-form-container library to your project, use the following command:

1npm install react-native-form-container

Usage

Below is an example showing how to use the react-native-form-container library.

Basic Usage

1import React, { useState, useRef } from "react";
2import { View, Text, SafeAreaView, Button } from "react-native";
3import FormContainer, {   FormContainerRef,   FormInput, } from 'react-native-form-container';
4
5
6export default function App() {
7  const formContainerRef = useRef<FormContainerRef>(null);
8  const [firstName, setFirstName] = useState("");
9  const [lastName, setLastName] = useState("");
10
11  return (
12    <SafeAreaView>
13      <FormContainer
14        style={{ gap: 10, margin: 10 }}
15        formContainerRef={formContainerRef}
16      >
17        <FormInput
18          value={firstName}
19          onChangeText={setFirstName}
20          placeholder="First Name"
21          id="firstName"
22          required
23        />
24        <FormInput
25          placeholder="Last Name"
26          value={lastName}
27          onChangeText={setLastName}
28          id="lastName"
29          required
30        />
31      </FormContainer>
32      <Button
33        onPress={() => {
34          const errorMessages = {
35            firstName: "Please enter your first name",
36            lastName: "Please enter your last name",
37          };
38          const result = formContainerRef.current?.validate(errorMessages);
39          console.log(result);
40        }}
41        title="Save"
42      />
43    </SafeAreaView>
44  );
45}

PropType	Description
style	PropTypes.object
formContainerRef	PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ])

Form Validation

To trigger form validation, use the validate method of the form container reference. This method checks the validity of the fields and returns appropriate error messages for invalid fields.

1const result = formContainerRef.current?.validate(errorMessages);
2console.log(result);

Error Messages

You can pass error messages as an object to the validate method for each input component. For example:

1const errorMessages = {
2  firstName: "Please enter your first name",
3  lastName: "Please enter your last name",
4};

validate(errorMessages)

Method: validate(errorMessages: object) -> boolean

This method validates the validity of inputs in the form.

Parameters:

• errorMessages: An object. Each key represents an input's identifier (ID), and its value is an error message.

Return Value:

• true: If all inputs are valid.
• false: If at least one input is invalid or the errorMessages parameter is not a valid object.

Example Usage:

1const errorMessages = {
2  firstName: "Please enter your first name",
3  lastName: "Please enter your last name",
4};
5
6const result = formContainerRef.current?.validate(errorMessages);

Alternative Input Component

In this example, an alternative input component named AlternativeInput is defined. This component accepts props of type FormInputProps, which presumably includes properties required by a form input component.

Usage:

To use AlternativeInput, simply pass the necessary props expected by a form input component.

1import React, { useState, useRef } from "react";
2import { View, Text, SafeAreaView, Button, TextInput } from "react-native";
3import FormContainer, {
4  FormContainerRef,
5  FormInputProps,
6} from "react-native-form-container";
7export default function App() {
8  const formContainerRef = useRef < FormContainerRef > null;
9  const [firstName, setFirstName] = useState("");
10  const [lastName, setLastName] = useState("");
11  const AlternativeInput = (props: FormInputProps) => {
12    return (
13      <View>
14        <TextInput
15          style={{
16            borderWidth: 1,
17            borderColor: "black",
18            padding: 10,
19            borderRadius: 5,
20          }}
21          {...props}
22        />
23        <View style={{ marginTop: 10 }}>
24          {props.errorMessage && <Text>{props.errorMessage}</Text>}
25        </View>
26      </View>
27    );
28  };
29  return (
30    <SafeAreaView>
31      <FormContainer
32        style={{ gap: 10, margin: 10 }}
33        formContainerRef={formContainerRef}
34      >
35        <AlternativeInput
36          id="firstName"
37          value={firstName}
38          onChangeText={setFirstName}
39          placeholder="First Name"
40          required
41        />
42        <AlternativeInput
43          placeholder="Last Name"
44          value={lastName}
45          onChangeText={setLastName}
46          id="lastName"
47          required
48        />
49      </FormContainer>
50
51      <Button
52        onPress={() => {
53          const errorMessages = {
54            firstName: "Please enter your first name",
55            lastName: "Please enter your last name",
56          };
57          formContainerRef.current?.validate(errorMessages);
58        }}
59        title="Save"
60      />
61    </SafeAreaView>
62  );
63}

FormInputProps

The FormInput component accepts the following props:

Prop	Type	Description
value	string	The value of the input field.
onChangeText	function	Callback function to handle text changes.
placeholder	string	Placeholder text for the input field.
id	string	Unique identifier for the input field. Required for validation.
required	boolean	Specifies whether the input field is required. If true, id must be provided.
pattern	string	Regex pattern for input validation. This works only if the validation prop is provided.
validation	oneOf(['email', 'password', 'text', 'phone', 'number'])	Specifies the type of input for predefined validation patterns.
passwordOptions	object	Additional options for password validation. See below for details.

passwordOptions

When the validation prop is set to password, the following passwordOptions can be specified:

Option	Type	Description
minLength	number	Minimum length of the password. Default value is 8.
special	boolean	Checks if the password contains special characters.
upperCase	boolean	Checks if the password contains uppercase letters.
lowerCase	boolean	Checks if the password contains lowercase letters.
number	boolean	Checks if the password contains numbers.

These validation rules are optional but can be specified to enforce stricter password criteria.