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.
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:
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>
);
}