FormInput Component

The FormInput is a custom, reusable input component for React-Native applications. It supports both text input and date picker functionality, with extensive customization options.

▶️ View Live on Expo Snack ▶️ | Full Documentation

Table of Contents

• Installation
• Basic Usage
• Prop Groups
• Migration Guide
• Examples
• Component Previews
  • Text Input
  • Date Picker
• Changelog

Installation

npm install @react-native-utils/forminput
# or
yarn add @react-native-utils/forminput

Basic Usage

import { useState } from "react";
import { FormInput } from "@react-native-utils/forminput";

const App = () => {
  const [name, setName] = useState<string>("");

  // New grouped props approach (v2.0+)
  return (
    <FormInput
      text={{
        labelText: "Name",
        placeholderText: "Enter your name",
        value: name,
        characterLimit: 20,
      }}
      style={{
        isRequired: true,
      }}
      icon={{
        leftIcon: "user",
        rightIcon: "times-circle",
        rightIconColor: name ? "#999" : "#CCC",
        rightIconOnPress: () => setName("")
      }}
      core={{
        onTextChange: (text) => setName(text)
      }}
    />
  );
};

Prop Groups

FormInput v2.0+ uses a modern grouped props approach for better organization and TypeScript support:

| Prop Group | Description | Example | |------------|-------------|---------| | text | Text content props like label, placeholder, and values | text={{ labelText: "Name" }} | | style | Visual styling props | style={{ inputContainerStyle: { borderRadius: 8 } }} | | icon | Left and right icon configuration | icon={{ leftIcon: "user" }} | | core | Core functionality props | core={{ onTextChange: (text) => setValue(text) }} | | datePicker | Date picker functionality | datePicker={{ enabled: true }} | | datePickerStyle | Date picker styling | datePickerStyle={{ selectedTextStyle: { color: "blue" } }} | | componentProps | Props passed to underlying components | componentProps={{ textInputProps: { autoFocus: true } }} |

For detailed documentation of all available props within each group, refer to:

• Text Props Documentation
• Style Props Documentation
• Icon Props Documentation
• Core Props Documentation
• Date Picker Props Documentation
• Component Props Documentation

Migration Guide (v2)

Breaking Changes

Version 2.0 introduces a new props structure that groups related props together. While the flat props structure is still supported for backward compatibility, we recommend migrating to the new grouped approach:

Before (v1.x):

<FormInput 
  labelText="Name"
  value={name}
  onTextChange={(text) => setName(text)}
  leftIcon="user"
/>

After (v2.x):

<FormInput 
  text={{
    labelText: "Name",
    value: name
  }}
  core={{
    onTextChange: (text) => setName(text)
  }}
  icon={{
    leftIcon: "user"
  }}
/>

Examples

Basic Text Input

<FormInput
  text={{ labelText: "Email", placeholderText: "Enter your email" }}
  style={{ isRequired: true }}
  core={{ inputType: "email-address" }}
/>

Date Picker

<FormInput
  text={{ labelText: "Date of Birth", datePlaceholder: "Select Date" }}
  datePicker={{ 
    enabled: true,
    disableFutureDates: true,
    onDateChange: (date) => setSelectedDate(date)
  }}
  icon={{ leftIcon: "calendar" }}
/>

Password Input

<FormInput
  text={{ labelText: "Password", placeholderText: "Enter password" }}
  core={{ hiddenText: true }}
  icon={{ rightIcon: "eye", rightIconOnPress: () => togglePasswordVisibility() }}
/>

For complete documentation with all available props and advanced examples, please visit our documentation website.

Component Previews

Text Input Previews

Date Picker Previews

Changelog

For a complete version history, see our full changelog on the documentation website.

[2.0.2] - 2025-06-28

• Minor Bug Fixes.

[2.0.1] - 2025-06-28

• Minor Bug Fixes.

[2.0.0] - 2025-06-28

• BREAKING CHANGE: Introduced new grouped props structure for better organization and TypeScript support
• Added comprehensive JSDoc documentation to all prop types
• Maintained backward compatibility with flat props structure
• Improved TypeScript type definitions and intellisense support

[1.9.3] - 2025-05-01

• Added datePickerConfirmButtonStyle and datePickerConfirmButtonTextStyle props to allow users to customize the confirm button's style and text style in the date picker.

[1.9.2] - 2025-05-01

• Added datePlaceholderStyle prop to allow users to pass additional styles for the date placeholder text.
• Fixed minor styling issues in the date picker component.

Documentation

This README provides a quick overview of the FormInput component. For comprehensive documentation including:

• Complete API reference for all props
• Advanced usage examples
• Styling guide
• Theming instructions
• Form validation techniques
• Interactive demos

Please visit our documentation website.