FormField is a reusable component that combines React Hook Form’s functionality with a custom Input component, providing a seamless form handling experience in React Native applications.

​
Installation

The FormField component relies on the following dependencies:

Here’s a complete example of how to use the FormField component with various props:

​
Import

import FormField from '@/components/common/form-field';

​
Features

  • Seamless integration with React Hook Form
  • Built-in error handling and validation
  • Customizable styling
  • Support for icons (left and right)
  • TypeScript support with full type safety
  • Keyboard type customization
  • Secure text entry support for password fields

​
Props

PropTypeRequiredDescription
nameFieldPath<TFieldValues>YesField name for form registration
controlControl<TFieldValues>YesReact Hook Form control object
rulesRegisterOptionsNoValidation rules for the field
placeholderstringYesPlaceholder text for the input
secureTextEntrybooleanNoToggle password visibility (default: false)
keyboardTypeKeyboardTypeOptionsNoKeyboard type for input (default: ‘default’)
leftIconReact.ReactNodeNoIcon component to display on the left
rightIconReact.ReactNodeNoIcon component to display on the right
containerStyleViewStyleNoStyle object for the container
inputStyleViewStyleNoStyle object for the input

​
Usage

​
Basic Usage

import { useForm } from 'react-hook-form';
import FormField from '@/components/common/form-field';

function LoginForm() {
    const { control } = useForm({
        defaultValues: {
            email: '',
            password: '',
        },
    });
    return (
        <>
            <FormField
                name="email"
                control={control}
                placeholder="Email"
                keyboardType="email-address"
                rules={{ required: 'Email is required' }}
            />
            <FormField
                name="password"
                control={control}
                placeholder="Password"
                secureTextEntry
                rules={{ required: 'Password is required' }}
            />
        </>
    );
}

Was this page helpful?

Input ComponentsDialog Modal