chore: use animation frame to time layout measure

Author: johnhaup

src/components/LazyChild/index.tsx src/components/LazyChild/LazyChild.tsxsrc/components/LazyChild/index.tsx renamed to src/components/LazyChild/LazyChild.tsx

@@ -12,7 +12,6 @@ import { useAnimatedContext } from '../../../context/AnimatedContext';
 import { useEnteringCallbacks } from '../hooks/useEnteringCallbacks';
 import { useVisibilityCallbacks } from '../hooks/useVisibilityCallbacks';
 import { LazyChildProps } from '../types';
-import { FRAME_MS } from '../../../constants';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 
@@ -34,15 +33,15 @@ export function FullLazyChild({
   } = useAnimatedContext();
 
   /**
-   * If onLayout returns a height value greater than 0.
+   * If onLayout returns a height or width value greater than 0.
    */
-  const _canMeasure = useSharedValue(false);
+  const _isJsLayoutComplete = useSharedValue(false);
   /**
    * LazyChild view ref.
    */
   const _viewRef = useAnimatedRef<Animated.View>();
   /**
-   * Latest measure return.
+   * Latest valid measure return or null.
    */
   const _measurement = useSharedValue<ReturnType<typeof measure>>(null);
 
@@ -59,32 +58,35 @@ export function FullLazyChild({
     typeof onVisibilityExit === 'function'
   );
 
-  const _shouldMeasure = useDerivedValue(
+  const _hasValidCallback = useDerivedValue(
     () =>
       _shouldFireThresholdEnter.value ||
       _shouldFireThresholdExit.value ||
       _shouldMeasurePercentVisible.value ||
       _shouldFireVisibilityExit.value
   );
 
+  function measureView() {
+    'worklet';
+    const measurement = measure(_viewRef);
+
+    if (measurement && (measurement?.height || measurement?.width)) {
+      _measurement.value = measurement;
+    }
+  }
+
   useAnimatedReaction(
     () => {
       // Track scollValue to make reaction fire.  SCREEN_HEIGHT negative is to generously allow for overscroll.
-      if (
-        _canMeasure.value &&
-        _shouldMeasure.value &&
+      return (
+        _isJsLayoutComplete.value &&
+        _hasValidCallback.value &&
         scrollValue.value > -SCREEN_HEIGHT
-      ) {
-        const measurement = measure(_viewRef);
-
-        return measurement;
-      }
-
-      return null;
+      );
     },
-    (measured) => {
-      if (measured?.height || measured?.width) {
-        _measurement.value = measured;
+    (shouldMeasure) => {
+      if (shouldMeasure) {
+        measureView();
       }
     }
   );
@@ -113,19 +115,15 @@ export function FullLazyChild({
   });
 
   const onLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
-    // Don't measure until we know we have something.  This prevents those pesky Android measurement warnings.
-    // https://github.com/software-mansion/react-native-reanimated/blob/d8ef9c27c31dd2c32d4c3a2111326a448bf19ec9/packages/react-native-reanimated/src/platformFunctions/measure.ts#L95
-    if (nativeEvent.layout.height > 0) {
-      _canMeasure.value = true;
-      // Sometimes native measure runs too quick and return 0 on first paint.
-      setTimeout(() => {
+    // Don't measure until we know we have something.
+    if (nativeEvent.layout.height > 0 || nativeEvent.layout.width > 0) {
+      // onLayout runs when RN finishes render, but native layout may not be fully settled until the next frame.
+      requestAnimationFrame(() => {
         runOnUI(() => {
-          const measurement = measure(_viewRef);
-          if (measurement) {
-            _measurement.value = measurement;
-          }
+          'worklet';
+          _isJsLayoutComplete.value = true;
         })();
-      }, FRAME_MS);
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- shared values do not trigger re-renders
   }, []);

src/components/LazyChild/components/FullLazyChild.tsx

@@ -36,6 +36,7 @@ export const useEnteringCallbacks = ({
       _hasFiredThresholdExited.value = false;
 
       if (!_shouldFireThresholdExit.value) {
+        // Enter callback has fired and there is no exit callback, so it cannot refire.  Set shouldFire to false to prevent unnecessary measures.
         _shouldFireThresholdEnter.value = false;
       }
 
@@ -58,7 +59,7 @@ export const useEnteringCallbacks = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- shared values do not trigger re-renders
   }, [onExitThresholdPass]);
 
-  const isEntering = useDerivedValue(() => {
+  const _hasEntered = useDerivedValue(() => {
     if (_measurement.value !== null) {
       const { pageX, pageY, width, height } = _measurement.value;
       const startOfView = horizontal.value ? pageX : pageY;
@@ -74,7 +75,7 @@ export const useEnteringCallbacks = ({
   });
 
   useAnimatedReaction(
-    () => isEntering.value,
+    () => _hasEntered.value,
     (hasLazyChildEntered) => {
       if (hasLazyChildEntered) {
         if (_shouldFireThresholdEnter.value) {

src/components/LazyChild/hooks/useEnteringCallbacks.ts

@@ -42,6 +42,7 @@ export const useVisibilityCallbacks = ({
         _hasFiredOnVisibilityExited.value = false;
 
         if (!_shouldFireVisibilityExit.value) {
+          // Enter callback has fired and there is no exit callback, so it cannot refire.  Set shouldFire to false to prevent unnecessary measures.
           _shouldMeasurePercentVisible.value = false;
         }
 
@@ -69,7 +70,7 @@ export const useVisibilityCallbacks = ({
     [onVisibilityExit]
   );
 
-  const isVisible = useDerivedValue(() => {
+  const _isVisible = useDerivedValue(() => {
     if (_measurement.value !== null) {
       const { pageX, pageY, width, height } = _measurement.value;
       const startOfView = horizontal.value ? pageX : pageY;
@@ -92,7 +93,7 @@ export const useVisibilityCallbacks = ({
   });
 
   useAnimatedReaction(
-    () => isVisible.value,
+    () => _isVisible.value,
     (isLazyChildVisible) => {
       if (isLazyChildVisible) {
         if (_shouldMeasurePercentVisible.value) {

src/components/LazyChild/hooks/useVisibilityCallbacks.tsx

@@ -0,0 +1 @@
+export * from './LazyChild';

src/components/LazyChild/index.ts

@@ -21,7 +21,6 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { AnimatedContext } from '../context/AnimatedContext';
-import { FRAME_MS } from '../constants';
 
 export interface LazyScrollViewMethods {
   scrollTo: typeof ScrollView.prototype.scrollTo;
@@ -107,25 +106,21 @@ const LazyScrollView = forwardRef<LazyScrollViewMethods, Props>(
           height: e.nativeEvent.layout.height,
           width: e.nativeEvent.layout.width,
         };
-        try {
-          // @ts-ignore measureInWindow is available on the direct ref
-          // Add failure fallback because incorrect typings scare me
-          _scrollRef.current?.measureInWindow((x: number, y: number) => {
-            _containerCoordinates.value = { x, y: y + _statusBarHeight.value };
-          });
-        } catch (err) {
-          setTimeout(() => {
-            runOnUI(() => {
-              const measurement = measure(_scrollRef);
-              if (measurement) {
-                _containerCoordinates.value = {
-                  x: measurement.pageX,
-                  y: measurement.pageY + _statusBarHeight.value,
-                };
-              }
-            })();
-          }, FRAME_MS);
-        }
+
+        // onLayout runs when RN finishes render, but native layout may not be fully settled until the next frame.
+        requestAnimationFrame(() => {
+          runOnUI(() => {
+            'worklet';
+            const measurement = measure(_scrollRef);
+
+            if (measurement) {
+              _containerCoordinates.value = {
+                x: measurement.pageX,
+                y: measurement.pageY + _statusBarHeight.value,
+              };
+            }
+          })();
+        });
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps -- shared values do not trigger re-renders
       []
@@ -158,7 +153,7 @@ const LazyScrollView = forwardRef<LazyScrollViewMethods, Props>(
 
     return (
       <Animated.ScrollView
-        scrollEventThrottle={FRAME_MS}
+        scrollEventThrottle={16}
         {...rest}
         ref={_scrollRef}
         onLayout={measureScrollView}