ScrollView
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.
Type |
---|
component, element |
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.
Type | Default |
---|---|
bool | true when horizontal={true} false otherwise |
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.
Type | Default |
---|---|
bool | false when vertical={true} true otherwise |
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.
Type | Default |
---|---|
bool | true |
automaticallyAdjustKeyboardInsets
iOSβ
Controls whether the ScrollView should automatically adjust its contentInset
and scrollViewInsets
when the Keyboard changes its size.
Type | Default |
---|---|
bool | false |
automaticallyAdjustsScrollIndicatorInsets
iOSβ
Controls whether iOS should automatically adjust the scroll indicator insets. See Apple's documentation on the property.
Type | Default |
---|---|
bool | true |
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
.
Type | Default |
---|---|
bool | true |