React Native Scroll View won't scroll all the way to the bottom (tried everything I could find)

Question

I have decent experience with React but I'm a complete beginner in React Native. I'm making a basic card game app which just displays "cards" of various superheroes.

But the app just won't scroll all the way to the bottom. I have tried everything I could find online (it seems to be a very popular problem and yet there's no consistent solution to it T_T). I even tried replacing my ImageBackground components with plain Image components, still no luck.

I would be really grateful for any help at all.

import {View, Text, StyleSheet, ScrollView, SafeAreaView} from "react-native";
import Card from "./components/Card";
import MCUSpiderMan from "./assets/MCUSpiderMan.jpg"

import React from 'react';

const App = () => {
  return (
      <SafeAreaView style = {styles.container}>
        <ScrollView style={{width: "100%"}} contentContainerStyle={{alignItems: "center", paddingBottom: 100, flexGrow: 1}}>
          <Text style = {styles.heading}>THE SPIDEY CARD GAME</Text>
          <Card charImage={MCUSpiderMan} charPoints={"+100"} charName={"MCU" +
              " Spider-Man"} charDesc={"The teenager who just can't catch a break. Well, at least we got Mr. Stark, right?"}
                charQuote={"Mr. Stark...I don't feel so good..."}/>
          <Card charImage={MCUSpiderMan} charPoints={"+100"} charName={"MCU" +
              " Spider-Man"} charDesc={"The teenager who just can't catch a break. Well, at least we got Mr. Stark, right?"}
                charQuote={"Mr. Stark...I don't feel so good..."}/>
        </ScrollView>
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#111",
    flex: 1,
    alignItems: "center",
    paddingTop: 20,
  },
  heading: {
    color: "#ffffff",
    fontWeight: "bold",
    fontFamily: "sans-serif",
    fontSize: 48,
    textAlign: "center",
    marginVertical: 20
  },
})

export default App;

import {View, ImageBackground, StyleSheet, Text} from "react-native";
const Card = ({charImage, charName, charPoints, charDesc, charQuote}) => {
    return (
        <View style={styles.card}>
            <ImageBackground source = {charImage} style={styles.imageBG} resizeMode={"cover"}>
                <View style = {styles.cardTop}>
                    <Text style={styles.heading}>
                        {charName}
                    </Text>
                </View>
                <View style = {styles.cardBottom}>
                    <Text style={styles.points}>
                        Points: {charPoints}
                    </Text>
                    <Text style = {styles.desc}>
                        {charDesc}
                    </Text>
                    <Text style = {styles.quote}>
                        "{charQuote}"
                    </Text>
                </View>
            </ImageBackground>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        width: "80%",
        height: "60%",
        borderRadius: 8,
    },
    imageBG: {
        width: "100%",
        height: 450,
        overflow: "hidden",
        borderTopColor: "#A71814",
        borderBottomColor: "#A71814",
        borderLeftColor: "#283278",
        borderRightColor: "#283278",
        borderWidth: 8,
        borderTopWidth: 10,
        borderBottomWidth: 12,
        borderRadius: 8,
        alignItems: "center",
        justifyContent: "space-between",
    },
    cardTop: {
        backgroundColor: "#fff8e5",
        opacity: 0.9,
        marginTop: 5,
        borderRadius: 2,
        paddingHorizontal: 10,
    },
    cardBottom: {
        backgroundColor: "#fff8e5",
        opacity: 0.9,
        marginBottom: 10,
        borderRadius: 8,
        padding: 10,
        width: "95%",
        gap: 5,
    },
    heading: {
        fontWeight: "900",
        fontSize: 26,
    },
    points: {
        fontWeight: "900",
        fontSize: 16,
    },
    desc: {

    },
    quote: {
        fontWeight: "500",
    }
})

export default Card;

Thanks in advance.

PS: Also, if this is such a popular issue, why isn't there a foolproof solution? I came across FlatList but the documentation says it only differs in that it lazy loads components. That shouldn't cause performance improvements in just basic scrolling should it?

Answer 1

Figured it out and leaving this here for when inevitably someone will face the same issue.

Making the card a fixed height instead of a percentage height worked. Again, I'm a beginner so I'm not sure why, maybe someone else can take that up, but yeah