Create animated refs dynamically

Description

For using infinite lists (which not only add new rows on demand, but also delete old ones) it’s required to create animated refs dynamically. Now it’s only allowed to use useAnimatedRef which can’t be created on-demand.

Let’s say I added one page (rows are grouped by pages). I wrap first and last rows of page into Animated.View to measure it’s position inside onScroll.

That way I can understand the height of view , and track it’s position.

If page is shown in viewport of ScrollView - I can add another page.

Caveats

Motivation

High-performance scrolling, including infinite and cycled lists.

Code Example

Animated.createAnimatedRef()

[BryanEnid]

I’m having the same issue. I need to define multiple animated “scrollviews” that are coming dynamically, but I need to have their refs in order to have access to their “scrollTo” method.

I tried something like this:

const x_refs_array = new Array(SCREENS.length).fill(useAnimatedRef());

const handleSubscreenXScroll = useAnimatedScrollHandler(() => {
    console.log(x_refs_array[0]()) //  -1
 })

// ...

return (
    <Animated.ScrollView
      // onScroll={handleScreenYScroll}
      horizontal
      ref={y_ref}
    >
      {dynamicsXScrollSections.map((content, index) => (
        <Animated.ScrollView
          // onScroll={handleSectionXScroll}
          ref={(ref) => (x_refs_array[index].current = ref)} // <----- here
        >
          {data}
        </Animated.ScrollView>
      ))}
    </Animated.ScrollView>
  );

[likern]

@jkadamczyk 👋🏻 Yes, you are right.

To extend a bit, you would like to have it because you want to store multiple refs, and you don’t know how many of them you want to store (perhaps how many comes from the API) and you want them to be mutable so you want to have a convenient way to re-assign them.

Yes. Not sure about reassignment (the original code is gone).

a callback option to assign ref anywhere like with <Component ref={ref => foo = ref} /> to be used in Animated Components

Yes.

something similar to React.createRef() but for Reanimated 2

Yes.

Ability to create animated refs dynamically (for example for every list element) Ability to create at any code (in callbacks or conditionally) without hooks restrictions. It can be implemented like React.createRef(), but not required.

The original idea was

1. React Native allows to render <View /> (for every list element or conditionally)
2. Wrap <View /> into <Animated.View />
3. Use that parent <Animated.View /> to track <View />
4. Track using ref.measure() and all worklet stuff on UI thread

This Feature Request helps Implement <FlatList /> purely on UI thread using <View /> as base component. And managing adding / deleting row ourselves. Implement viewabilityConfig and onViewableItemsChanged on UI thread https://reactnative.dev/docs/virtualizedlist#onviewableitemschanged.