A component that surrounds the ScrollView platform while integrating with the touch-blocking responder system.

ScrollViews must be limited in height to work as they contain children of unlimited height in a restricted container (via scroll interaction). To bind the ScrollView height, set the view height directly (advised against) or make sure all parent views are height constrained. Forgetting to move {flex: 1} down the view stack can lead to errors that the item inspector quickly fixes.

ScrollViews renders all its react child components at once, but this has a performance downside. ScrollView has two styling props: style and contentContainerStyle.

  • The style prop is used for the styling of the ScrollView parent element, which we can think of as a simple, non-scrollable View. We’re setting the size of the ScrollView element on the window viewport and its relative position to sibling elements. This parent container cannot exceed viewport’s height or width

So small trick to make the ScrollView horizontal :


simply is that!

<ScrollView horizontal={true}>

<Text>Child 1</Text>
<Text>Child 2</Text>
<Text>Child 3</Text>


or just like that :

<ScrollView horizontal>

<Text>Child 1</Text>
<Text>Child 2</Text>
<Text>Child 3</Text>


Working with ScrollView, we often need to track the scroll position. To do so correctly, we should use onScroll. This event fires maximally once per frame during scrolling:

nativeEvent: {
contentInset: {bottom, left, right, top},
contentOffset: {x, y},
contentSize: {height, width},
layoutMeasurement: {height, width},
  • contentInset – margin of distance from the edges of the ScrollView to its content.


ScrollView works best to display a small amount of elements with a limited size because all of ScrollView’s children components are rendered at once — even if they’re not currently visible on-screen.

If you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

Sources :