React Native Forminput
A beautiful, customizable form input component for React Native applications
Features
Text Input & Date Picker
Unified component that handles both text input and date picker modes with extensive customization options.
Grouped Props API
Modern approach with logically organized prop groups for better TypeScript support and developer experience.
Extensive Customization
Customize everything from styles and icons to validation behavior and component passthrough.
Quick Start
1. Installation
bash
npm install @react-native-utils/forminput
# or
yarn add @react-native-utils/forminput2. Basic Usage
tsx
import { useState } from "react";
import { FormInput } from "@react-native-utils/forminput";
const App = () => {
const [name, setName] = useState<string>("");
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)
}}
/>
);
};