react-native-reusableinputwithpaper v1.1.4
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 |