scrollToIndex using the reanimated version of AnimatedLegendList

[DOPAgyeman]

How do you implement scrollToIndex using AnimatedLegendList? I'm receiving an error when passing the ref to the component.

import { useRef } from 'react';
import { AnimatedLegendList } from "@legendapp/list/reanimated";
import { type LegendListRef } from "@legendapp/list";

export function ReanimatedExample() {

const ref = useRef<LegendListRef>(null);

  return (
    <AnimatedLegendList
      ref={ref}
      data={data}
      renderItem={renderItem}
    />
  );
}

[zain]

@DOPAgyeman you can ignore the type error, details in #263

[zain]

Actually, here is a better way to do what you want to:

const scrollViewRef = useAnimatedRef<Animated.ScrollView>();

<AnimatedLegendList
  refScrollView={scrollViewRef}
  {...otherProps}
/>;

// JS
scrollViewRef.current?.scrollToEnd();

// Worklet
scrollTo(scrollViewRef, 0, Number.MAX_SAFE_INTEGER, false);

[DOPAgyeman]

Actually, here is a better way to do what you want to:

const scrollViewRef = useAnimatedRef<Animated.ScrollView>();

<AnimatedLegendList
refScrollView={scrollViewRef}
{...otherProps}
/>;

// JS
scrollViewRef.current?.scrollToEnd();

// Worklet
scrollTo(scrollViewRef, 0, Number.MAX_SAFE_INTEGER, false);

Thanks!

[jmeistrich]

The ref type is fixed in 1.0.20.

I'm not sure about the scrollToEnd though. Calling scrollToEnd on the ScrollView can be inaccurate if item sizes are very different from the estimate. The scrollToEnd on the ref is more accurate. But I haven't used Reanimated very much yet so I'm not sure if it needs to do something different than a regular scrollTo. Does it work okay for you if you use scrollToEnd on the regular ref?