In my Screen component I am trying to have the container that holds the Card components from react-native-paper be full height of the remaining spaces, but as you can see in the screen shot, the conatiner that holds the cards (yellow bg) is not full height and that is also squeezing the flex items (the cards).
How can I make it so that the container (yellow bg) is full height of remaining space and also have the flex items evenly spaced out?
I tried flex: 1 and also height: '100%', but it does not work
// Screen component return (<SafeAreaView style={{backgroundColor: 'black', height: '100%', flex: 1 }}><StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} backgroundColor={backgroundStyle.backgroundColor} /><ScrollView style={{backgroundColor: 'pink', height: '100%', flex: 1 }}><View style={{ backgroundColor: 'yellow', flex: 1, justifyContent: 'space-evenly',, height: '100%' }}> {surveyData?.surveys?.map((surveyDetails, i) => (<Card key={`suvey-card-${i}`} style={{flex: 1, flexGrow: 1}><Card.Title title={surveyDetails.name} right={(props) => <Icon {...props} source="folder" />} /></Card> ))}</View></ScrollView></SafeAreaView> );