TextInput & Touchable Components
Master TextInput and Touchable components for handling user input and touch interactions in React Native applications. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
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.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
TextInput Properties
- value - Controlled input value — a critical concept in cross-platform mobile development that you will use frequently in real projects
- onChangeText - Text change callback — a critical concept in cross-platform mobile development that you will use frequently in real projects
- placeholder - Placeholder text — a critical concept in cross-platform mobile development that you will use frequently in real projects
- secureTextEntry - Password input — a critical concept in cross-platform mobile development that you will use frequently in real projects
- keyboardType - Keyboard type (email, numeric, etc.)
- multiline - Multi-line text input — a critical concept in cross-platform mobile development that you will use frequently in real projects
- maxLength - Maximum character limit — a critical concept in cross-platform mobile development that you will use frequently in real projects
- autoFocus - Auto focus on mount — a critical concept in cross-platform mobile development that you will use frequently in real projects
Touchable Components
- TouchableOpacity - Button with opacity feedback — a critical concept in cross-platform mobile development that you will use frequently in real projects
- 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
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;