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

CodePudding user response：

Hello have you try to set the height to min-max 100vh? like below:

   profile: {
        flex: 1,
        display: "flex",
        flexDirection: 'column',
        alignItems: 'center', 
        minHeight: '100vh',
        width: width,
        paddingHorizontal: width*0.05,

    }

CodePudding user response：

If you're trying to have each profile fill 100% of the container vertically and scroll through then I would do something like this:

export default StyleSheet.create({
    scrollView: {
        overflowY: 'scroll'
    }, 
    profile: {
        height: '100%',
        display: "flex",
        flexDirection: 'column',
        alignItems: 'center', 
        width: width,
        paddingHorizontal: width*0.05,

    },
    profileHeadings: {

    }, 
    abouteMe: {

    }
})