Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 930
Manjane Avatar asked Jul 16 '17 19:07

Manjane


People also ask

How do I scroll to the bottom of ScrollView React Native?

scrollToEnd with { animated: true } to scroll to the bottom when the scroll height of the ScrollView changes.

Why ScrollView is not scrolling in Android React Native?

To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView. to wrap ScrollView around the Text components that we render inside. Anything inside the ScrollView will scroll. As a result, we should see text inside and we can scroll up and down.

What is contentContainerStyle?

contentContainerStyle: It is used to style the content of the ScrollView containers. contentInset: This property is used to inset the scroll view content by a specific amount. contentInsetAdjustmentBehavior: This property is used to identify how the safe area insets are used to modify the content area of the ScrollView ...


1 Answers

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

like image 65
Sandupa Dalugoda Avatar answered Sep 25 '22 22:09

Sandupa Dalugoda