Quiero crear una vista de desplazamiento (en la aplicación nativa de reacción) cuyos hijos individuales ocupen el espacio restante en la pantalla.

El objetivo es que, a medida que el usuario se desplaza, solo se le debe mostrar un perfil a la vez en lugar de varios perfiles.

Así es como se ve mi código de vista de desplazamiento

 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;

Donde los estilos, por ahora, son solo estos

 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: {}, });

Problema: no puedo hacer que los niños individuales de ScrollView ocupen toda la pantalla

Por ejemplo, en la siguiente captura de pantalla, me gustaría que Alan tomara la pantalla completa y el desplazamiento adicional debería llevar al usuario a Amanda y así sucesivamente.