CODEWITHSUNDEEP
javascriptreactjsreact-nativescrollview
Manjane
Manjane

Reputation: 373

Cannot scroll to bottom of ScrollView in React Native

I have a very simple example of using a ScrollView and I cannot seem to scroll to the bottom.

The example is completely basic, I'm not doing anything special yet the last item is never fully visible.

Expo Code

 import React, { Component } from "react";
 import { Text, View, ScrollView, StyleSheet } from "react-native";
 import { Constants } from "expo";

 const data = Array.from({ length: 20 }).map((_, i) => i + 1);

 export default class App extends Component {
  render() {
    return (
        <ScrollView style={styles.container}>
            {data.map(d => (
                <View style={styles.view}>
                    <Text style={styles.text}>{d}</Text>
                </View>
            ))}
        </ScrollView>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
     paddingTop: Constants.statusBarHeight
  },
  text: {
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
    fontSize: 28
},
view: {
    padding: 10,
    backgroundColor: "#018bbc"
  }
 });

Here is the output:

output image

Upvotes: 27

Views: 43442

Answers (8)

Lawrence Cheuk
Lawrence Cheuk

Reputation: 464

I had this issue and have fixed it.

Solution: add flex:1 to scrollview parent view

<View style={{ flex: 1}>
  <ScrollView>
   {content}
  </ScrollView
</View>

Explanation:

flex:1 means expand it to its parent size, if parent have a 0 height or not set, it won’t work.

flex:-1 means shrink it to fit its children size, if child height set to flex:1 (depends on parent) -> it won't work -> you ask me? I ask you back. resulting to an endless loop.

A Scrollview have two views in it -> a {flex:1} outer view wrapping a {flex:-1} inner view. when inner view is taller than outer view that’s when scroll happen.

It also means the outer view height depends on the scrollview parent, and inner view depends on children. If you did not give a height to its parent view, the outer view will become 0 height. You cannot scroll inner view with a 0 height of outer view, as it will always bounce back to it origin position once you release your finger.

Wrap it with a <View style={{flex:1}}> may or may not solve your problems because it means the scrollview’s parent expand itself to fit its own parent's height, depending on it parent. (the grand parent of your scrollview). So if your grand parent has no height defined it fails.

The follow example won’t works

<View style={{ height:300, width:200 }}>
  <View> //<-this break
    <View {{flex:1}}>
      <ScrollView>
        {contents}
      </ScrollView>
    </View>
  </View>
</View>

and this work:

var { Windowheight, width } = Dimensions.get('window');

<View style={{ height: Windowheight }}>
  <View style={{flex:1}}>
    <ScrollView>
      {contents}
    </ScrollView>
  <View>
</View>

this also work:

var {windowHeight, windowWidth} = Dimensions.get('window');

<View style={{height:windowHeight}}>
  <Toolbar or other component with fixed height>
  <ScrollView style={{flex:1}}>
    {contents}
  </ScrollView>
  <Footer or other component with fixed height>
</View>

Conclusion: Make sure your scrollview height is determinable both from outside and inside. If weird things happen trace the ancestor until you find a height or simply define a solid one within its traceable ancestor without rely on flex:1, some third party component wrap things with a <View> which breaks things.

Upvotes: 5

huseyin
huseyin

Reputation: 1

Set the child components height without using % e.g make minHeight: '10%' -> minHeight: 10

Upvotes: 0

jovani
jovani

Reputation: 749

I fixed mine by setting Scrollview's contentInset bottom property to a value just enough for me to see bottommost part of my content (a button in my case).

Example:

<ScrollView
  contentInset={{bottom: 80}}>
  {{ content }}
</ScrollView>

Upvotes: 12

Sandupa Dalugoda
Sandupa Dalugoda

Reputation: 1159

Apply padding styles to "contentContainerStyle" prop instead of "style" prop of the ScrollView.

Upvotes: 103

Hend El-Sahli
Hend El-Sahli

Reputation: 6742

set flexGrow: 1 to contentContainerStyle of your ScrollView

contentContainerStyle={{ flexGrow: 1 }}

Upvotes: 12

Mohammad Rahchamani
Mohammad Rahchamani

Reputation: 5220

I had just a ScrollView in my application and it was working fine. Then I added a header component at the top, and the bottom of my ScrollView was not visible any more. I tried everything and nothing worked. Until I found a solution after an hour of trying every crazy thing and here it is. I fixed the issue by adding paddingBottom as contentContainerStyle to my ScrollView.

<ScrollView contentContainerStyle={{paddingBottom: 60}} >
    {this.renderItems()}
</ScrollView>

Upvotes: 44

ali fayaz
ali fayaz

Reputation: 37

Added height style for ScrollView.

height:'100%', width:'100%'

Upvotes: 4

ufxmeng
ufxmeng

Reputation: 2600

Modify your render() method and wrap the ScrollView inside a View container, and set the paddingTop to that View container:

render() {
    return (
        <View style={ styles.container}>
            <ScrollView >
                {data.map(d => <View style={styles.view}><Text style={styles.text}>{d}</Text></View>)}
            </ScrollView>
        </View>
    );
}

Upvotes: 10

Related Questions