Usage

The ScrollView component is a scrollable container that can hold a variety of elements, enabling vertical or horizontal scrolling. This customized version of React Native's ScrollViewopens in a new window component integrates Abyss design tokens and performance optimizations for a smooth and responsive experience.

ScrollView vs FlatList

ScrollView renders all its child components all at once, even if the component is not in view. This can negatively affect the performance of the app by requiring more processing power and memory usage when rendering a large number of items.

This is where FlatList comes into play. FlatList renders items lazily, before they appear on screen. It also removes items that scroll off-screen to save memory and processing time.

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

Best Practices

• Minimize Overdraw: Use a background color to avoid unnecessary redrawing of background elements.
• Limit Scrollable Content: Avoid putting too many elements inside a ScrollView. If the content grows large, consider using a FlatList or SectionList for better performance.
• Optimize Images: When scrolling with images, ensure they are properly sized and optimized to prevent memory issues.

Considerations

• Bounded Height: The ScrollView must have a bounded height, since they contain children with unbound-heights.
  • To set the height of a ScrollView, either define a height directly (discouraged) or make sure the parent Components have bounded height.
• Nested Responders: ScrollView does not yet support preventing touch gestures on its children from becoming scroll gestures.
  • This doesn't mean that responders won't work inside of a ScrollView. It simply means ScrollView will prioritize its own responder if it detects a gesture that could be interpreted as a scroll.
    • For more information, check out React Native's Gesture Responder Systemopens in a new window.

Accessibility Considerations

• Keyboard Focus: Ensure that the content inside the ScrollView is reachable and visible when users navigate with a keyboard.
• Readable Labels: Label any scrollable area for screen readers, so users know they can scroll through the content.
• Scroll Indicators: Allow scroll indicators to be visible for accessibility users, so they are aware of the scrollable content.

Performance Considerations

• Rendering Limits: Avoid placing too many child components inside a ScrollView as it can cause performance bottlenecks. Instead, use lists (FlatList,SectionList) for large datasets.
• Lazy Loading: Consider lazy loading for content-heavy views to avoid loading everything upfront.
• Batch Updates: Ensure updates to the scroll view content are batched to reduce rendering overhead.

ScrollView Classes

Class Name	Description
abyss-scroll-view-root	ScrollView root element.

ScrollView Props

Extends React Native - ScrollViewopens in a new window props.

Name	Type	Default	Description
contentContainerStyle	Style<"View">		These styles will be applied to the scroll view content container which wraps all of the child views.
contentInset	Insets | undefined		The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
contentOffset	PointProp | undefined		Used to manually set the starting scroll offset. The default value is { x: 0, y: 0 }
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
endFillColor	Color | undefined		Sometimes a ScrollView takes up more space than its content fills. When this is the case, this prop will fill the rest of the ScrollView with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case.
fadingEdgeLength	Space | undefined		Fades out the edges of the scroll content. If the value is greater than 0, the fading edges will be set accordingly to the current scroll direction and position, indicating if there is more content to show. The default value is 0.
hitSlop	number | Insets | null | undefined		This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"ScrollView">		Style properties with Abyss token mapping
styles	Styles<ScrollViewClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.