Don't call hooks conditionally in useScrollViewOffset

[tjzel]

Summary

It's bad for React, and we can handle creating an unused shared value from time to time.

Test plan

Testing snippet

import { StyleSheet, View } from 'react-native';

import Animated, {
  useSharedValue,
  useScrollViewOffset,
  useAnimatedRef,
  useAnimatedStyle,
} from 'react-native-reanimated';

import React from 'react';

export default function EmptyExample() {
  const scrollViewRefA = useAnimatedRef<Animated.ScrollView>();
  const scrollViewRefB = useAnimatedRef<Animated.ScrollView>();
  const myOffset = useSharedValue(0);
  const hookOffset = useScrollViewOffset(scrollViewRefA);
  const hookOffsetFromMyOffset = useScrollViewOffset(scrollViewRefB, myOffset);

  const animatedStyleA = useAnimatedStyle(() => ({
    borderRadius: 100 * Math.abs(Math.sin(hookOffset.value / 400)),
  }));

  const animatedStyleB = useAnimatedStyle(() => ({
    borderRadius: 100 * Math.abs(Math.sin(hookOffsetFromMyOffset.value / 400)),
  }));

  return (
    <View style={styles.container}>
      <Animated.ScrollView
        ref={scrollViewRefA}
        horizontal={true}
        style={styles.scrollView}>
        {Array.from({ length: 100 }).map((_, index) => (
          <Animated.View key={index} style={[styles.box, animatedStyleA]} />
        ))}
      </Animated.ScrollView>
      <Animated.ScrollView
        ref={scrollViewRefB}
        horizontal={true}
        style={styles.scrollView}>
        {Array.from({ length: 100 }).map((_, index) => (
          <Animated.View key={index} style={[styles.box, animatedStyleB]} />
        ))}
      </Animated.ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    margin: 30,
  },
  scrollView: {
    maxWidth: 800,
    maxHeight: 300,
  },
});

[szydlovsky]