Cannot scroll to bottom of ScrollView in React Native

user_8316404 0
Viewed 29308

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

react-native reactjs scrollview javascript
7 Answers

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

user_88417720

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>
user_28107410

set flexGrow: 1 to contentContainerStyle of your ScrollView

contentContainerStyle={{ flexGrow: 1 }}
user_95224060

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>
user_7903550

Added height style for ScrollView.

height:'100%', width:'100%'
user_73308700
Related