Scrollview whose individual child takes all remaining area

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