Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

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 quick to debug.

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

<ScrollView> vs <FlatList> - which one to use?

ScrollView renders all its react child components at once, but this has a performance downside.

Imagine 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.

Example​

Reference

Props​

View Props​

Inherits View Props.

StickyHeaderComponent​

A React Component that will be used to render sticky headers, should be used together with stickyHeaderIndices. You may need to set this component if your sticky header uses custom transforms, for example, when you want your list to have an animated and hidable header. If a component has not been provided, the default ScrollViewStickyHeader component will be used.

alwaysBounceHorizontal

iOS

​

When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself.

alwaysBounceVertical

iOS

​

When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself.

automaticallyAdjustContentInsets

iOS

​

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar.

automaticallyAdjustKeyboardInsets

iOS

​

Controls whether the ScrollView should automatically adjust its contentInset and scrollViewInsets when the Keyboard changes its size.

automaticallyAdjustsScrollIndicatorInsets

iOS

​

Controls whether iOS should automatically adjust the scroll indicator insets. See Apple's documentation on the property.

bounces

iOS

​

When true, the scroll view bounces when it reaches the end of the content if the content is larger than the scroll view along the axis of the scroll direction. When false, it disables all bouncing even if the alwaysBounce* props are true.

bouncesZoom

iOS

​

When true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits.

canCancelContentTouches

iOS

​

When false, once tracking starts, won't try to drag if the touch moves.

centerContent

iOS

​

When true, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect.

contentContainerStyle​

These styles will be applied to the scroll view content container which wraps all of the child views. Example:

return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});

contentInset

iOS

​

The amount by which the scroll view content is inset from the edges of the scroll view.

contentInsetAdjustmentBehavior

iOS