Hello friends, We’re back with an amazing tutorial in react native. In today’s tutorial we would learn about KeyboardAvoidingView component of react native. Now maybe you heard about this component our maybe not. So we would start from scratch. KeyboardAvoidingView is used to solve one of the common problem we have seen while creating View with TextInput component. When we select the TextInput component then sometimes our Virtual keyboard or keypad overlaps it. So after using KeyboardAvoidingView we would avoid View disrupting the TextInput when we select it. No matter at which position your TextInput is it will alwasy open the Keyboard at the bottom of it. So in this tutorial we would learn about Example of KeyboardAvoidingView in React Native in Android iOS.
Contents in this project Example of KeyboardAvoidingView in React Native :-
1. Open your project’s main App.js file and import StyleSheet, KeyboardAvoidingView, ScrollView, TextInput, View and Text component.
|
1 2 3 |
import React from "react"; import { StyleSheet, KeyboardAvoidingView, ScrollView, TextInput, View, Text } from 'react-native'; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating return block, Now here We would make ScrollView as parent then put KeyboardAvoidingView as its child and put all the components inside it. Now what it does is when we select any TextInput even if it presents at the bottom of screen it will automatically scroll to top and open the Virtual keypad at the bottom of it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
return ( <View style={styles.MainContainer}> <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}> <KeyboardAvoidingView enabled={true}> <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center', color: 'red' }}> KeyboardAvoidingView Example in React Native </Text> <TextInput placeholder="TextInput 1" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 2" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 3" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 4" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 5" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 6" style={styles.textInput} underlineColorAndroid='transparent' /> </KeyboardAvoidingView> </ScrollView> </View> ); |
4. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create({ MainContainer: { padding: 12, flex: 1, justifyContent: 'center', alignItems: 'center' }, textInput: { marginTop: 45, height: 40, width: 320, textAlign: 'center', borderWidth: 2, borderColor: 'green', borderRadius: 7, }, }); |
5. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import React from "react"; import { StyleSheet, KeyboardAvoidingView, ScrollView, TextInput, View, Text } from 'react-native'; export default function App() { return ( <View style={styles.MainContainer}> <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}> <KeyboardAvoidingView enabled={true}> <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center', color: 'red' }}> KeyboardAvoidingView Example in React Native </Text> <TextInput placeholder="TextInput 1" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 2" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 3" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 4" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 5" style={styles.textInput} underlineColorAndroid='transparent' /> <TextInput placeholder="TextInput 6" style={styles.textInput} underlineColorAndroid='transparent' /> </KeyboardAvoidingView> </ScrollView> </View> ); } const styles = StyleSheet.create({ MainContainer: { padding: 12, flex: 1, justifyContent: 'center', alignItems: 'center' }, textInput: { marginTop: 45, height: 40, width: 320, textAlign: 'center', borderWidth: 2, borderColor: 'green', borderRadius: 7, }, }); |
Screenshots :-
Screenshot Without Using KeyboardAvoidingView :-
