React-native-keyboard-aware-scroll-view: Still bouncing

[holleB]

Hi,

I still got the bouncing behaviour from #95.

The upper TextInput set's the focus to the lower automatically on onSubmitEditing, the KeyboardAwareScrollView moves to the lower TextInput with a bounce? I tried enableResetScrollToCoords={false} but the behaviour didn't change.

[alvaromb]

Hi @holleB!

Can you show us the source code?

Thanks.

[holleB]

Hi,

that's about the smallest working code example I could come up with, that still shows the behavior:

import React, {Component} from 'react';
import {Text, TextInput, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{margin: 20, flex: 1}}>
          <View style={{height: 100}}/>
          <KeyboardAwareScrollView
            extraHeight={150}
            enableResetScrollToCoords={false}
            contentContainerStyle={{flexGrow: 1}}
          >
            <View style={{flex: 1, justifyContent: 'center', margin: 20, backgroundColor: 'lavender'}}>
              <View>
                <Text>Field 1</Text>
                <TextInput
                  onSubmitEditing={() => this.field2.focus()}
                  placeholder='Placeholder 1'
                />
                <View style={{height: 25}}/>
                <Text>Field 2</Text>
                <TextInput
                  ref={ref => this.field2 = ref}
                  placeholder='Placeholder 2'
                />
                <View style={{height: 25}}/>
              </View>
            </View>
          </KeyboardAwareScrollView>
        </View>
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          height: 100,
          width: 375,
        }}
        >
          <Text style={{fontSize: 26}}>Click me</Text>
        </View>
      </View>
    );
  }
}

It seems the fixed dimensions of the views on top and bottom of the KeyboardAwareScrollView cause the problem. So perhaps I just misuse flex layout. Any pointers would be welcome.

Thx.

[alvaromb]

This seems odd

<View style={{flex: 1}}>
        <View style={{margin: 20, flex: 1}}>

Can you try to remove the first View?

[holleB]

I can do that if I move the "Click me" container into the second view. Now the code looks like this:

import React, {Component} from 'react';
import {Text, TextInput, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{margin: 20, flex: 1}}>
        <View style={{height: 100}}/>
        <KeyboardAwareScrollView
          extraHeight={150}
          enableResetScrollToCoords={false}
          contentContainerStyle={{flexGrow: 1}}
        >
          <View style={{flex: 1, justifyContent: 'center', margin: 20, backgroundColor: 'lavender'}}>
            <View>
              <Text>Field 1</Text>
              <TextInput
                onSubmitEditing={() => this.field2.focus()}
                placeholder='Placeholder 1'
              />
              <View style={{height: 25}}/>
              <Text>Field 2</Text>
              <TextInput
                ref={ref => this.field2 = ref}
                placeholder='Placeholder 2'
              />
              <View style={{height: 25}}/>
            </View>
          </View>
        </KeyboardAwareScrollView>
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          height: 100,
          width: 375,
        }}
        >
          <Text style={{fontSize: 26}}>Click me</Text>
        </View>
      </View>
    );
  }
}

and it still bounces.

[alvaromb]

This is also very suspicious

 <View style={{height: 100}}/>

KeyboardAwareScrollView should be the top view or the first node after a View with flex: 1. Why don't you use some top margin or padding?

[holleB]

<View style={{height: 100}}/> is not just a spacer, it can be container. E.g. the buttons "Login/Registrieren" from my first animated screenshot. Part of the screen that should not scroll out of view.

[Waltari10]

Does this happen only in simulator/emulator or on the actual device as well? I'm having a similar problem, but it seems to not happen on actual device. I think it might be because on iOS simulator when you select the textField a keyboard doesn't show up, even though on device it does. Maybe the React-Native-Keyboard-Aware-Scroll-View is assuming a keyboard is popping up even though it doesn't on the simulator? Just an idea.

[holleB]

It happens on simulator and device. You can observe it in the simulator if you force keyboard with Cmd + K.

[Waltari10]

For me forcing keyboard doesn't cause bouncing. Only focusing on textInput.

[holleB]

@Waltari10 Forcing the keyboard so you actually see the software keyboard. And then focusing on textinput.

[haddadnj]

+1

[luco]

Updates on this?

[alvaromb]

Can you test the new release? https://github.com/APSL/react-native-keyboard-aware-scroll-view/releases/tag/v0.4.2

Ping me if this issue still persists and I'll reopen.

Thanks.

[PacciniBruno]

@alvaromb seeing the same behaviour in v0.4.3 😬

[Kgiberson]

+1

[ghost]

I have the same problem :P

[jorgedc93]

I have the same problem too

[luco]

Having this issue on 0.5.0 as well.

[sapjax]

same issue in 0.7.2

[oscarnnn]

same problem

[alexyangjie]

Same issue for me. Using latest version.

[german970814]

To solve this issue just pass prop bounces={false} to KeyboardAwareScrollView. This is the docs https://facebook.github.io/react-native/docs/scrollview.html#bounces

[kalraneeraj24550]

Thanks @holleB sir, your solution worked for me .

[Pat-Gekoski]

Same problem here......almost a year later. @german970814 that only applies to iOS

[shardulgurjar]

Adding viewIsInsideTabBar solved the issue for me
<KeyboardAwareScrollView viewIsInsideTabBar extraHeight={150}> // child components </KeyboardAwareScrollView>