React Native KeyboardAvoidingView component Example

React Native

Nicesnippets

4503

28-08-2020


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...


Recommended Posts