ReactNative How to keep the scroll view position when the keyboard opened

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!