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?

score 20 · Answer 1 · answered Aug 26 '20 at 03:18

20

This code should worked:

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

answered Aug 26 '20 at 03:18

ggDeGreat

Accordingly oficial react native documentation this properties use for just IOS, but how about Android? Any ideas how to disable bounce there? – jocoders Apr 26 '23 at 08:01
@jocoders, check if this helps - https://stackoverflow.com/a/76123813/5804328 – Piyush Govil Apr 27 '23 at 19:02

score 10 · Answer 2 · answered Jan 16 '21 at 22:49

10

set this:

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

answered Jan 16 '21 at 22:49

Audrey

score 1 · Answer 3 · answered Apr 27 '23 at 19:00

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.

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

<ScrollView
    overScrollMode="never"
/>

score 0 · Answer 4 · answered Nov 27 '19 at 14:10

0

There are props called alwaysBounceVertical. Set it to false.

<ScrollView
    alwaysBounceVertical={false}
/>

Here is doc.

answered Nov 27 '19 at 14:10

Kishan Bharda

Yes. It work with ios. Can you please post your code that you have done ? – Kishan Bharda Nov 27 '19 at 14:17
` this._handleScroll(event) } )}>` – Umid Boltabaev Nov 27 '19 at 14:21
After adding this `alwaysBounceVertical={false}`, scrollview still bouncing ? – Kishan Bharda Nov 27 '19 at 14:23
So, may be this problem is by your `onScroll` . It should be `onScroll={() => { // your code }}` – Kishan Bharda Nov 27 '19 at 14:29

4 Answers4