Scroll not working in ScrollView (React Native) - react-native

Question

I've seen the same question many times, but none of the solutions I found worked for me.
return part
<View style={styles.root}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled={true}>
<View style={styles.dpArea}>
<Image
source={{
uri: "URI GOES HERE",
}}
style={{ width: "100%", height: "100%" }}
resizeMode="contain"
/>
</View>
<View style={styles.nameArea}>
<View style={{ flex: 8, alignItems: "center" }}>
<Text style={styles.nameText}> {nameUpper}</Text>
</View>
<View style={{ flex: 2, paddingLeft: 10 }}>
<MaterialIcons name="edit" size={24} color="gray" />
</View>
</View>
<View style={styles.emailArea}>
<Text
style={{
fontFamily: "Reg",
fontSize: 12,
color: "gray",
marginRight: 4,
}}
>
Logged in using
</Text>
<Text style={{ fontFamily: "Reg", fontSize: 12 }}>{email}</Text>
</View>
<View style={styles.statsArea}>
<StatsContainer text="STAT 1" number="41" />
<StatsContainer text="STAT 2" number="93" />
</View>
<View style={styles.feedbackArea}>
<Text style={{ fontFamily: "Bold", fontSize: 12, color: "gray" }}>
Send feedbacks, feature requests or report bugs:
</Text>
<FeedbackArea content={feedback} />
</View>
<View style={styles.logoutArea}>
<GenButton content="LOGOUT" />
<DeleteAcButton content="DELETE ACCOUNT" />
</View>
<View style={styles.madeByArea}>
<Text style={styles.madebyText}>Developed by:</Text>
</View>
</ScrollView>
</View>
StyleSheet :
root: {
flex: 1,
},
dpArea: {
height: "30%",
marginTop: 20,
overflow: "hidden",
alignItems: "center",
justifyContent: "center",
},
nameArea: {
height: "10%",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
},
emailArea: { height: "10%", flexDirection: "row", justifyContent: "center" },
statsArea: { flexDirection: "row", height: "20%", marginBottom: "10%" },
feedbackArea: { height: "20%", marginHorizontal: "5%" },
logoutArea: {
width: "100%",
justifyContent: "space-around",
alignItems: "center",
height: "30%",
marginVertical: "5%",
},
madeByArea: {
height: "10%",
justifyContent: "flex-end",
alignItems: "center",
marginBottom: 3,
},
madebyText: {
fontFamily: "Reg",
fontSize: 12,
color: "gray",
},
nameText: {
fontFamily: "Bold",
fontSize: 30,
},
What I've tried: making scrollview the parent component, wrapping scrollview in a root view, flex & flexGrow=1 in contentContainerStyle, flex & flexGrow=1 in ScrollView style parameter.
What I've observed is, if I change any text's font size to say 300, then scroll works but not all components are rendered, however, with normal font size, there's no scroll even though the page exceeds the screen size.
I presume it's due to the way stylesheet is configured, but am unable to locate the error.