Make useScrollviewOffset ref nullable and simplify its code

[szydlovsky]

Summary

#5942 needs useScrollViewOffset's ref to be nullable - hence the PR. I also checked and a lot of cleanup code in the hook was redundant.

Test plan

You can run the following code, it checks both switching between nullable and non-nullable ref, as well as two different scrolls: (add some logs in hook's registering/unregistering to see that cleanups work fine)

Code

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

export default function EmptyExample() {
  const [refConnected, setRefConnected] = React.useState(false);
  const [refSwitched, setRefSwitched] = React.useState(false);
  const aref = useAnimatedRef<Animated.ScrollView>();
  const bref = useAnimatedRef<Animated.ScrollView>();
  const scrollHandler = useScrollViewOffset(
    refConnected ? (refSwitched ? bref : aref) : null
  );

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

  const onButtonPress = () => {
    setRefConnected(!refConnected);
  };

  const onSwitchButtonPress = () => {
    setRefSwitched(!refSwitched);
  };

  return (
    <>
      <View style={styles.positionView}>
        <Text>Test</Text>
      </View>
      <View style={styles.divider} />
      <Button
        title={`${refConnected ? 'Disconnect' : 'Connect'} the hook`}
        onPress={onButtonPress}
      />
      <Button
        title={`Change ref to the ${refSwitched ? 'first' : 'second'} scroll`}
        onPress={onSwitchButtonPress}
      />
      <Animated.ScrollView
        ref={aref}
        style={[styles.scrollView, { backgroundColor: 'teal' }]}>
        {[...Array(100)].map((_, i) => (
          <Text key={i} style={styles.text}>
            {i}
          </Text>
        ))}
      </Animated.ScrollView>
      <Animated.ScrollView
        ref={bref}
        style={[styles.scrollView, { backgroundColor: 'pink' }]}>
        {[...Array(100)].map((_, i) => (
          <Text key={i} style={styles.text}>
            {i}
          </Text>
        ))}
      </Animated.ScrollView>
    </>
  );
}

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]

Please add a relevant typescript test case and we gucci 🙏

[piaskowyk]

💪