Feat/reanimated scroll

example/app/(tabs)/index.tsx

@@ -107,6 +107,10 @@ const data: ListElement[] = [
         title: "Cards FlatList",
         url: "/cards-flatlist",
     },
+    {
+        title: "Reanimated scroll state on UI",
+        url: "/reanimated-scroll-state",
+    },
 ].map(
     (v, i) =>
         ({

example/app/reanimated-scroll-state/index.tsx

@@ -0,0 +1,141 @@
+import { AnimatedLegendList } from "@legendapp/list/reanimated";
+import { type TCountryCode, countries, getEmojiFlag } from "countries-list";
+import { useCallback, useState } from "react";
+import { Pressable, SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+import type {} from "react-native-safe-area-context";
+
+type Country = {
+    id: string;
+    name: string;
+    flag: string;
+};
+
+const DATA: Country[] = Object.entries(countries)
+    .map(([code, country]) => ({
+        id: code,
+        name: country.name,
+        flag: getEmojiFlag(code as TCountryCode),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+type ItemProps = {
+    item: Country;
+    onPress: () => void;
+    isSelected: boolean;
+};
+
+const Item = ({ item, onPress, isSelected }: ItemProps) => (
+    <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [styles.item, isSelected && styles.selectedItem, pressed && styles.pressedItem]}
+    >
+        <View style={styles.flagContainer}>
+            <Text style={styles.flag}>{item.flag}</Text>
+        </View>
+        <View style={styles.contentContainer}>
+            <Text style={[styles.title, isSelected && styles.selectedText]}>
+                {item.name}
+                <Text style={styles.countryCode}> ({item.id})</Text>
+            </Text>
+        </View>
+    </Pressable>
+);
+
+const App = () => {
+    const [selectedId, setSelectedId] = useState<string>();
+
+    const scrollY = useSharedValue(0);
+
+    const onScroll = useAnimatedScrollHandler({
+        onScroll: (event) => {
+            console.log("onScroll", event);
+
+            scrollY.value = event.contentOffset.y;
+        },
+    });
+
+    const tapGesture = Gesture.Tap().onStart(({ absoluteY }) => {
+        "worklet";
+        const adjustedY = absoluteY + scrollY.value;
+        console.log("📍 Tap at scroll-adjusted Y:", adjustedY);
+    });
+
+    const keyExtractor = useCallback((item: Country) => item.id, []);
+
+    const renderItem = useCallback(
+        ({ item }: { item: Country }) => {
+            const isSelected = item.id === selectedId;
+            return <Item item={item} onPress={() => setSelectedId(item.id)} isSelected={isSelected} />;
+        },
+        [selectedId],
+    );
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <GestureDetector gesture={tapGesture}>
+                <AnimatedLegendList
+                    data={DATA}
+                    renderItem={renderItem}
+                    keyExtractor={keyExtractor}
+                    onScroll={onScroll}
+                    scrollEventThrottle={16}
+                    estimatedItemSize={70}
+                    extraData={selectedId}
+                    recycleItems
+                />
+            </GestureDetector>
+        </SafeAreaView>
+    );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: StatusBar.currentHeight || 0,
+        backgroundColor: "#f5f5f5",
+    },
+    item: {
+        paddingHorizontal: 16,
+        paddingVertical: 6,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#fff",
+        borderRadius: 12,
+    },
+    selectedItem: {},
+    pressedItem: {},
+    flagContainer: {
+        marginRight: 16,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: "#f8f9fa",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    flag: {
+        fontSize: 28,
+    },
+    contentContainer: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    title: {
+        fontSize: 16,
+        color: "#333",
+        fontWeight: "500",
+    },
+    selectedText: {
+        color: "#1976d2",
+        fontWeight: "600",
+    },
+    countryCode: {
+        fontSize: 14,
+        color: "#666",
+        fontWeight: "400",
+    },
+});

src/LegendList.tsx

@@ -16,7 +16,7 @@ import { DebugView } from "./DebugView";
 import { ListComponent } from "./ListComponent";
 import { ScrollAdjustHandler } from "./ScrollAdjustHandler";
 import { ANCHORED_POSITION_OUT_OF_VIEW, ENABLE_DEBUG_VIEW, IsNewArchitecture, POSITION_OUT_OF_VIEW } from "./constants";
-import { comparatorByDistance, comparatorDefault, roundSize, warnDevOnce } from "./helpers";
+import { comparatorByDistance, comparatorDefault, isReanimatedScroll, roundSize, warnDevOnce } from "./helpers";
 import { StateProvider, getContentSize, peek$, set$, useStateContext } from "./state";
 import type {
     AnchoredPosition,
@@ -1727,8 +1727,14 @@ const LegendListInner = typedForwardRef(function LegendListInner<T>(
             checkAtBottom();
             checkAtTop();
 
-            if (!fromSelf) {
-                state.onScroll?.(event as NativeSyntheticEvent<NativeScrollEvent>);
+            if (!fromSelf && state.onScroll) {
+                const scrollHandler = state.onScroll;
+
+                if (isReanimatedScroll(scrollHandler)) {
+                    scrollHandler?.value?.(event as NativeSyntheticEvent<NativeScrollEvent>);
+                } else if (typeof scrollHandler === "function") {
+                    scrollHandler(event as NativeSyntheticEvent<NativeScrollEvent>);
+                }
             }
         },
         [],

src/helpers.ts

@@ -1,3 +1,8 @@
+import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+type ScrollHandler = (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+
 // biome-ignore lint/complexity/noBannedTypes: <explanation>
 export function isFunction(obj: unknown): obj is Function {
     return typeof obj === "function";
@@ -30,3 +35,12 @@ export function comparatorDefault(a: number, b: number) {
 export function byIndex(a: { index: number }) {
     return a.index;
 }
+
+export function isReanimatedScroll(value: unknown): value is SharedValue<ScrollHandler> {
+    if (typeof value === "object" && value !== null && "value" in value) {
+        const val = (value as { value: unknown }).value;
+        return typeof val === "function";
+    }
+
+    return false;
+}

src/types.ts

@@ -8,6 +8,7 @@ import type {
 } from "react-native";
 import type { ScrollView, StyleProp, ViewStyle } from "react-native";
 import type Animated from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import type { ScrollAdjustHandler } from "./ScrollAdjustHandler";
 
 export type LegendListPropsBase<
@@ -317,7 +318,9 @@ export interface InternalState {
             avg: number;
         }
     >;
-    onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
+    onScroll?:
+        | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
+        | SharedValue<((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined>;
 }
 
 export interface ViewableRange<T> {