WorkletEventHandler revamp #5845

szydlovsky · 2024-03-27T17:18:47Z

Summary

Our WorkletEventHandler class (used in useScrollViewOffset and useEvent hooks as well in internal logic of AnimatedComponent) was made for handling only one component at a time. I made it so multiple of them can work at the same time. This way, anything based on useEvent (so for example useAnimatedScrollHandler) can be used for multiple components without needlessly copying the logic. This fixes #5345 and #5488 as well.

Test plan

Effectively, this needs testing on useAnimatedScrollHandler and useScrollViewOffset as well as generally checking for any regression in AnimatedComponents.

Testing code for useAnimatedScrollHandler on multiple components:

Code

import * as React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';

type ItemValue = { title: string };
const items: ItemValue[] = [...new Array(101)].map((_each, index) => {
  return { title: `${index}` };
});

type ItemProps = { title: string };
const Item = ({ title }: ItemProps) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

export default function EmptyExample() {
  const [attachBoth, setAttachBoth] = React.useState(false);
  const [onlyOnScroll, setOnlyOnScroll] = React.useState(true);

  // props to pass into children render functions
  const onScroll = useAnimatedScrollHandler(
    onlyOnScroll
      ? {
          onScroll(e) {
            'worklet';
            console.log(e.eventName);
          },
        }
      : {
          onScroll(e) {
            'worklet';
            console.log(e.eventName);
          },
          onBeginDrag(e) {
            'worklet';
            console.log(e.eventName);
          },
          onEndDrag(e) {
            'worklet';
            console.log(e.eventName);
          },
          onMomentumBegin(e) {
            'worklet';
            console.log(e.eventName);
          },
          onMomentumEnd(e) {
            'worklet';
            console.log(e.eventName);
          },
        }
  );

  return (
    <View style={styles.container}>
      <Button
        title={`Swtich to attach ${attachBoth ? 'first' : 'both'}`}
        onPress={() => {
          setAttachBoth(!attachBoth);
        }}
      />
      <Button
        title={`Swtich events to ${
          onlyOnScroll ? 'all events' : 'only onScroll'
        }`}
        onPress={() => {
          setOnlyOnScroll(!onlyOnScroll);
        }}
      />
      <Animated.FlatList
        onScroll={onScroll}
        style={styles.listA}
        data={items}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => `A:${item.title}`}
      />
      <Animated.FlatList
        onScroll={attachBoth ? onScroll : null}
        style={styles.listB}
        data={items}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => `B:${item.title}`}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  listA: {
    flex: 1,
    backgroundColor: '#5F9EA0',
  },
  listB: {
    flex: 1,
    backgroundColor: '#7FFFD4',
  },
  item: {
    backgroundColor: '#F0FFFF',
    alignItems: 'center',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 20,
  },
  title: {
    fontSize: 32,
  },
});

Testing code for useScrollViewOffset switching between components:

Code

import React, { useState } from 'react';
import Animated, {
  useAnimatedRef,
  useDerivedValue,
  useSharedValue,
  useScrollViewOffset,
} from 'react-native-reanimated';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function ScrollViewOffsetExample() {
  const aref = useAnimatedRef<Animated.ScrollView>();
  const bref = useAnimatedRef<Animated.ScrollView>();
  const scrollHandler = useSharedValue(0);
  const [scrollAMounted, setScrollAMounted] = useState(true);
  const [scrollBMounted, setScrollBMounted] = useState(true);
  const [scrollAPassed, setScrollAPassed] = useState(true);

  useDerivedValue(() => {
    console.log(scrollHandler.value);
  });

  const onAMountPress = () => {
    setScrollAMounted(!scrollAMounted);
  };
  const onBMountPress = () => {
    setScrollBMounted(!scrollBMounted);
  };
  const onPassTogglePress = () => {
    setScrollAPassed(!scrollAPassed);
  };

  useScrollViewOffset(scrollAPassed ? aref : bref, scrollHandler);

  return (
    <>
      <View style={styles.positionView}>
        <Text>Test</Text>
      </View>
      <View style={styles.divider} />
      <Button
        title={`${scrollAMounted ? 'Dismount' : 'Mount'} scroll A`}
        onPress={onAMountPress}
      />
      <Button
        title={`${scrollBMounted ? 'Dismount' : 'Mount'} scroll B`}
        onPress={onBMountPress}
      />
      <Button
        title={`Toggle the ref, currently passed to ${
          scrollAPassed ? 'scroll A' : 'scroll B'
        }`}
        onPress={onPassTogglePress}
      />
      {scrollAMounted ? (
        <Animated.ScrollView
          ref={aref}
          style={[styles.scrollView, { backgroundColor: 'purple' }]}>
          {[...Array(100)].map((_, i) => (
            <Text key={i} style={styles.text}>
              A: {i}
            </Text>
          ))}
        </Animated.ScrollView>
      ) : null}
      {scrollBMounted ? (
        <Animated.ScrollView
          ref={bref}
          style={[styles.scrollView, { backgroundColor: 'lime' }]}>
          {[...Array(100)].map((_, i) => (
            <Text key={i} style={styles.text}>
              B: {i}
            </Text>
          ))}
        </Animated.ScrollView>
      ) : null}
    </>
  );
}

const styles = StyleSheet.create({
  positionView: {
    margin: 20,
    alignItems: 'center',
  },
  scrollView: {
    flex: 1,
    width: '100%',
  },
  text: {
    fontSize: 50,
    textAlign: 'center',
  },
  divider: {
    backgroundColor: 'black',
    height: 1,
  },
});

Testing code for multiple useAnimatedScrollHandlers and changing them on one component:

Code

import * as React from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';

type ItemValue = { title: string };
const items: ItemValue[] = [...new Array(101)].map((_each, index) => {
  return { title: `${index}` };
});

type ItemProps = { title: string };
const Item = ({ title }: ItemProps) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

export default function ScrollViewExample() {
  const [attachScroll, setAttachScroll] = React.useState(true);
  const [attachMomentum, setAttachMomentum] = React.useState(false);
  const [changeScroll, setChangeScroll] = React.useState(false);
  const [changeMomentum, setChangeMomentum] = React.useState(false);

  const onScrollHandler = useAnimatedScrollHandler({
    onScroll(e) {
      console.log(e.eventName);
    },
  });

  const onMomentumHandler = useAnimatedScrollHandler({
    onMomentumBegin(e) {
      console.log(e.eventName);
    },
  });

  function reverseString(str: string): string {
    'worklet';
    return str.split('').reduce((reversed, char) => char + reversed, '');
  }

  const onScrollReversedHandler = useAnimatedScrollHandler({
    onScroll(e) {
      console.log(reverseString(e.eventName));
    },
  });

  const onMomentumReversedHandler = useAnimatedScrollHandler({
    onMomentumBegin(e) {
      console.log(reverseString(e.eventName));
    },
  });

  return (
    <View style={styles.container}>
      <Button
        title={`${attachScroll ? 'Detach' : 'Attach'} scroll handler`}
        onPress={() => {
          setAttachScroll(!attachScroll);
        }}
      />
      <Button
        title={`${attachMomentum ? 'Detach' : 'Attach'} momentum handler`}
        onPress={() => {
          setAttachMomentum(!attachMomentum);
        }}
      />
      <Button
        title={`${changeScroll ? 'Un-reverse' : 'Reverse'} scroll handler`}
        onPress={() => {
          setChangeScroll(!changeScroll);
        }}
      />
      <Button
        title={`${changeMomentum ? 'Un-reverse' : 'Reverse'} momentum handler`}
        onPress={() => {
          setChangeMomentum(!changeMomentum);
        }}
      />
      <Animated.FlatList
        onScroll={
          attachScroll
            ? changeScroll
              ? onScrollReversedHandler
              : onScrollHandler
            : null
        }
        onMomentumScrollBegin={
          attachMomentum
            ? changeMomentum
              ? onMomentumReversedHandler
              : onMomentumHandler
            : null
        }
        style={styles.list}
        data={items}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => `A:${item.title}`}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  list: {
    flex: 1,
    backgroundColor: '#5F9EA0',
  },
  item: {
    backgroundColor: '#F0FFFF',
    alignItems: 'center',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 20,
  },
  title: {
    fontSize: 32,
  },
});

Regarding Animated Components, @Latropos currently works on some tests to make it easier.

Showcase of the last example:

scrollExample.mov

tjzel · 2024-03-27T17:42:32Z

Please don't merge until #5790 is merged.

tjzel

First part of the review is here - we definitely need to address components with multiple handlers.

src/reanimated2/hook/useScrollViewOffset.ts