React Native Expo App Crashing due to Handmade component inside ScrollView - ios

Question

I am building a react native expo application. The backend is seperated and not used in the process. Below you ll see the home screen component returns
return (
<ImageBackground source={require("../assets/background.jpeg")} style={styles.background}>
<MainPageTopBar />
<View style={styles.container}>
<ScrollView>
<View style={styles.textArea}>
<Text style={styles.text} >Merhaba</Text>
</View>
<View style={styles.welcome}>
<MainCard text={"Tüm Sanatçıları Keşfet"}/>
</View>
<View>
<Text>Öne Çıkan Sahneler</Text>
<View>
<ScrollView horizontal={true}>
{
venueList.map((val, index) => {
return (
<StageCard stageName={val.name} stageLocation={val.location}/>
)
})
}
</ScrollView>
</View>
</View>
</ScrollView>
</View>
<AppBar />
</ImageBackground>
);
Likewise below u can see the code for the class StageCard
import { View, TouchableWithoutFeedback, StyleSheet, Text, ImageBackground } from "react-native";
import { Ionicons } from '#expo/vector-icons';
import React from "react";
function StageCard(props) {
const func = () => {
props.navigation.navigate(props.nav);
}
return (
<TouchableWithoutFeedback onPress={() => console.log("ola")}>
<View style={styles.container}>
<ImageBackground style={styles.stageCard} imageStyle={styles.imageStyle} source={require("../assets/venue.jpg")}>
<View style={styles.nameView}>
<Text style={styles.text}>
{props.stageName}
</Text>
</View>
<View style={styles.cityView}>
<Text style={styles.textCity}>
{props.stageLocation}
</Text>
</View>
</ImageBackground>
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
width: "40%",
height: "30%",
marginLeft: "5%",
marginTop: "10%",
},
imageStyle: {
borderRadius: 20,
},
stageCard: {
width: '100%',
height: '100%',
flex: 1,
},
nameView: {
width: "50%",
height: "20%",
alignContent: "center",
backgroundColor: "transparent",
position: "absolute",
top: "5%",
left: "5%",
},
cityView: {
width: "50%",
height: "20%",
alignContent: "center",
backgroundColor: "transparent",
justifyContent: "flex-end",
position: "absolute",
bottom: "5%",
right: "5%",
},
text: {
textAlign: "left",
textAlignVertical: "center",
fontSize: 20,
color: "#f4eeeb",
borderColor: "#f4eeeb",
},
textCity: {
textAlign: "right",
textAlignVertical: "center",
fontSize: 20,
color: "#f4eeeb",
borderColor: "#f4eeeb",
},
})
export default StageCard;
The app crashes when the app is built. I have narrowed down the possibilities as when I changes the stagecard to a view, the app builds and runs too. Hence the issue must be in the StageCard component.
After coming to the prior conclusion, I tried seperatly isolating the component. Couldn't figure out what caused the issue on the ios.
Update: The problem is caused by the scrollview as the mapping separately works. I got rid of the scrollview horizontal and the cards showed up. Any ideas?