react-native-form-controls

A highly customizable input component for React Native. Date/time: uses react-native-date-picker when installed (recommended); otherwise falls back to a built-in picker. Autocomplete: built-in Google Places (pass googleApiKey).

Features

• Text, password, textarea: Standard inputs
• Date, time, datetime: Uses react-native-date-picker when installed (best UX); otherwise built-in modal picker
• Autocomplete: Built-in Google Places search (pass googleApiKey; uses Places API)
• Customizable styles: container, label, input
• Error handling: error message and error border
• Icons: left and right icons with actions
• Controlled/uncontrolled: Supports value and onChangeText for all types, including date/time

Installation

Required: react-native

npm install react-native-form-controls
# or
yarn add react-native-form-controls

Optional (recommended for date/time): For the best date/time picker experience, install react-native-date-picker. The package will use it automatically when present; otherwise a built-in picker is used.

npm install react-native-date-picker
# or
yarn add react-native-date-picker

Example app

A runnable example (Expo) is in the example/ folder:

npm run build && cd example && npm install && npm start

See example/README.md for details.

Usage

import { Input, COLORS } from 'react-native-form-controls';

// Text
<Input type="text" label="Name" placeholder="Enter name" />

// Password
<Input type="password" label="Password" placeholder="Enter password" />

// Textarea
<Input type="textarea" label="Notes" placeholder="Enter notes" />

// Date (built-in picker)
<Input type="date" label="Birth date" onChangeText={(iso) => setDate(iso)} />

// Time (built-in picker)
<Input type="time" label="Time" onChangeText={(iso) => setTime(iso)} />

// Autocomplete (built-in; requires googleApiKey – Google Places API key)
<Input
  type="autocomplete"
  label="Location"
  googleApiKey="YOUR_GOOGLE_PLACES_API_KEY"
  onChangeText={(place) => console.log(place)}
/>

Use COLORS from the package to match built-in theming (e.g. labelStyle={{ color: COLORS.primary }}).

Props

| Prop | Type | Description | |------|------|-------------| | type | 'text' \| 'password' \| 'date' \| 'time' \| 'datetime' \| 'textarea' \| 'autocomplete' | Input type | | label | string | Label above the input | | error | string | Error message (shows below input and error border) | | googleApiKey | string | Required for type="autocomplete". Google Places API key. | | containerStyle | ViewStyle | Container style | | labelStyle | TextStyle | Label style | | inputStyle | TextStyle | Input style | | leftIcon | ImageSourcePropType | Left icon image source | | rightIcon | ReactNode | Right icon (e.g. eye for password) | | Plus all standard TextInput props: value, onChangeText, placeholder, etc. |

For date/time/datetime, onChangeText receives an ISO date string. For autocomplete, it receives an object with addresstext, latitude, longitude, location (e.g. city, country, state, pincode).

Publishing to npm

From the repository root:

# 1. Build the library
npm run build

# 2. Log in to npm (one-time)
npm login

# 3. Publish
npm publish

To publish a new version, update version in package.json (e.g. 1.1.1) then run npm publish again. Use npm version patch to bump the version automatically.

License

MIT