33

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.

ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60

1 Answers1

99

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.

enter image description here

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

Tareq El-Masri
  • 2,413
  • 15
  • 23
  • Great answer! @tareq did you create the view hierarchy image or did you find it somewhere? Have been on the hunt for such images for ReactNative components for a while now. – GusOst Jan 10 '23 at 10:23