TextInput & Touchable Components
Master TextInput and Touchable components for handling user input and touch interactions in React Native applications
60 min•By Priygop Team•Last updated: Feb 2026
TextInput Component
TextInput is the fundamental component for text input in React Native. It provides a text input field that users can type into, with extensive customization options for styling and behavior.
TextInput Properties
- value - Controlled input value
- onChangeText - Text change callback
- placeholder - Placeholder text
- secureTextEntry - Password input
- keyboardType - Keyboard type (email, numeric, etc.)
- multiline - Multi-line text input
- maxLength - Maximum character limit
- autoFocus - Auto focus on mount
Touchable Components
- TouchableOpacity - Button with opacity feedback
- TouchableHighlight - Button with highlight feedback
- TouchableWithoutFeedback - Touch without visual feedback
- Pressable - Modern touchable component with more control
- TouchableNativeFeedback - Android-specific ripple effect
Input Form Example
Example
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';
const InputForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
});
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
};
const handleSubmit = () => {
if (!formData.name || !formData.email || !formData.password) {
Alert.alert('Error', 'Please fill in all fields');
return;
}
Alert.alert('Success', 'Form submitted successfully!');
};
return (
<View style={styles.container}>
<Text style={styles.title}>User Registration</Text>
<View style={styles.inputContainer}>
<Text style={styles.label}>Name</Text>
<TextInput
style={styles.input}
value={formData.name}
onChangeText={(value) => handleInputChange('name', value)}
placeholder="Enter your name"
autoCapitalize="words"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Email</Text>
<TextInput
style={styles.input}
value={formData.email}
onChangeText={(value) => handleInputChange('email', value)}
placeholder="Enter your email"
keyboardType="email-address"
autoCapitalize="none"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Password</Text>
<TextInput
style={styles.input}
value={formData.password}
onChangeText={(value) => handleInputChange('password', value)}
placeholder="Enter your password"
secureTextEntry
/>
</View>
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 30,
color: '#333',
},
inputContainer: {
marginBottom: 20,
},
label: {
fontSize: 16,
fontWeight: '500',
marginBottom: 8,
color: '#333',
},
input: {
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 8,
padding: 12,
fontSize: 16,
backgroundColor: 'white',
},
button: {
backgroundColor: '#2196F3',
padding: 15,
borderRadius: 8,
alignItems: 'center',
marginTop: 20,
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default InputForm;