The ScrollView is simple than FlatList.it will render its all children in vertically or horizontally scrollable list, without the additional complexity of keyExtractor or renderItem props.The ScrollView is well suited for scrolling through small quantities of content. Content within a ScrollView is rendered even when it isn't visible on the screen.For large quantities of items, many children of the ScrollView are offscreen, you will likely want to use a FlatList component for better performance.
ScrollView as two separate views, one inside the other. The outer view has a bounded size, while the inner view can exceed the size of the outer view. If the inner view exceeds the size of the outer view, only a portion of it will be visible.When we pass children elements to the ScrollView, they are rendered inside this inner view. We call the inner view the “content container view”, and can style it separately from the outer view.
Debugging a ScrollView:
While building an app, it’s common to render a ScrollView but see nothing on the screen. There are two common causes for this, based on how the outer view and the content container view work.The content container view has flex: 0 by default, so it starts with a height of 0 and expands to the minimum size needed to contain its children elements. If a child has flex: 1, this child won’t be visible, since the content container has an intrinsic height of 0. While we could set the contentContainerStyle to flex: 1, we’ll never have content larger than the outer view. Instead, we should make sure the children we pass to the ScrollView have intrinsic height values greater than 0.The outer view does not change size based on the content container view. In addition to ensuring that the children of a ScrollView have non-zero height, we have to make sure our ScrollView has non-zero dimensions – a fixed width and height, flex: 1 and a parent with alignItems: stretch,or absolute positioning.Most likely, if the ScrollView doesn’t appear, we need to add flex: 1 to each parent and to the ScrollView itself.
Example:
________________________________________________________
