React-native-keyboard-aware-scroll-view: Extra empty space on top of the screen

[shrutic]

I have worked on moving the Header inside the KeyboardAwareScrollView. And I have 3 text fields ( 2 oneline and one multi-line) below it. When I tap on any of these text fields and then tap outside to dismiss keyboard, I get this empty white space on top.

KeyboardAwareScrollView version: 0.2.8
React native version: 0.43.3
<KeyboardAwareScrollView automaticallyAdjustContentInsets={false} keyboardShouldPersistTaps='always' scrollEventThrottle={10} extraHeight={250} resetScrollToCoords={{x: 0, y: 0}} onKeyboardWillShow={this.onKeyboardWillShow.bind(this)} onKeyboardWillHide={this.onKeyboardWillHide.bind(this)} >

Not sure what I am missing. As per this thread , the latest 0.2.8 should have the fix, but it didnt work for me.

[Swordsman-Inaction]

@shrutic I tried with the code you provide, but cannot find the issue you said. Could you provide a simple demo to reproduce this issue?

[dylannlaw]

I am having the same issue. It works okay in Android simulator but not in iOS simulator.
additional space is added on top of the first text input.

[Swordsman-Inaction]

@dylannlaw I tested this with the code:

      <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
        <KeyboardAwareScrollView
           automaticallyAdjustContentInsets={false}
           keyboardShouldPersistTaps='always'
           scrollEventThrottle={10}
           extraHeight={250}
           resetScrollToCoords={{x: 0, y: 0}}
        >
          <View style={{marginTop: 25}}>
            <Text style={{fontSize: 16}}>
              Header
            </Text>
          </View>
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />

        </KeyboardAwareScrollView>
      </View>

But I cannot reproduce it. Could you write a simple demo to reproduce it?

[nguyenhvubk]

I think the issue would be produced if you do not wrap the KeyboadAwareScrollview under FULL screen View.
I also have this issue when i call it below a header view
Just guessing

[Swordsman-Inaction]

@nguyenhvubk
Like this ?

      <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
        <View style={{height: 44, backgroundColor: 'blue'}}>
          <Text style={{fontSize: 16, marginTop: 20}}>
            NavigationBar
          </Text>
        </View>
        <KeyboardAwareScrollView
           automaticallyAdjustContentInsets={false}
           keyboardShouldPersistTaps='always'
           scrollEventThrottle={10}
           extraHeight={250}
           resetScrollToCoords={{x: 0, y: 0}}
        >
          <View>
            <Text style={{fontSize: 16}}>
              Header
            </Text>
          </View>
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />
          <TextInput style={styles.textInput} />

        </KeyboardAwareScrollView>
      </View>

Still cannot reproduce. 😕

[nguyenhvubk]

Still get this issue when put KeyboardAwareScrollView outside, will try your code

Update: my bad... try all your props and it worked wherever it be putted in, thank you very much !!!

[Swordsman-Inaction]

@nguyenhvubk
glad to help.

@shrutic @dylannlaw
Do you still get this issue? I'll close this issue later if you don't have other questions.

[dylannlaw]

You might proceed with closing this issue as I tried another library which supported Android at the same time.

[alvaromb]

Hi @dylannlaw!

Can you point us the library you're using? It might help us to solve the issue. Thanks!

[dylannlaw]

@alvaromb I'm using Native Base component and I wrap all my input component with a container component and it works seamlessly for both iOS and Android.

[alvaromb]

@dylannlaw Native Base is using keyboard-aware-scroll-view https://github.com/GeekyAnts/NativeBase/blob/master/package.json#L43

[dylannlaw]

@alvaromb ya I am aware of that but it does not have the problem that @shrutic mentioned.

[shrutic]

I still get this issue. Very busy to come up with demo app

Sent from my iPhone

On Apr 25, 2017, at 10:39 PM, Dylan Law [e-mail] wrote:

You might proceed with closing this issue as I tried another library which supported Android at the same time.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Swordsman-Inaction]

I'll close this issue for now. You can always re-open it after providing a reproducible demo.

[MSchmidt]

Had the same issues. What solves it is to add automaticallyAdjustContentInsets={false} to KeyboardAwareScrollView.

[Palisand]

Thank you @MSchmidt ! So to confirm, this is only an iOS issue? automaticallyAdjustContentInsets is an iOS-only prop.

[JansenZ]

it works! thank u @MSchmidt

[alvaromb]

This is an upstream issue caused by ScrollView component, it's not related to this library.