Doesn't scroll to the right position when a header is before multiple textfields

Hi ! First and foremost, thank you for your great work. I try to make an app with a header at the top of each view. When I try to make the register page, I have to put several TextInputs below the header in a KeyboardAwareScrollView. When I click on a TextField below the Keyboard, the view doesn’t scroll to the right position, my TextField stay below the Keyboard. But when I remove the header, the KeyboardAwareScrollView works as expected.

Here is a gif representing the problem:

My code in index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Dimensions,
} from 'react-native';

let win = Dimensions.get('window')

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export default class scrollView extends Component {
  render() { return (
    <View style={styles.view}>
      <View style={{height: 200}}>
        <Text style={{marginTop: 20, color: 'white'}}>This is an area I need to put some header</Text>
        <Text style={{marginTop: 100, color: 'white'}}>What can I do ?</Text>
      </View>
    <KeyboardAwareScrollView contentContainerStyle={styles.centered}>
      <Text style={styles.title}>Form</Text>
      <View style={styles.connectTitle}>
        <Text style={styles.connectText}>Connection</Text>
      </View>
      <View style={styles.connectTextInputContainer}>
        <View style={styles.connectTextInputBackground}>
          <TextInput ref={(r) => {this.FirstInput = r;}} placeholder='id'
            style={styles.textInput} onChangeText={this.onChangeTitle}
            returnKeyType={'next'} onSubmitEditing={(event) => {
              this.SecondInput.focus();
            }} />
        </View>
        <View style={styles.connectTextInputBackground}>
          <TextInput ref={(r) => {this.SecondInput = r;}} placeholder='password'
            style={styles.textInput} secureTextEntry={true}
            onChangeText={this.onChangeTitle}
            enablesReturnKeyAutomatically={true} returnKeyType={'send'} />
        </View>
      </View>
      <View style={styles.connectTitle}>
        <Text style={styles.connectText}>Register</Text>
      </View>
      <View style={[styles.connectTextInputBackground,
        styles.registerTextInputBackground]}>
        <TextInput ref={(r) => {this.nom = r;}} placeholder='lastname' style={styles.textInput}
          onChangeText={this.onChangeTitle} returnKeyType={'next'}
          onSubmitEditing={(event) => {
            this.prenom.focus();
          }} />
      </View>
      <View style={[styles.connectTextInputBackground,
        styles.registerTextInputBackground]}>
        <TextInput ref={(r) => {this.prenom = r;}} placeholder='firstname'
          style={styles.textInput} returnKeyType={'next'}
          onSubmitEditing={(event) => {
            this.identifiant.focus();
          }} />
      </View>
      <View style={[styles.connectTextInputBackground,
        styles.registerTextInputBackground]}>
        <TextInput ref={(r) => {this.identifiant = r;}} placeholder='id'
          style={styles.textInput} onChangeText={this.onChangeTitle}
          returnKeyType={'next'} onSubmitEditing={(event) => {
            this.messagerie.focus();
          }} />
      </View>
      <View style={[styles.connectTextInputBackground,
        styles.registerTextInputBackground]}>
        <TextInput ref={(r) => {this.messagerie = r;}} placeholder='mail'
          style={styles.textInput} returnKeyType={'next'}
          onSubmitEditing={(event) => {
            this.password.focus();
          }} />
      </View>
      <View style={[styles.connectTextInputBackground,
        styles.registerTextInputBackground]}>
        <TextInput ref={(r) => {this.password = r;}} placeholder='password'
          secureTextEntry={true} style={styles.textInput}
          enablesReturnKeyAutomatically={true} returnKeyType={'send'}/>
      </View>
    </KeyboardAwareScrollView>
  </View>
  )}
}

const styles = StyleSheet.create({
  centered: {
    alignItems: 'center',
  },
  connectText: {
    color: 'white',
    fontSize: (16 / 360) * win.width,
  },
  connectTitle: {
    justifyContent: 'flex-start',
    marginTop: (18 / 600) * win.height,
    width: (322 / 360) * win.width,
  },
  connectTextInputBackground: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    flexDirection: 'row',
    height: (30 / 600) * win.height,
    marginBottom: (11 / 600) * win.height,
    marginTop: (15 / 600) * win.height,
    width: (154 / 360) * win.width,
  },
  connectTextInputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: (322 / 360) * win.width,
  },
  fourteen: {
    fontSize: (14 / 360) * win.width,
  },
  registerTextInputBackground: {
    marginBottom: 0,
    marginTop: (11 / 600) * win.height,
    width: (322 / 360) * win.width,
  },
  textInput: {
    color: 'black',
    flex: 1,
    fontSize: (16 / 360) * win.width,
    height: (16 / 600) * win.height,
    marginLeft: (15 / 360) * win.width,
    marginTop: (13 / 600) * win.height / 2,
  },
  title: {
    color: 'white',
    fontSize: (18 / 360) * win.width,
  },
  view: {
    backgroundColor: 'black',
    flex: 1,
  },
})

AppRegistry.registerComponent('scrollView', () => scrollView);

° React-Native: 0.39.2 ° Lib: 0.2.4

[reut-co]

I also encountered a weird bug:

1. when I focused on the first textInput everything works fine

2. and then right after clicking on the first test input I clicked on the third test2 input and that what happened:

the result is that there is an unwanted space on the top of the screen.

[alvaromb]

Hi @avencat!

Thanks for your detailed issue! This is definitely a weird issue, because having the upper headers is probably making the scroll unusable for some fields. I would try two things, first of all use the extraScrollHeight prop of the KeyboardAwareScrollView and set the prop as the height of your headers. If that’s not working, my suggestion is that you add both headers inside the scroll view, that would definitely work.