CustomInput Component

A customizable text input component for React Native using react-native-paper. Supports password fields, icons, error handling, and more.

Installation

Ensure you have react-native-paper installed in your project: npm install react-native-paper

Then install the package: npm install react-native-customtextinput

Usage

import React, { useState } from 'react';

import { View } from 'react-native';

import CustomInput from 'react-native-reusableinputwithpaper';

const MyComponent = () => { const [text, setText] = useState('');

const [isPasswordVisible, setIsPasswordVisible] = useState(false);

return ( <CustomInput name={text} label="Password" isPassword isPasswordVisible={isPasswordVisible} togglePasswordVisibility={() => setIsPasswordVisible(!isPasswordVisible)} onChangeText={setText} /> ); };

export default MyComponent;

Props

| Property | Type | Description | |----------------------------|-----------------------------|-------------------------------------------------| | name | string | Input field value | | label | string | Placeholder label text | | style | any | Custom style for the input field | | leftIcon | ImageSourcePropType | Left-side icon | | rightIcon | any | Right-side icon | | mode | 'flat' | 'outlined' | Input field mode (flat or outlined) | | Error | boolean | Shows error state | | errorText | string | Error message | | setName | (text: string) => void | Callback function to set the input value | | setError | (hasError: boolean) => void| Callback function to set error state | | maxLength | number | Max characters allowed in input | | keyboardType | KeyboardTypeOptions | Keyboard type for the input field | | onChangeText | (text: string) => void | Handles text changes in the input | | onFocus | () => void | Callback function when the input gains focus | | onBlur | () => void | Callback function when the input loses focus | | isPassword | boolean | If true, hides input text for password fields | | isPasswordVisible | boolean | Controls the visibility of the password text | | togglePasswordVisibility | () => void | Toggles password visibility when pressed |