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:

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

Light Mode

Dark Mode

Date Picker Previews

Date Picker Input Field (Light & Dark)

View Date Picker Modal Examples (Click to expand)

Single Date Selection (Light & Dark)

Date & Time Selection (Light & Dark)

Date Range Selection (Light & Dark)

Multiple Date Selection (Light & Dark)

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.