I want to create a scrollview (in react-native app) whose individual children take the remaining space on the screen.

The goal is that, as user scrolls, he should only be shown one profile at a time instead of multiple profiles.

This is how my Scroll view code looks

const ProfileVerticalScroll = ({
  active = 0,
  setActive,
  profileData,
  scrollViewRef,
}: Props) => {
  return (
    <ScrollView style={styles.scrollView} ref={scrollViewRef}>
      {profileData.map((el, index) => {
        return (
          <View style={styles.profile}>
            <View style={styles.profileHeadings}>
              <Text>{el.name} </Text>
              <Text>{el.profession}</Text>
            </View>
            <View style={styles.abouteMe}>
              <Text> About Me</Text>
              <Text>{el.info}</Text>
            </View>
          </View>
        );
      })}
    </ScrollView>
  );
};

export default ProfileVerticalScroll;

Where styles, for now, are just these

import { StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
export default StyleSheet.create({
  scrollView: {},
  profile: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: width,
    paddingHorizontal: width * 0.05,
  },
  profileHeadings: {},
  abouteMe: {},
});

Problem: I am unable to get single children of a ScrollView to take up the entire screen

For example, In the below screenshot, I would want Alan to take the complete screen and further scrolling should take the user to Amanda and so on