JSPM

@react-native-utils/forminput

2.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 21
  • Score
    100M100P100Q66711F
  • License MIT

A comprehensive React Native form input component with date selection, validation, and customizable styling.

Package Exports

  • @react-native-utils/forminput
  • @react-native-utils/forminput/lib/commonjs/index.js
  • @react-native-utils/forminput/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-native-utils/forminput) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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:

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

FormInput Component Light Mode

Dark Mode

FormInput Component Dark Mode

Date Picker Previews

Date Picker Input Field (Light & Dark)

Date Picker Input Light Date Picker Input Dark
View Date Picker Modal Examples (Click to expand)

Single Date Selection (Light & Dark)

Date Picker Single Light Date Picker Single Dark

Date & Time Selection (Light & Dark)

Date Time Picker Light Date Time Picker Dark

Date Range Selection (Light & Dark)

Date Range Picker Light Date Range Picker Dark

Multiple Date Selection (Light & Dark)

Multiple Date Picker Light Multiple Date Picker 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.