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?