javascriptreactjsreact-nativescrollview

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


Solution

  • 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>
        );
    }