ReactNative How to keep the scroll view position when the keyboard opened - react-native

Question

I am using React Native's ScrollView and FlatList.
When the keyboard is opened,
I would like to see the same screen as before opening the keyboard.
I thought I could use the scrollTo method depending on the keyboard state
It does not work properly.
Is there a typical implementation of a similar case?
keyboardWillShow(e) {
const { scrollView } = this;
const { scrollPostiion } = this.state;
const { height } = e.endCoordinates;
this.setState({
keyboardHeight: height,
scrollPostiion: scrollPostiion + height,
});
scrollView.scrollTo({ x: 0, y: scrollPostiion + height, animated: false });
}
keyboardWillHide() {
const { scrollView } = this;
const { scrollPostiion, keyboardHeight } = this.state;
this.setState({
keyboardHeight: 0,
scrollPostiion: scrollPostiion - keyboardHeight,
});
scrollView.scrollTo({ x: 0, y: scrollPostiion - keyboardHeight, animated: false });
}
changeNowScrollPosition = (event) => {
this.setState({
scrollPostiion: event.nativeEvent.contentOffset.y,
});
}
<ScrollView
ref={(c) => { this.scrollView = c; }}
keyboardShouldPersistTaps="handled"
pinchGestureEnabled={false}
keyboardDismissMode="interactive"
onScroll={(event) => {
changeNowScrollPosition(event);
}}
onScrollEndDrag={(event) => {
changeNowScrollPosition(event);
}}
scrollEventThrottle={16}
>

Answer 1

use KeyboardAvoidingView :
Following is a simple example:
import React, { Component } from 'react';
import { Text, Button, StatusBar, TextInput, KeyboardAvoidingView, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
email: '',
};
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" />
<KeyboardAvoidingView behavior="padding" style={styles.form}>
<TextInput
style={styles.input}
value={this.state.email}
onChangeText={email => this.setState({email})}
ref={ref => {this._emailInput = ref}}
placeholder="email#example.com"
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="send"
onSubmitEditing={this._submit}
blurOnSubmit={true}
/>
<View>
<Button title="Sign Up" onPress={this._submit} />
<Text style={styles.legal}>
Some important legal fine print here
</Text>
</View>
</KeyboardAvoidingView>
</View>
);
}
_submit = () => {
alert(`Confirmation email has been sent to ${this.state.email}`);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
input: {
margin: 20,
marginBottom: 0,
height: 34,
paddingHorizontal: 10,
borderRadius: 4,
borderColor: '#000000',
borderWidth: 1,
fontSize: 16,
},
legal: {
margin: 10,
color: '#333',
fontSize: 12,
textAlign: 'center',
},
form: {
flex: 1,
justifyContent: 'space-between',
},
});
Please note: styling is important.
You're good to go!