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>
  );