React-native-keyboard-aware-scroll-view: Doesn't scroll to the right position when a header is before multiple textfields

[avencat]

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

[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.

[avencat]

Wahou ! Thank you for your quick answer ! The extraScrollHeight definitely worked ! Thanks for your time and your great lib ! 😄

[alvaromb]

Glad to have helped @avencat!

Please feel free to open any issues you have or even send PRs if you feel something is missing 👍

[alvaromb]

Just a quick off-topic note, if you're targeting iOS, usually the scroll view bounces from all the screen, not just the form container. It would match more iOS Human Interface Guidelines to have everything inside the scroll view.

[avencat]

Ok thanks for the advice, I put the header in the scroll view ! Thanks again ! (Now it works perfectly even without the extraScrollHeight)

[reut-co]

@alvaromb if I put the headers inside the KeyboardAwareScrollView and the page's content is long, the headers are also being scrolled up when scrolling the page (even though the keyboard is closed.. and even when I'm trying to add a that will wrap only the content itself without the headers...)
what is the preferred solution here?

[reut-co]

I also encountered a weird bug:

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

1. 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.

[Swordsman-Inaction]

@reut-co take this PR #106 to fix this issue before it's merged

[shrutic]

@Swordsman-Inaction I installed the 0.2.8 version and still get the issue described by @reut-co.
Below is the code that I have

```
automaticallyAdjustContentInsets={false}
keyboardShouldPersistTaps='always'
scrollEventThrottle={10}
resetScrollToCoords={{x: 0, y: 0}}
extraHeight= {250}
onKeyboardWillShow={this.onKeyboardWillShow.bind(this)}
onKeyboardWillHide={this.onKeyboardWillHide.bind(this)}
>

```
thoughts?