Control FlatList scroll position using an animated value

[krisidmisso]

Is it possible to control the scroll (speed and position) of a FlatList or ScrollView with Reanimated?

[MatiPl01]

Hey!

Could you specify what do you mean by saying control the scroll speed? Do you mean how quickly the scrolling will end when you release your finger (after scrolling manually)?

When it comes to the position, you can use scrollTo with the Animated.ScrollView, as well as, the Animated.FlatList. There is currently no information about FlatList in docs (will add it soon) but the usage is the same as with the Animated.ScrollView.

const aref = useAnimatedRef<Animated.FlatList>()

...

<Animated.FlatList
  ref={aref}
  ...
/>

You have to call scrollTo on the UI thread (either in a worklet function passed to the useAnimatedReaction or useDerivedValue hook, or by wrapping scrollTo call with the runOnUI function)

function scrollList(y: number) {
  runOnUI(() => {
    scrollTo(aref, 0, y, true)
  })()
}

[krisidmisso]

Thank you for the reply @MatiPl01 !
What I want to achieve is a "simulation" of a scroll animation, but instead of going to a specific index/offset with the default animation speed, I want to control that speed. In example scroll to index 2 with a duration of 3000ms.

I tried modifying the example in the link you sent me for scrollTo but instead of changing the offset with the specified duration, it treated it like a delay:

const speed = useDerivedValue(() => {
    return withTiming(scroll.value, {duration: 3000});
  });

  useDerivedValue(() => {
    // highlight-start
    scrollTo(animatedRef, 0, speed.value * (ITEM_SIZE + 2 * ITEM_MARGIN), true);
    // highlight-end
  });

My use case is to scroll a paginated FlatList programmatically with user interaction off

[MatiPl01]

In such a case, you can disable the default scroll animation by passing false as the last scrollTo function parameter. The default animation (when true is passed) cancels the previous one, so you see the only last one when the speed.value reaches the target value.

I think it should work with your code properly just with this one change.

[krisidmisso]

thank you so much for this! It worked

[MatiPl01]

Good to hear that this solution worked for you!