react-native-common-input 🚀

📖 Overview

react-native-common-input is a flexible and reusable input component for React Native (CLI).

It provides icon support, password toggle, validation system, error handling, and full customization — all in a single smart component.

🛠️ Installation

Install the package using npm:

npm install react-native-common-input

🛠️ Required Peer Dependency

Install the package using npm:

npm install @react-native-vector-icons/fontawesome6

📸 Preview

✨ Key Features

• Password show / hide toggle
• Custom icon support (left / right / outside)
• Supports Image / SVG / Vector icons
• Manual error message support
• Label with optional required (*) indicator
• Disabled input state
• Custom container & input styling
• Works on Android & iOS
• Clean and reusable component API

🧩 Basic Usage

import CommonInput from 'react-native-common-input';
import { FontAwesome6 } from '@react-native-vector-icons/fontawesome6';

<CommonInput
  label="Password"
  required
  placeholder="Enter password"
  secureTextEntry
  showToggle
  icon={
    <FontAwesome6
      name="lock"
      size={18}
      color="#555"
      solid
    />
  }
  iconPosition="left"
  containerStyle={{
    marginVertical: 12,
  }}
  inputStyle={{
    fontSize: 16,
  }}
/>

✨ Props Can Be Used

| Prop | Description | Default | |------|------------|---------| | value | Input value | '' | | onChangeText | Function triggered when text changes | null | | placeholder | Placeholder text displayed inside input | '' | | label | Label text displayed above input | null | | required | Shows required (*) indicator | false | | icon | Custom icon element (vector / image / svg) | null | | iconPosition | Position of icon as: left or right | 'left' | | iconOutside | Show icon outside the input container | false | | secureTextEntry | Enables password mode | false | | showToggle | Shows password visibility toggle | false | | toggleIcon | Custom toggle icon function | null | | onToggle | Function triggered when toggle is pressed | null | | error | Manual error message below input | null | | disabled | Disables input interaction | false | | containerStyle | Custom style for wrapper container | null | | inputStyle | Custom style for TextInput | null |