React Native | KeyboardAvoidingView

Have you ever tried typing into a mobile app, and the keyboard pops up in front of the input field you’re typing in, so you can’t see the input field anymore? It’s a common pain point for developers and users. Luckily, React Native offers a nice component to solve this issue, called KeyboardAvoidingView.

What is KeyboardAvoidingView in React Native?

KeyboardAvoidingView is a core component in React Native to prevent the view from being hidden when the keyboard is present. It automatically shrinks, grows, moves, or pads its height, position, or padding when the keyboard is shown, which means that the input fields will always be visible and accessible. Essentially, this is a necessary component for forms or any screen that requires user input.

Attributes of React Native KeyboardAvoidingView:

KeyboardAvoidingView is a component in React Native that accepts what needs to be customized in the way it looks and behaves. Let’s go through some of the commonly used attributes:

• behavior: This prop decides what to do with the view when you display keyboard. It can be set to either ‘height’ or ‘padding’.
• padding: This will adjust the height of theKeyboardAvoidingView by adding padding to avoid the keyboard.
• height: This will adjust the height of the KeyboardAvoidingView by shifting its position upwards.
• enabled: The enabled attribute of KeyboardAvoidingView specifies whether the component should automatically adjust its position in response to the keyboard. This attribute is set to true by default, and will adjust automatically. By default, it does this automatically, but you can disable this behavior, setting it to false.
• keyboardVerticalOffset: This would be the distance from the React Native view to the top of a user screen, which may be non-zero in some cases. By default, this value is set to 0.
• contentContainerStyle: How to style the container that wraps around the content. That enables you to style the container the way you want.

Example of React Native KeyboardAvoidingView:

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

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          
          <TextInput placeholder="name" style={styles.textInput} />
              <TextInput placeholder="password" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  textInput: {
    height: 40,
    padding:5,
    borderColor: '#000000',
    borderWidth: 1,
    marginBottom: 5,
  },
  btnContainer: {
    backgroundColor: 'white',
    marginTop: 12,
  },
});

export default KeyboardAvoidingComponent;

Conclusion:

KeyboardAvoidingView is a powerful tool in React Native that enhances user experience by preventing the keyboard from overlapping input fields. If you know how to use it right, you’ll be able to construct intuitive and easy to use forms and input screens in your mobile applications. Try different configures so that you see what works for your particular use case, and remember, test it on both iOS and Android to get the best results.

Hire React Native Developers to build high-performing, user-friendly mobile applications.

Happy Coding!