Keyboard-aware Mutliline Text Input Component For React Native

A simple component for a keyboard-aware multiline TextInput.

The TextInput will shrink to fit entirely on the screen at all times.

Animations are done with react-native-reanimated to give a buttery smooth feeling.

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-keyboard-aware-text-input

# NPM
$ npm i react-native-keyboard-aware-text-input --save

2. Import the component

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import KeyboardAwareTextInput from 'react-native-keyboard-aware-text-input';

3. Basic usage.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Feel free to write a poem.
      </Text>
      <KeyboardAwareTextInput
          inputStyle={styles.input}
          offset={-170}
          placeholder={'Roses are red, violets are blue, I disliked programing this component, maybe you will so too. '}
          returnKeyType={'done'}
          textAlignVertical={'top'}
          multiline={true}
          blurOnSubmit={true}
        />
      <View style={styles.bottom}>
        <Text style={styles.paragraph}>
          I'm just here to take away some space.
        </Text>
        <Text style={styles.paragraph}>
          It feels like I'm in outer space. 🚀
        </Text>
      </View>
    </View>
  );
}

Preview:

Download Details:

Author: lkoehl

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/lkoehl/react-native-keyboard-aware-text-input

License: MIT