update naturalHeightRef

Author: GCyganek

src/components/CollapsibleHeaderOnKeyboard/index.native.tsx

@@ -3,13 +3,15 @@ import React, {useEffect, useRef} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {useReanimatedKeyboardAnimation} from 'react-native-keyboard-controller';
 import Reanimated, {Easing, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import useDebounce from '@hooks/useDebounce';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
 import type {CollapsibleHeaderOnKeyboardProps} from './types';
 
 const COLLAPSE_DURATION = 100;
 const RESTORE_DURATION = 300;
+const HEADER_CONTENT_LAYOUT_STABILIZATION_TIME_ON_ORIENTATION_CHANGE = 300;
 // Assumed vertical space for the focused input field — used to reserve space above the keyboard.
 const VERTICAL_SPACE_FOR_FOCUSED_INPUT = 120;
 const KEYBOARD_OPENING_PROGRESS_THRESHOLDS = [0.5, 0.7, 0.8, 0.85, 0.9, 0.95, 0.99];
@@ -60,6 +62,13 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
         isInLandscapeModeSV.set(isInLandscapeMode);
     }, [isInLandscapeMode, isInLandscapeModeSV]);
 
+    const debouncedUpdateNaturalHeightRef = useDebounce((height: number) => {
+        if (isInLandscapeMode) {
+            return;
+        }
+        naturalHeightRef.current = height;
+    }, HEADER_CONTENT_LAYOUT_STABILIZATION_TIME_ON_ORIENTATION_CHANGE);
+
     const onLayout = (e: LayoutChangeEvent) => {
         const height = e.nativeEvent.layout.height;
 
@@ -73,6 +82,10 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
         if (!isInLandscapeMode && height > naturalHeightRef.current && naturalHeightRef.current !== -1) {
             naturalHeight.set(height);
             animatedHeight.set(withTiming(height, {duration: RESTORE_DURATION}));
+
+            // we need to debounce the update of the natural height ref to make sure we don't block height updates
+            // on landscape -> portrait mode change where header layout might not be stable at first.
+            debouncedUpdateNaturalHeightRef(height);
             return;
         }
 
@@ -87,7 +100,7 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
 
     // Restores the header when the screen goes from landscape to portrait mode.
     useEffect(() => {
-        const naturalHeightValue = naturalHeightRef.current;
+        const naturalHeightValue = naturalHeight.get();
         if (!isInLandscapeMode && isFocused && naturalHeightValue !== -1) {
             animatedHeight.set(withTiming(naturalHeightValue, {duration: RESTORE_DURATION}));
         }
@@ -100,7 +113,7 @@ function CollapsibleHeaderOnKeyboard({children, collapsibleHeaderOffset = 0}: Co
             return;
         }
 
-        const naturalHeightValue = naturalHeightRef.current;
+        const naturalHeightValue = naturalHeight.get();
         if (naturalHeightValue === -1) {
             return;
         }