Description:
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:
