Registry /
testing / react-native-fast-scroll
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
FastScrollIndicator
✓ import { FastScrollIndicator } from 'react-native-fast-scroll'
✗ const FastScrollIndicator = require('react-native-fast-scroll').FastScrollIndicator
Named export, not default. ESM only; no CJS require supported.
FastScrollSectionTab
✓ import { FastScrollSectionTab } from 'react-native-fast-scroll'
✗ import FastScrollSectionTab from 'react-native-fast-scroll'
Named export; default import is undefined.
ReactNativeFastScroll (common wrong expectation)
✓ import { FastScrollIndicator } from 'react-native-fast-scroll'
✗ import ReactNativeFastScroll from 'react-native-fast-scroll'
No default export exists. Use named imports.
Shows basic setup with GestureHandlerRootView, FlashList, and FastScrollIndicator. Includes scroll to offset percentage logic and onScroll handler.
import React, { useRef } from 'react';
import { FlashList } from '@shopify/flash-list';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { FastScrollIndicator } from 'react-native-fast-scroll';
const DATA = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
export default function App() {
const flashListRef = useRef(null);
const indicatorRef = useRef(null);
const scrollToOffsetPercentage = (offsetPercentage: number) => {
const height = flashListRef.current?.recyclerlistview_unsafe?.getContentDimension()?.height ?? 1;
flashListRef.current?.scrollToOffset({ offset: offsetPercentage * height });
};
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<FlashList
ref={flashListRef}
data={DATA}
renderItem={({ item }) => <Text>{item}</Text>}
estimatedItemSize={50}
onScroll={(e) => {
const height = flashListRef.current?.recyclerlistview_unsafe?.getContentDimension()?.height ?? 1;
indicatorRef.current?.onScrollToOffsetPercentage(e.nativeEvent.contentOffset.y / height);
}}
/>
<FastScrollIndicator
ref={indicatorRef}
scrollToOffsetPercentage={scrollToOffsetPercentage}
side="right"
thumbColor="rgba(0,0,0,0.5)"
/>
</GestureHandlerRootView>
);
}
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'getContentDimension')
FlashList ref is null or not attached yet, or recyclerlistview_unsafe doesn't exist.
fixEnsure FlashList is mounted and has rendered at least once. Use optional chaining and provide default values.
Invariant Violation: [Reanimated] Tried to modify or read a shared value which is not initialized.
Reanimated version < 2.12.0 or missing worklet initialization.
fixUpgrade react-native-reanimated to >=2.12.0 and follow Reanimated setup (add babel plugin, etc).
Error: GestureHandlerRootView not found. Did you forget to add it?
Missing <GestureHandlerRootView> wrapper in component tree.
fixWrap your root component with <GestureHandlerRootView style={{ flex: 1 }}>. Audit
Dependencies
@shopify/flash-listrequiredpeer dependency - required for underlying list rendering
react-native-gesture-handlerrequiredpeer dependency - required for gesture handling
react-native-reanimatedrequiredpeer dependency - required for animations
react-native-redashoptionalpeer dependency - likely used for gesture utilities
@types/reactoptionalpeer dependency - for TypeScript support