RN
RN Base Components

TextInput Component

A comprehensive and customizable text input component for React Native applications with multiple variants, built-in validation support, and extensive styling options.

Features

  • 🎨 Multiple Variants - Default, Outlined, and Flat input styles
  • 🏷️ Label Support - Built-in label with required field indicators
  • ❌ Error Handling - Built-in error display and styling
  • 🎯 Icon Integration - Left and right component support
  • 🔧 Highly Customizable - Extensive styling and behavior options
  • ♿ Accessibility Ready - Screen reader support and proper semantics
  • 📱 Platform Optimized - Consistent behavior across iOS and Android

Installation

💻Bash
npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX
import React from 'react'
import { TextInput } from 'rn-base-component'

export default function App() {
  return  console.log(text)} />
}

TextInput Variants

Default TextInput

⚛️TSX

Outlined TextInput

⚛️TSX

Flat TextInput

⚛️TSX

Advanced Usage

With Label and Validation

⚛️TSX

With Icons

⚛️TSX
}
  rightComponent={
    
      
    
  }
  value={searchQuery}
  onChangeText={setSearchQuery}
/>

Password Input with Toggle

⚛️TSX
import React, { useState } from 'react'

export default function PasswordInput() {
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)

  return (
     setShowPassword(!showPassword)}>
          
        
      }
    />
  )
}

API Reference

TextInputProps

PropTypeDefaultDescription
containerStyleStyleProp<ViewStyle>undefinedStyle for the outer container
editablebooleantrueWhether text is editable
inputContainerStyleStyleProp<ViewStyle>undefinedStyle for the input container
inputStyleStyleProp<TextStyle>undefinedStyle for the input component
labelstringundefinedLabel text above the input
isRequirebooleanundefinedAdd asterisk beside the label
labelStyleStyleProp<TextStyle>undefinedStyle for the label
labelPropsTextPropsundefinedAdditional props for the label
leftComponentReact.ReactNodeundefinedComponent on the left side
rightComponentReact.ReactNodeundefinedComponent on the right side
errorTextstringundefinedError message to display
errorPropsTextPropsundefinedProps for the error text
onFocus() => voidundefinedFocus callback
onBlur() => voidundefinedBlur callback

Inherited Props

All React Native TextInputProps are supported, including value, onChangeText, placeholder, secureTextEntry, multiline, numberOfLines, keyboardType, autoCapitalize, autoCorrect, maxLength, returnKeyType, onSubmitEditing.

Form Integration

Login Form

⚛️TSX
import React, { useState } from 'react'
import { View } from 'react-native'
import { TextInput, Button } from 'rn-base-component'

export default function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [errors, setErrors] = useState({})

  const validateForm = () => {
    const newErrors = {}

    if (!email) {
      newErrors.email = 'Email is required'
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email is invalid'
    }

    if (!password) {
      newErrors.password = 'Password is required'
    } else if (password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters'
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = () => {
    if (validateForm()) {
      console.log('Login:', { email, password })
    }
  }

  return (
    
      

      

      
    
  )

  const styles = StyleSheet.create({
    formContainer: {
      padding: 20,
    },
    inputSpacing: {
      marginBottom: 16,
    },
    inputLargeSpacing: {
      marginBottom: 24,
    },
  })
}

Best Practices

  1. Label Clarity - Use clear, descriptive labels
  2. Placeholder Text - Provide helpful placeholder examples
  3. Error Messages - Show specific, actionable error messages
  4. Keyboard Types - Use appropriate keyboard types for input
  5. Auto-correction - Disable for sensitive inputs (emails, passwords)
  6. Accessibility - Provide proper accessibility labels and hints

Performance

Use onChangeText debouncing for search inputs and avoid complex validation on every keystroke.