fix: useScrollViewOffset not working after delayed ref initialization

[MatiPl01]

Summary

This PR fixes useScrollViewOffset hook not updating the returned SharedValue if the scrollable to which the ref is attached is rendered with some delay.

The previous implementation didn't work because the animatedRef was uninitialized when the useEffect hook in the useScrollViewOffset was called if the ref wasn't passed to any component. The useEffect was not triggered after the ref was passed to the component later on, even though (at least as I understand) the animatedRef?.current in the useEffect dependencies changed, because this change happened after hook dependencies were recalculated.

Since the code od the component executes from the top to the bottom during render, the useEffect hook dependencies array was created before the animatedRef.current was set in the function created within the useAnimatedRef hook (it is set as soon as the ref function is called with the exiting component argument, which happened after useEffect hook dependencies were recalculated).

Example recordings

Mobile

Before	After
Screen.Recording.2025-06-02.at.18.30.20.mp4	Screen.Recording.2025-06-02.at.18.29.37.mp4

Web

Before	After
Screen.Recording.2025-06-02.at.18.31.53.mp4	Screen.Recording.2025-06-02.at.18.33.03.mp4

Test plan

Copy-paste the following code snippet and see how it works.

Code snippet

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

export default function EmptyExample() {
  const [shouldRender, setShouldRender] = useState(false);
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useScrollViewOffset(scrollRef);

  useAnimatedReaction(
    () => scrollOffset.value,
    (value) => {
      console.log('scrollOffset', value);
    }
  );

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        ScrollView is {shouldRender ? 'rendered' : 'not rendered'}
      </Text>
      <Button
        title={shouldRender ? 'Remove ScrollView' : 'Render ScrollView'}
        onPress={() => setShouldRender(!shouldRender)}
      />

      {shouldRender && (
        <ScrollView
          ref={scrollRef}
          scrollEventThrottle={1000 / 60}
          style={styles.scrollView}>
          {Array.from({ length: 20 }).map((_, index) => (
            <View key={index} style={styles.item}>
              <Text style={styles.itemText}>Scroll Item {index + 1}</Text>
            </View>
          ))}
        </ScrollView>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
  scrollView: {
    flex: 1,
    marginTop: 20,
  },
  item: {
    height: 100,
    backgroundColor: '#f0f0f0',
    marginVertical: 8,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 16,
    color: '#333',
  },
});

I also checked if the following examples in the example app still work (on mobile and web):

• useAnimatedScrollHandler
• scrollTo
• useScrollViewOffset

[patrycjakalinska]

I've tested it and it works okay so I'm going with approve. However I'd feel safer with merge after @tjzel approval as this refactor is not neccessarily in my field 🪨