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.0] - 2025-06-20

• 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.

[1.9.0] - 2025-04-02

• Introduced several new styling props for the DatePicker, allowing greater customization of its appearance (e.g., selectedContainerStyle, todayContainerStyle, datePickerLeftButtonStyle, etc.).
• Added support for additional datePickerProps and datePickerStyles for advanced customization.
• Updated datepicker library to the latest version.
• Added leftIconSource and rightIconSource props: These props allow users to specify the source of their icons (e.g., FontAwesome, MaterialIcons, etc.). The default source is FontAwesome.
• Added leftIconSize and rightIconSize props: These props allow users to specify size of the icons.
• Added multiline and numberOfLines props: These props allow users to enable multiline input and specify the number of lines for the input field.

[1.8.1] - 2024-09-11

• Fixed minor styling issue.

[1.8.0] - 2024-09-11

• Updated code to be compatible with Latest React Native Version.

[1.7.0] - 2024-07-15

Changed

• Updated visual style of the component.

Added

• theme prop: Introduced a new theme prop that allows users to set the theme of the component. The available options are light, dark, and system. The system option automatically matches the theme of the device.

[1.6.0] - 2024-06-17

Changed

• Updated GIT Repository
• Updated various style props to ViewStyle and TextStyle: This change allows users to get style suggestions more easily. This applies to all components where style props were previously used.

[1.5.0] - 2024-06-13

Added

• inputContainerBackgroundColor prop: This new prop allows you to customize the background color of the input container. You can pass any valid color string as the value.
• Disabled functionality for the datepicker: The datepicker can now be disabled, preventing user interaction. This can be controlled via the disabled prop. When disabled is set to true, the datepicker will be non-interactive.

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.