react-native-form-textinput

A React Native TextInput wired to react-hook-form Controller, with optional label, validation styling, icons, and common input helpers.

Why use this?

With react-hook-form alone, each field tends to repeat the same pieces: wrapping Controller, passing control and name, wiring rules, surfacing formState.errors, and styling the field when something is invalid. This component folds that into one place so a typical field is a single JSX element with the props you care about (name, control, label, rules, error, plus normal TextInput props) instead of re‑implementing the same pattern on every screen.

Requirements

• React >=18
• React Native >=0.70
• react-hook-form >=7

Installation

npm install react-native-form-textinput

Peer dependencies must be installed in your app:

npm install react-hook-form

Usage

import { useForm } from "react-hook-form";
import FormTextInput from "react-native-form-textinput";

type FormValues = {
  email: string;
  password: string;
};

export function LoginForm() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: { email: "", password: "" },
  });

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  return (
    <>
      <FormTextInput
        name="email"
        control={control}
        label="Email"
        rules={{ required: "Email is required" }}
        error={errors.email?.message}
        keyboardType="email-address"
      />
      <FormTextInput
        name="password"
        control={control}
        label="Password"
        secureTextEntry
        rules={{ required: "Password is required" }}
        error={errors.password?.message}
      />
      {/* ... trigger handleSubmit(onSubmit) from a button */}
    </>
  );
}

Refs

FormTextInput forwards a ref to the underlying TextInput:

import { useRef } from "react";
import { TextInput } from "react-native";
import FormTextInput from "react-native-form-textinput";

const inputRef = useRef<TextInput>(null);

<FormTextInput ref={inputRef} name="code" control={control} label="Code" />;

Props

FormTextInput extends React Native TextInput props, with these additions:

| Prop | Type | Description | | ------------------ | ----------------- | ------------------------------------------------------------------ | | name | FieldPath<T> | Required. Registered field path (typed with your form values). | | control | Control<T> | Required. Form control from useForm. | | label | string | Label above the field. Shows a * when rules.required is set. | | rules | RegisterOptions | Validation rules (same as Controller rules). | | error | string | Error message shown under the input; red border when set. | | containerStyle | ViewStyle | Outer container style. | | inputStyle | TextStyle | TextInput text/style overrides. | | leftIcon | ReactNode | Optional icon on the left inside the field. | | rightIcon | ReactNode | Optional icon on the right. | | onRightIconPress | () => void | Press handler for the right icon wrapper. | | onInputPress | () => void | Called on onPressIn and onFocus on the input. | | multiline | boolean | Default false. | | numberOfLines | number | Default 1. | | onlyNumbers | boolean | Strips non-digits and uses number-pad. Default false. | | maxLength | number | Passed through to TextInput. | | hideLabel | boolean | Hides the label row when true. Default false. |

Notes:

• Default autoCapitalize is "none".
• Placeholder defaults to Enter ${label} when placeholder is omitted.
• RTL layouts use I18nManager for text alignment.

Development

npm install
npm run build

Compiled output is emitted to dist/ (prepublishOnly runs build before publish).

Tests

Automated checks use Jest with the React Native preset and Testing Library (rendering, changeText, icons, onlyNumbers). They do not replace running the UI on a simulator or device.

npm test

License

ISC