Android scrollview doesnt scroll and cuts off text - react-native

Question

I have a scrollview and I want it to be able to scroll text in a certain part of the screen (the rest of the screen should not be able to scroll)
However, the scrollview doesn't scroll and the text inside of it gets cut off, and most of it doesn't show. When I remove the scrollview, the full-text shows.
Here is a link to how the screen looks like https://imgur.com/a/CVnLRyi
Fyi, the points variable contains a huge chunk of text
Below is my code:
import { StyleSheet, View, Text,FlatList, TouchableOpacity, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Lesson } from "../../App";
const data = require('../Data/MainData.json').mainData
function Flashcards({route, navigation}) {
let index = []
let counter = 0
let points = ""
const { PrimaryType } = route.params.params;
const {TopicName} = route.params.params;
const {Elements} = route.params.params;
const {Chapter} = route.params.params;
// setting up variables...
for (var i = 0; i <= Elements.length-1; i++){
if (data[Elements[i]].topic.toLowerCase() == Chapter.toLowerCase()){
index.push(Elements[i])
}
}
for (var i = 1; i <= 20; i++){
if (data[index[counter]][`point${i}`] != "Empty Cell"){
points += `${data[index[counter]][`point${i}`]}\n\n`
}
}
return (
// un-scrollable section
<View style = {styles.container}> // UI starts here
<View style={styles.rect1Stack}>
<View style={styles.rect1}>
<Text style={styles.lowerPrimary}>{PrimaryType}</Text>
<Text style={styles.syllabus}>Primary School {TopicName}</Text>
</View>
<View style={styles.rect2}></View>
</View>
// scrollable text section
<ScrollView style = {styles.ScrollView}>
<Text style={styles.conceptName}>{data[index[counter]].concepts}</Text>
<Text style={styles.info}>{points}</Text>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
rect1: {
top: 0,
height: 207,
position: "absolute",
backgroundColor: "rgba(247,142,105,1)",
left: 3,
right: 4
},
lowerPrimary: {
fontFamily: "roboto-700",
color: "rgba(255,255,255,1)",
fontSize: 26,
height: 88,
width: 286,
marginTop: 30,
marginLeft: 20
},
rect2: {
top: 148,
left: 0,
height: 83,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
borderRadius: 43,
right: 0
},
rect1Stack: {
height: 231,
marginLeft: -3,
marginRight: -4
},
syllabus: {
fontFamily: "roboto-700",
color: "rgba(255,255,255,1)",
fontSize: 20,
height: 35,
width: 286,
marginTop: -30,
marginLeft: 20
},
yellowrec: { //unused property
height: 400,
backgroundColor: "rgba(255,231,185,1)",
marginTop: 0,
marginLeft: 20,
marginRight: 10
},
conceptName: {
fontFamily: "roboto-regular",
color: "#121212",
fontSize: 18,
height: 80,
marginTop: 10,
textAlign: "center",
marginLeft: 0,
marginRight: 0,
alignSelf: "center"
},
info: {
position: "absolute",
fontFamily: "roboto-regular",
color: "#121212",
top: 50,
left: 5,
width: 360,
fontSize: 18,
marginLeft: 10,
},
ScrollView: {
top: 0,
left: 0,
marginRight: 10,
height: 7000,
marginLeft: 10,
backgroundColor: "rgba(255,231,185,1)"
}
});
export default Flashcards;```

Answer 1

You can Just the split screen into two by using the flex
eg:
container: {
flex: 1,
},
rect1Stack:{
flex:.4,
backgroundColor:'green',
},
scrollView:{
flex:.6,
backgroundColor:'blue'
},