Fix scrollTo on FlashList

[tomekzaw]

Summary

Fixes #4376. Analogous to #3988.

Solution: copy the code from createAnimatedComponent.tsx to useAnimatedRef.ts

react-native-reanimated/src/createAnimatedComponent.tsx

Lines 289 to 291 in 87fb9c6

	return this._component?.getScrollableNode
	? this._component.getScrollableNode()
	: this._component;

Example:

App.tsx

import Animated, {
  runOnUI,
  scrollTo,
  useAnimatedRef,
} from 'react-native-reanimated';
import {Button, StyleSheet, Switch, Text, View} from 'react-native';
import {FlashList} from '@shopify/flash-list';

import React from 'react';

declare const _WORKLET: boolean;

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);

interface Item {
  label: string;
}

const DATA: Item[] = [...Array(100)].map((_, i) => ({label: String(i)}));

function getRandomOffset() {
  'worklet';
  return Math.random() * 2000;
}

export default function ScrollToExample() {
  const [animated, setAnimated] = React.useState(true);

  const aref = useAnimatedRef<FlashList<Item>>();

  const scrollFromJS = () => {
    console.log(_WORKLET);
    aref.current?.scrollToOffset({offset: getRandomOffset(), animated});
  };

  const scrollFromUI = () => {
    runOnUI(() => {
      'worklet';
      console.log(_WORKLET);
      scrollTo(aref, 0, getRandomOffset(), animated);
    })();
  };

  return (
    <>
      <View style={styles.buttons}>
        <Switch
          value={animated}
          onValueChange={setAnimated}
          style={styles.switch}
        />
        <Button onPress={scrollFromJS} title="Scroll from JS" />
        <Button onPress={scrollFromUI} title="Scroll from UI" />
      </View>
      <AnimatedFlashList
        // @ts-ignore createAnimatedComponent seems to break generic types
        ref={aref}
        data={DATA}
        // @ts-ignore createAnimatedComponent seems to break generic types
        renderItem={({item}: {item: Item}) => (
          <Text key={item.label} style={styles.text}>
            {item.label}
          </Text>
        )}
        estimatedItemSize={200}
      />
    </>
  );
}

const styles = StyleSheet.create({
  switch: {
    marginBottom: 10,
  },
  buttons: {
    marginTop: 80,
    marginBottom: 40,
    alignItems: 'center',
  },
  text: {
    fontSize: 50,
    textAlign: 'center',
  },
});

Before:

Android:

android.mp4

iOS:

ios.mp4

Test plan

1. Install FlashList in Example app with yarn add @shopify/flash-list && cd ios && pod install

2. Paste the attached code snippet into App.tsx

Warning
It looks like animated refs don't update properly on render. In this case, pressing "Scroll from UI" button after a fast refresh does nothing. Please reload the r to reload the app and check again.

[piaskowyk]

Maybe, we could add some comment why we use .getScrollableNode() or just add information that it comes from FlashList?

[tomekzaw]

Hopefully git blame should find this PR which links to the original issue but yeah you're right, adding a comment here would be nice 😄 Also, there's a similar place in createAnimatedComponent.tsx which does exactly the same thing and I'd like to move it to a new utils function, wdyt?

[piaskowyk]

The idea of a new function sound great ☺️