React Native ScrollView is not scrolling to the bottom sometimes

Question

inside my application index.io.js there is only 1 ScrollView that is wrapped inside a View under the render function. Sometimes I can scroll to the very bottom of the ScrollView and keep the screen there. However the ScrollView would bounce back to the top of the screen and fail to stay at the bottom sometimes.

Does anyone know what is happening? Thanks.

render() {
  return <View style={{flex: 1}}>
  <ScrollView>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    // .... repeat so many times ...
  </ScrollView>
  </View>
}

p.s: my RN is 0.28.0, iOS deployment target is 8.0

score 56 · Answer 1 · answered Apr 17 '17 at 13:16

56

For React native newbies like me:

lookout for making the error of setting {flex:1} on the scrollview's contentContainerStyle attribute, which is basically telling the scrollview explicitly not to scroll and expecting it to scroll, since this sets the content height to the same parent's frame which is the scrollview

answered Apr 17 '17 at 13:16

TheFuquan

1,737
16
18

4

for us, setting `contentContainerStyle={{ flex: 1}}` actually solved our issue! – Cole Jun 27 '17 at 20:59
1

In my case also the opposite, instead `contentContainerStyle={{ marginBottom: 5 }}` to the `ScrollView` having it wrapped into a `View` with `flex: 1`. – jesugmz Jan 03 '19 at 00:30

score 24 · Answer 2 · answered Jun 22 '18 at 04:50

To answer the question exactly, the ScrollView should also have a style={{flex: 1}} prop. A ScrollView needs a set height to scroll.

However in my case, I had padding on my scroll view, and that must have thrown out some calculation deep in the system. I am using react native 0.55.

To resolve I needed to change:

<ScrollView style={{flex: 1, padding: 10}}>
   //Content goes here
</ScrollView>

to

<View style={{padding: 10, flex: 1}}>
   <ScrollView style={{flex: 1}}>
      //Content goes here
   </ScrollView>
</View>

Padding is what did it for me too. Thanks for the tip! – isick Jul 26 '19 at 14:26 — isick, Jul 26 '19 at 14:26

score 24 · Answer 3 · answered Oct 01 '19 at 08:27

24

contentContainerStyle={{ paddingBottom: 60 }}

so applying paddingBottom with a specific size should solve it for you

answered Oct 01 '19 at 08:27

chisom onwuegbuzie

437
5
6

Redmen Ishab · Answer 4 · 2019-09-13T01:39:06.483

8

Adding an extra useless view on the bottom of scrollView :

<ScrollView>
//your contents here

  <View style={{height:100(or any suitable value)}} />
</ScrollView>

solved mine issue.

edited Sep 13 '19 at 01:39

answered Jun 15 '19 at 03:52

Redmen Ishab

2,199
18
22

This was the only solution that worked for me as well. For some reason the ScrollView thought its total height was 100 pixels smaller than it actually was and in doing so, cut off the bottommost view and half of the one above it ¯\_(ツ)_/¯ – instanceof Sep 12 '19 at 17:30

score 5 · Answer 5 · edited Feb 14 '18 at 12:56

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

https://facebook.github.io/react-native/docs/scrollview.html

I think you should assign a style to your scrollView with flex:1 property. And create a contentContainerStyle to have a better design.

score 5 · Answer 6 · answered Jan 04 '19 at 14:51

5

When you're using in react native, use flexGrow instead of flex. If you want a more in depth guide as of why, check out the article below:

https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

answered Jan 04 '19 at 14:51

Philip Aarseth

301
4
16

for a `ScrollView` setting `contentContainerStyle={{ flexGrow: 1}}` will do the job – Daniel Givoni May 23 '19 at 17:29
1

Thanks @Androidy, your comment saved my tush. – Samir K Feb 24 '21 at 17:06

Rajendran Nadar · Answer 7 · 2021-04-01T07:07:55.170

4

Solution tested on react 0.57

IDK whether you fixed the issue but this solution worked for me

<ScrollView contentContainerStyle={{ padding: 10 }}>
    // User contents here
</ScrollView>

No need to flex anything. This piece of code will generate a view with gutter on all the 4 sides. And the cool thing is that the last element is not getting clipped.

Check the live demo here

edited Apr 01 '21 at 07:07

answered Jan 23 '19 at 13:28

Rajendran Nadar

4,962
3
30
51

score 2 · Answer 8 · answered Apr 09 '21 at 20:03

2

This happened to me when I used position: "absolute". My solution was to use the parent view {position: "relative"}. Solved my problem.

answered Apr 09 '21 at 20:03

bobbydyr

21
1
2

score 0 · Answer 9 · answered Dec 03 '18 at 03:40

<ScrollView style={{flex: 1}}>
  <View style={styles.bottom}>
    {
       list.size > 0 && list.map((_, index) => {
        return (
          <View style={styles.listItem} key={index}>
            <Text style={styles.count}>{index + 1}</Text>
          </View>
        )
      })
    }
  </View>
</ScrollView>

use flex: 1

score 0 · Answer 10 · edited Jan 22 '20 at 16:30

0

<View style={{height:'100%',width:'100%',backgroundColor:'#fff'}}>
     <ScrollView>
           //// content here 
     </ScrollView>
</View>

This works for me

edited Jan 22 '20 at 16:30

Tomerikoo

18,379
16
47
61

answered Jan 22 '20 at 11:43

Er Tripti Jain

21
1

score 0 · Answer 11 · answered Oct 28 '21 at 15:38

0

It can also happen if you accidentally apply paddings to regular ScrollView style prop instead of contentContainerStyle

answered Oct 28 '21 at 15:38

Aliaksei

1,094
11
20

score 0 · Answer 12 · answered Jul 10 '23 at 11:25

0

Avoid applying UI styles (eg. padding), directly to Scrollview's style props, it distorts React Native's rendering of it. Instead, apply your styles to contentContainerStyle. This works 100% of the time.

answered Jul 10 '23 at 11:25

DevErnie_

1
2

React Native ScrollView is not scrolling to the bottom sometimes

12 Answers12

Linked