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:
- 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
anddatePickerConfirmButtonTextStyle
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
anddatePickerStyles
for advanced customization. - Updated
datepicker
library to the latest version. - Added
leftIconSource
andrightIconSource
props: These props allow users to specify the source of their icons (e.g., FontAwesome, MaterialIcons, etc.). The default source is FontAwesome. - Added
leftIconSize
andrightIconSize
props: These props allow users to specify size of the icons. - Added
multiline
andnumberOfLines
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 newtheme
prop that allows users to set the theme of the component. The available options arelight
,dark
, andsystem
. Thesystem
option automatically matches the theme of the device.
[1.6.0] - 2024-06-17
Changed
- Updated GIT Repository
- Updated various style props to
ViewStyle
andTextStyle
: 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. Whendisabled
is set totrue
, 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.