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