Add web implementation for useScrollViewOffset

[szydlovsky]

Summary

Our useScrollViewOffset had no support for web, so I added it using some basic web scroll listeners.
There are some funny typing shenanigans, if anyone comes up with better solutions I will happily use it.

before	after
beforeoffset.mov	afteroffset.mov

Test plan

Check useScrollViewOffset example from Reanimated WebExample and watch console logs or copy example code from our docs.

More in-depth testing can be done using the following code - it tests switching and mouting/dismounting components that the hook refers to:

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,
  },
});

[tjzel]

The level of branching in this hook is high - let's split it into two separate implementations and export the relevant one, see ViewDescriptorSet.ts for reference.

[tjzel]

[tomekzaw]

Should be useScrollViewOffsetWeb instead of useScrollViewOffsetJS

[tomekzaw]

Do we really need to call useSharedValue inside and ignore rules of hooks?

[szydlovsky]

This is exactly the situation we mentioned today, I made it this way so it mirrors the native implementation

[szydlovsky]

We want to either return values to a given sharedValue - initialRef, or return a new sharedValue that gets the updates. So far, no one came up with a better way to do it other than conditionally calling the hook. As soon as we find it or change this logic, it will get updated.

[tomekzaw]

Why do we need to call removeEventListener here as well instead of only in useEffect cleanup function?

[szydlovsky]

@tomekzaw because the animatedRef reference might change to another scroll and we then want to clean the previous listener (see example in code section of PR description)

[tomekzaw]

Can we just assign const element = animatedRef.current first (when calling addEventListener) and then call removeEventListener on element?

[szydlovsky]

That's exactly what scrollRef does here

[szydlovsky]

To be precise: we store a ref to the affected component in scrollRef each time useEffect runs. Since its dependencies are animatedRef, animatedRef.current and eventHandler (which also regenerates only when animatedRef and animatedRef.current change), it re-runs ONLY when we switch the hook to another component. In such situation, cleanup on scrollRef runs first, ensuring there is no listener to a scroll that we don't care about, and then we can safely update scrollRef and add new listener to a new component.

[tomekzaw]

Oh, I see now. Anyway, is it possible to modify the code so that removeEventListener appear only once to make this useEffect "symmetrical" as recommended?

[szydlovsky]

I'm afraid I don't see any other way. The removeEventListener calls match two different scenarios - the scrollRef one makes sure we disconnect from an older scroll component during a switch, while the return cleanup runs when the component (or its parent) gets dismounted for good.