react native - style Vs contentContainerStyle in ScrollView?

Question

When I apply {alignItems: 'center', justifyContent: 'center'} to style prop, got following error,

ScrollView child layout must be applied through the contentContainerStyle prop

then applied same styling to contentContainerStyle and worked fine. I am unable to understand the basic difference between style and contentContainerStyle and when to use them.

I am assuming that when ScrollView is called, two views are called. style applicable to parent View and contentContainerStyle applicable to child View.

Please correct me if I am wrong. Thanks.

Answer 1

You're correct, think of it like this, ScrollView is a special kind of View, ScrollView has two parts:

1. Container (the grey box), it's the outside View, its height can't exceed 100% of the window height

2. Content (marked in blue) is the inner part, it can be higher than the window height, it's what's moving inside the container.

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