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 ScrollView 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 interpretedas a scroll.
    • For more information, check out React Native's Gesture Responder System.

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.

SafeAreaView Classes

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

SafeAreaView Props

Extends React Native - ScrollView Props

Prop Name	Type	Default	Description
contentContainerStyle	Abyss.Style<"View">	-	Object or array of objects defining the style of the content container within the ScrollView component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views
contentInset	Insets	-	The amount by which the scroll view content is inset from the edges of the scroll view
endFillColor	Abyss.Color	-	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
hitSlop	Insets	-	This defines how far a touch event can start away from the ScrollView
style	Abyss.Style<"ScrollView">	-	Object or array of objects defining the style of the ScrollView component with design tokens