How can I disable bounce effect in Scrollview (React Native)?

Question

I have used Scrollview in my screen and when I log y offset I get negative values?

How can I disable Scrollview bouncing?

Mulry

Answer 1

This code should worked:

<ScrollView
    alwaysBounceHorizontal={false}
    alwaysBounceVertical={false}
    bounces={false}
/>

Conformance

Accordingly oficial react native documentation this properties use for just IOS, but how about Android? Any ideas how to disable bounce there? – Ontogeny

@jocoders, check if this helps - https://mcmap.net/q/714412/-how-can-i-disable-bounce-effect-in-scrollview-react-native – Incumbency

Answer 2

set this:

<ScrollView bounces={false}>
  ...
</ScrollView>

Charie

Answer 3

The answers given by others only solve the issue for iOS, but for Android, the issue still persists.

Here is the final solution I found after some digging.

Solution for iOS: (https://reactnative.dev/docs/scrollview#bounces-ios)

<ScrollView
    alwaysBounceHorizontal={false}
    alwaysBounceVertical={false}
    bounces={false}
/>

Solution for Android: (https://reactnative.dev/docs/scrollview#overscrollmode-android)

<ScrollView
    overScrollMode="never"
/>

Incumbency

Answer 4

There are props called alwaysBounceVertical. Set it to false.

<ScrollView
    alwaysBounceVertical={false}
/>

Here is doc.

Grados

Yes. It work with ios. Can you please post your code that you have done ? – Grados

<ScrollView style={styles.content} scrollEventThrottle={16} alwaysBounceVertical={false} onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.scrollYAnimatedValue } } }], { listener: (event) => this._handleScroll(event) } )}> – Mulry

After adding this alwaysBounceVertical={false}, scrollview still bouncing ? – Grados

So, may be this problem is by your onScroll . It should be onScroll={() => { // your code }} – Grados