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 interpreted as 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.

ScrollView Classes

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

ScrollView Props

Extends React Native - ScrollView props.

Name	Type	Default	Required	Description
contentContainerStyle	Abyss.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 }
endFillColor	Abyss.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	Abyss.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.
style	Abyss.Style<"ScrollView">	-	-	ScrollView style properties with Abyss token mapping