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 '@muskangoel2711/react-native-customtextinput';

const MyComponent = () => {

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

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

return (

<View>

  <CustomInput

    name={text}

    label="Username"

    onChangeText={setText}

  />

  <CustomInput

    name={text}

    label="Password"

    isPassword

    isPasswordVisible={isPasswordVisible}
    
    togglePasswordVisibility={() => setIsPasswordVisible(!isPasswordVisible)}

    onChangeText={setText}

  />

</View>

); };

export default MyComponent;

Props

| Property | Type | Description | |----------------------------|------------------------------------------|------------------------------------| | name | string | Input field value | | label | string | Placeholder label | | mode | "flat" \| "outlined" | Input field style mode | | textColor | string | Text color | | style | StyleProp<ViewStyle \| TextStyle> | Custom styles for input | | iconPath | ImageSourcePropType | Left-side icon | | isPassword | boolean | If true, hides input text | | isPasswordVisible | boolean | Controls password visibility | | togglePasswordVisibility | () => void | Toggles password visibility | | passwordIconPath | ImageSourcePropType | Icon for password visibility toggle | | Error | boolean | Shows error state | | errorText | string | Error message | | maxLength | number | Max characters allowed | | keyboardType | KeyboardTypeOptions | Keyboard type | | onChangeText | (text: string) => void | Handles text change | | returnKeyType | 'done' \| 'next' | Keyboard return key type | | onSubmitEditing | () => void | Callback for submit | | forwardRef | Ref<RNTextInput> | Ref forwarding | | editable | boolean | Controls input editability | | selectTextOnFocus | boolean | Selects text on focus |