React Native KeyboardAvoidingView component Example




React Native KeyboardAvoidingView component Example

Hi Guys,

In this blog, I will explain you how to create keyboardavoidingview in react native. You can easily create keyboardavoidingview in react native. First i will import namespace KeyboardAvoidingView, after I will make onPress event using keyboardavoidingview in react native.

Here, I will give you full example for simply display keyboardavoidingview using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init keyboardavoidingview

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React from 'react';

import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard } from 'react-native';

const KeyboardAvoiding = () => {

return (




<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

<View style={styles.inner}>

<Text style={styles.header}>Login</Text>

<TextInput placeholder="Email" style={styles.textInput} />

<TextInput secureTextEntry={true} placeholder="Password" style={styles.textInput} />

<View style={styles.btnContainer}>

<Button title="Login" onPress={() => null} />







const styles = StyleSheet.create({

container: {

flex: 1


inner: {

padding: 24,

flex: 1,

justifyContent: "space-around"


header: {

fontSize: 36,

marginBottom: 48


textInput: {

height: 40,

borderColor: "#000000",

borderBottomWidth: 1,

marginBottom: 10


btnContainer: {

backgroundColor: "white",

marginTop: 12



export default KeyboardAvoiding;

Step 3 - Run project

In the last step run your project using bellow command.

npm start


It will help you...

#React Native