Comment on page

Scroll

This component is a generic container for other components. Unlike View, it supports scrolling, panning, and zooming so it is possible to view larger contents off-screen.

Styles
Flexbox Styles
View Styles
Transform Styles
​
Props
Name
Type
Description
bounces
boolean
Should scroll bar bounce when user hits the bounds?
iOS only
horizontal
boolean
Does it support scrolling in the horizontal and/or vertical directions?
vertical
boolean
Does it support scrolling in the horizontal and/or vertical directions?
keyboardDismissMode
'none' | 'interactive' | 'on-drag'
When the user scrolls the view, how should the on-screen keyboard react?
Native only
keyboardShouldPersistTaps
boolean | 'always' | 'never' | 'handled' = 'never'
Should the on-screen keyboard remain visible when the user taps the scroll view?
Native
onContentSizeChange
(width: number, height: number) => void
Invoked when the contents of the scroll view change
onFocus
undefined
Focus Events
onBlur
undefined
Focus Events
onKeyPress
undefined
Keyboard Events
onLayout
undefined
Invoked when view dimensions or position changes
onScroll
undefined
Called when the scroll position changes
onScrollBeginDrag
undefined
Called when the user starts or stops scrolling (touch-based systems only)
onScrollEndDrag
undefined
Called when the user starts or stops scrolling (touch-based systems only)
scrollXAnimatedValue?
AnimatedValue
AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values
On supported platforms, it will use RN.Animated.event() to do // a native-side/-backed coupled animation
scrollYAnimatedValue?
AnimatedValue
AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values 
On supported platforms, it will use RN.Animated.event() to do a native-side/-backed coupled animation
overScrollMode?
'auto' | 'always' | 'never'
Android only property to control overScroll mode
pagingEnabled
boolean
Snap to page boundaries?
snapToInterval
number
Snap to page boundaries?
scrollEnabled
boolean
Is scrolling enabled?
scrollEventThrottle
number
Minimum duration (in milliseconds) between scroll events
scrollIndicatorInsets
ScrollIndicatorInsets
Inset (in pixels) of scroll indicator from top/bottom (vertical) or left/right (horizontal)
scrollsToTop
boolean
If true, this scroll bar scrolls to the top when the user taps on the status bar
showsHorizontalScrollIndicator
boolean
Should the indicator be displayed?
showsVerticalScrollIndicator
boolean
Should the indicator be displayed?
style
ViewStyleRuleSet | ViewStyleRuleSet[]
See below for supported styles
tabNavigation?
'local' | 'cycle' | 'once'
Windows-only property to control tab navigation inside the view
testId
string
ID that can be used to identify the instantiated element for testing purposes

Components - Previous

View

Next - Components

Gesture

Last modified 3yr ago

Name	Type	Description
bounces	`boolean`	Should scroll bar bounce when user hits the bounds? iOS only
horizontal	`boolean`	Does it support scrolling in the horizontal and/or vertical directions?
vertical	`boolean`	Does it support scrolling in the horizontal and/or vertical directions?
keyboardDismissMode	`'none' \| 'interactive' \| 'on-drag'`	When the user scrolls the view, how should the on-screen keyboard react? Native only
keyboardShouldPersistTaps	`boolean \| 'always' \| 'never' \| 'handled' = 'never'`	Should the on-screen keyboard remain visible when the user taps the scroll view? Native
onContentSizeChange	`(width: number, height: number) => void`	Invoked when the contents of the scroll view change
onFocus	`undefined`	Focus Events
onBlur	`undefined`	Focus Events
onKeyPress	`undefined`	Keyboard Events
onLayout	`undefined`	Invoked when view dimensions or position changes
onScroll	`undefined`	Called when the scroll position changes
onScrollBeginDrag	`undefined`	Called when the user starts or stops scrolling (touch-based systems only)
onScrollEndDrag	`undefined`	Called when the user starts or stops scrolling (touch-based systems only)
scrollXAnimatedValue?	`AnimatedValue`	AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values On supported platforms, it will use RN.Animated.event() to do // a native-side/-backed coupled animation
scrollYAnimatedValue?	`AnimatedValue`	AnimatedValue objects hooked up to either (or both) of these properties will be automatically hooked into the onScroll handler of the scrollview and .setValue() will be called on them with the updated values On supported platforms, it will use RN.Animated.event() to do a native-side/-backed coupled animation
overScrollMode?	`'auto' \| 'always' \| 'never'`	Android only property to control overScroll mode
pagingEnabled	`boolean`	Snap to page boundaries?
snapToInterval	`number`	Snap to page boundaries?
scrollEnabled	`boolean`	Is scrolling enabled?
scrollEventThrottle	`number`	Minimum duration (in milliseconds) between scroll events
scrollIndicatorInsets	`ScrollIndicatorInsets`	Inset (in pixels) of scroll indicator from top/bottom (vertical) or left/right (horizontal)
scrollsToTop	`boolean`	If true, this scroll bar scrolls to the top when the user taps on the status bar
showsHorizontalScrollIndicator	`boolean`	Should the indicator be displayed?
showsVerticalScrollIndicator	`boolean`	Should the indicator be displayed?
style	`ViewStyleRuleSet \| ViewStyleRuleSet[]`	See below for supported styles
tabNavigation?	`'local' \| 'cycle' \| 'once'`	Windows-only property to control tab navigation inside the view
testId	`string`	ID that can be used to identify the instantiated element for testing purposes