Confusion with react native docs about 'ScrollView'

Question

The doc is here When I was reading official docs and try to figure out how to properly use ScrollView, I was confused with the following words:

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

1. What is a scroll interaction and how contain unbounded-height children into a bounded container via it?

2. What does make sure all parent views have bounded height mean? The parent of the <ScrollView> tag? What if I'd like to have to responsive layout?

3. What does transfer {flex: 1} down the view stack mean? What errors will occur if I forget to do that?

4. Doesn't yet support other contained responders from blocking this scroll view from becoming the responder Does blocking this scroll view mean the scroll view is not able to scroll? becoming which responder?

Any help would be appreciated. Thank you for your time.

Answer 1

1. What is a scroll interaction and how contain unbounded-height children into a bounded container via it?

All of that information boils down to scrollview does not have an initial height but it needs a height in order to know the boundaries of scrolling.

2. What does make sure all parent views have bounded height mean? The parent of the ? What if I'd like to have to responsive layout?

You can set a hard numbered height to the scrollview, but it's not recommended because it doesn't account for different phone sizes. If you want a responsive layout...then do the recommended flexbox way.

3. What does transfer {flex: 1} down the view stack mean? What errors will occur if I forget to do that?

The recommended option is to use {flex: 1}, but child flexbox layouts are height and width dependent, so if the parent doesn't have a height, the flexbox is also set to zero.

4. Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. Does blocking this scroll view mean the scroll view is not able to scroll? becoming which responder?

This means that scroll view cannot be stopped by any events inside itself. For example: if you had a horizontal scrollview inside of a vertical scrollview, the horizontal scrollview will not stop the vertical scrollview.