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 (
    <KeyboardAvoidingView
      style={styles.container}
    >
      <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} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

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

Output

It will help you...