1

I've been trying to use React Native lately and I am trying to incorporate a ScrollView in my program. I am having issues centering the ScrollView in the middle of the page. I have looked at many of the posts here on SO and have been unable to get a working implementation. If someone could point me in the right direction, I would really appreciate it!

Screen:

<SafeAreaView style={styles.container}>
    <ScrollView style={styles.scrollable}>
        <ProfileGreeting />
        <DailyGoals goals={GOALS} />
        <CoursesContainer courses={COURSES} />
    </ScrollView>
</SafeAreaView>

Styles:

const styles = {
    container: {
        height: "100%",
        width: "100%",
        display: "flex",
        alignItems: "center",
        flex: 1
    },
    scrollable: {
        flexGrow : 1,
        justifyContent : 'center'
    }
}

As suggested in this this post I tried to use flexGrow on the ScrollView, but it still doesn't seem to work - it instead shifts to the side as such: ScrollView Issue

DeveloperRyan
  • 837
  • 2
  • 9
  • 22

1 Answers1

0

Try Scroll view "contentContainerStyle" propert instead of style propert

ScrollView style defines the outer container of the ScrollView, e.g its height and relations to siblings elements

ScrollView contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc

Nooruddin Lakhani
  • 7,507
  • 2
  • 19
  • 39
  • I must've updated an incorrect version of my code. Unfortunately, the same issue occurs whether I use the contentContainerStyle or not. – DeveloperRyan Oct 19 '20 at 20:09