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
Copy link
On this page
Styles
Props