Keyboard Management
Learn to handle keyboard interactions, avoid keyboard overlap, and improve user experience when working with text inputs. 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
KeyboardAvoidingView
KeyboardAvoidingView automatically adjusts its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.. 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
Keyboard Events
- keyboardWillShow - Fired before keyboard is shown — a critical concept in cross-platform mobile development that you will use frequently in real projects
- keyboardDidShow - Fired after keyboard is shown — a critical concept in cross-platform mobile development that you will use frequently in real projects
- keyboardWillHide - Fired before keyboard is hidden
- keyboardDidHide - Fired after keyboard is hidden — a critical concept in cross-platform mobile development that you will use frequently in real projects
Keyboard Dismissal
- TouchableWithoutFeedback - Dismiss keyboard on tap outside
- ScrollView keyboardShouldPersistTaps - Control tap behavior
- TextInput returnKeyType - Set return key type — a critical concept in cross-platform mobile development that you will use frequently in real projects
- onSubmitEditing - Handle return key press — a critical concept in cross-platform mobile development that you will use frequently in real projects
Keyboard Management Example
import React, { useState } from 'react';
import {
View,
Text,
TextInput,
TouchableWithoutFeedback,
Keyboard,
KeyboardAvoidingView,
Platform,
ScrollView,
StyleSheet
} from 'react-native';
const KeyboardManagement = () => {
const [keyboardHeight, setKeyboardHeight] = useState(0);
const dismissKeyboard = () => {
Keyboard.dismiss();
};
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.content}>
<Text style={styles.title}>Keyboard Management</Text>
<ScrollView
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
>
<View style={styles.inputContainer}>
<Text style={styles.label}>First Name</Text>
<TextInput
style={styles.input}
placeholder="Enter first name"
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Last Name</Text>
<TextInput
style={styles.input}
placeholder="Enter last name"
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Email</Text>
<TextInput
style={styles.input}
placeholder="Enter email"
keyboardType="email-address"
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Message</Text>
<TextInput
style={[styles.input, styles.multilineInput]}
placeholder="Enter your message"
multiline
numberOfLines={4}
returnKeyType="done"
onSubmitEditing={dismissKeyboard}
/>
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
content: {
flex: 1,
},
scrollContent: {
padding: 20,
},
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',
},
multilineInput: {
height: 100,
textAlignVertical: 'top',
},
});
export default KeyboardManagement;