React-native-keyboard-aware-scroll-view: scrollview bounces when textinput focused

Created on 26 Jan 2018  路  16Comments  路  Source: APSL/react-native-keyboard-aware-scroll-view

keyboardawaremove mp4

Code:

<KeyboardAwareScrollView
    style={{backgroundColor: '#f7f7f7'}}
    enableResetScrollToCoords={false}
    keyboardOpeningTime={300}
>{/* ... */}</KeyboardAwareScrollView>

Needed to add enableResetScrollToCoords, otherwise the ScrollView would have been scrolled to top when Keyboard was dismissed interactively. Also added an higher keyboardOpeningTime, so it scrolls smoother when ScrollView actually needs to be pushed upwards.

As seen in gif above, there is no need for scrollview to be adjusted. How may I prevent this behavior?

Most helpful comment

@alvaromb I found this issue is caused by react-navigation, I add extraHeight={-64} then it works.

All 16 comments

Any ETA on a fix for this? Just run into a similar issue which is probably related.

When switching focus from one input to another it bounces first

feb-06-2018 12-36-06

@RSSfeed I was able to get around this by removing the React Navigation Header on ios. Does that potentially work for you?

Still having this issue.

I have the same issue.

I was having similar issues with the scrollview bouncing when focusing on a TextInput, and changing

<KeyboardAwareScrollView style={styles.scroll}>
to
<KeyboardAwareScrollView contentContainerStyle={styles.scroll}>

seemed to fix it for me.

A temporary workaround is to remove keyboardOpeningTime.

I'll be working on this issue this week, thanks for reporting.

same issue in 0.7.2.

@alvaromb I found this issue is caused by react-navigation, I add extraHeight={-64} then it works.

how to resolve this issue plz help

Still having same issue!. how to solve this?

I'm not sure how it works but negative extraHeight solved the issue for me. Thanks @sapjax. 64 is size of navigation bar?

@KryDos yes, it is.

Is the negative extraHeight solution the proposed one for this? I can confirm ( as per #340) that this issue still remains

I'm using this library + react-navigation and setting extraHeight={90} with a <TextInput /> at the footer of the screen seemed to work for me (smooth scrolling with no jumps)

The same happens with KeyboardAvoidingView but above solution do not work.

Was this page helpful?
0 / 5 - 0 ratings