@react-native-oh/react-native-harmony 0.72.28 → 0.72.29

package/Libraries/Components/SafeAreaView/SafeAreaView.harmony.tsx

@@ -1,5 +1,5 @@
 import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
-import { TurboModuleRegistry, View, ViewProps } from "react-native";
+import { Dimensions, TurboModuleRegistry, View, ViewProps } from "react-native";
 import { useEffect, useState } from "react";
 import React from "react";
 
@@ -22,23 +22,68 @@ const safeAreaTurboModule = TurboModuleRegistry.get<Spec>(
   "SafeAreaTurboModule"
 )!;
 
+const getPaddingTop = (inset: number, pageY: number) => {
+  return Math.max(0, inset - (pageY < 0 ? pageY * -1 : pageY));
+}
+
+const getPaddingBottom = (insetBottom: number, insetTop: number, paddingTop: number, height: number, windowHeight: number, pageY: number, positionY: number): number => {
+  // if SafeArea is not visible or outside the viewport or topped and not full height
+  if (height === 0 || (pageY === 0 && height < windowHeight)) {
+    return Math.max(0, insetBottom - (Math.round(windowHeight) - Math.round(height)));
+  }
+
+  // if SafeAreaView is not topped and not full height and not visible
+  if (pageY < windowHeight && pageY > height && positionY === 0) {
+    return 0;
+  };
+
+  
+  // if SafeAreaView is topped, check for full height
+  if (Math.round(height) >= Math.round(windowHeight) && pageY === 0) {
+    // if SafeAreaView is full height and at the top without any offset
+    return positionY === 0 ? insetBottom : 0;
+  }
+  
+  // if SafeAreaView is topped with margin and not full height
+  if (height < windowHeight && positionY === 0 && pageY <= insetTop) {
+    return Math.max(0, insetBottom - (windowHeight - (height + pageY)));
+  }
+
+  if (height < windowHeight && pageY < windowHeight && pageY > 0 && positionY > 0) {
+    return Math.max(0, insetBottom - (windowHeight - pageY));
+  }
+
+  // if SafeAreaView is not topped and not full height and is nested
+  if (height < windowHeight && pageY > 0 && pageY > windowHeight) {
+    return Math.max(0, insetBottom);
+  }
+  
+  // Default case handling scenarios not captured above
+  return Math.max(0, insetBottom - (windowHeight - height + paddingTop));
+}
+
 export default React.forwardRef<View, ViewProps>(
   ({ children, style, ...otherProps }, ref) => {
-    const [topInset, setTopInset] = useState(
-      safeAreaTurboModule.getInitialInsets().top
-    );
-    const [leftInset, setLeftInset] = useState(
-      safeAreaTurboModule.getInitialInsets().left
-    );
-    const [rightInset, setRightInset] = useState(
-      safeAreaTurboModule.getInitialInsets().right
-    );
-    const [bottomInset, setBottomInset] = useState(
-      safeAreaTurboModule.getInitialInsets().bottom
-    );
 
+    const safeAreaViewRef = React.useRef<View>(null);
+
+    const [topInset, setTopInset] = useState(safeAreaTurboModule.getInitialInsets().top);
+    const [leftInset, setLeftInset] = useState(safeAreaTurboModule.getInitialInsets().left);
+    const [rightInset, setRightInset] = useState(safeAreaTurboModule.getInitialInsets().right);
+    const [bottomInset, setBottomInset] = useState(safeAreaTurboModule.getInitialInsets().bottom);
+
+    const [measurement, setMeasurement] = useState({ x: 0, y: 0, width: 0, height: 0, pageX: 0, pageY: -1 });
+    const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+    const measureView = () => {
+      safeAreaViewRef?.current?.measure((x, y, width, height, pageX, pageY) => {
+        setMeasurement({ x, y, width, height, pageX, pageY });
+      });
+    }
+  
     useEffect(
       function subscribeToSafeAreaChanges() {
+
         const subscription = (RCTDeviceEventEmitter as any).addListener(
           "SAFE_AREA_INSETS_CHANGE",
           (insets: SafeAreaInsets) => {
@@ -52,21 +97,39 @@ export default React.forwardRef<View, ViewProps>(
           subscription.remove();
         };
       },
-      [setTopInset, setLeftInset, setRightInset, setBottomInset]
+      [setTopInset, setLeftInset, setRightInset, setBottomInset, measurement.pageY]
     );
 
+    useEffect(() => {
+      measureView();
+    }, []);
+
+    const isPaddingBottomExplicit = style?.paddingBottom !== undefined;
+    const isPaddingTopExplicit = style?.paddingTop !== undefined;
+    const isPaddingLeftExplicit = style?.paddingLeft !== undefined;
+    const isPaddingRightExplicit = style?.paddingRight !== undefined;
+
+    const windowHeight = Dimensions.get('window').height;
+    const paddingTop = getPaddingTop(topInset, measurement.pageY);
+    const paddingBottom = getPaddingBottom(bottomInset, topInset, paddingTop, measurement.height, windowHeight, measurement.pageY, layout.y);
+
     return (
       <View
-        ref={ref}
+        ref={safeAreaViewRef}
         style={[
           style,
           {
-            paddingTop: topInset,
-            paddingLeft: leftInset,
-            paddingRight: rightInset,
-            paddingBottom: bottomInset,
+            paddingTop: isPaddingTopExplicit ? style.paddingBottom : paddingTop,
+            paddingLeft: isPaddingLeftExplicit ? style.paddingLeft : leftInset,
+            paddingRight: isPaddingRightExplicit ? style.paddingRight : rightInset,
+            paddingBottom: isPaddingBottomExplicit ? style.paddingBottom : paddingBottom,
           },
         ]}
+        onLayout={(event) => {
+          setLayout(event.nativeEvent.layout);
+          measureView();
+          otherProps?.onLayout && otherProps.onLayout(event);
+        }}
         {...otherProps}
       >
         {children}

package/Libraries/Components/ScrollView/ScrollView.harmony.js

@@ -684,8 +684,6 @@ type State = {|
   // RNOH patch - resolving flashScrollIndicators command on the JS side
   // as it is currently not feasible on the native side
   showScrollIndicator: boolean,
-  contentOffset: ?number,
-  contentHeight: ?number,
 |};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
@@ -774,8 +772,6 @@ class ScrollView extends React.Component<Props, State> {
     // RNOH patch - resolving flashScrollIndicators command on the JS side
     // as it is currently not feasible on the native side
     showScrollIndicator: false,
-    contentOffset: null,
-    contentHeight: null,
   };
 
   componentDidMount() {
@@ -1192,15 +1188,14 @@ class ScrollView extends React.Component<Props, State> {
         );
       }
     }
-    this.setState({
-      contentOffset: e.nativeEvent.contentOffset.y
-    });
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
 
   _handleLayout = (e: LayoutEvent) => {
-    this.setState({ layoutHeight: e.nativeEvent.layout.height });
+    if (this.props.invertStickyHeaders === true) {
+      this.setState({ layoutHeight: e.nativeEvent.layout.height });
+    }
     if (this.props.onLayout) {
       this.props.onLayout(e);
     }
@@ -1208,26 +1203,6 @@ class ScrollView extends React.Component<Props, State> {
 
   _handleContentOnLayout = (e: LayoutEvent) => {
     const { width, height } = e.nativeEvent.layout;
-    /**
-     * RNOH patch - Fixed the issue where sticky headers are in disordered position after foldable phone is expanded/folded.
-     * When a foldable phone is expanded/folded, the height of the list items often changes,
-     * causing the content height of the ScrollView to change.
-     * But since the scroll event is not triggered, the position of the sticky headers is 
-     * still offset according to the original content height.
-     * So we should recalculate the contentOffset based on the new contentHeight and trigger 
-     * the scroll event to fix the position of sticky headers
-     */
-    let { contentOffset, contentHeight, layoutHeight } = this.state;
-    if (contentOffset && contentHeight) {
-      contentOffset *= (height - layoutHeight) / (contentHeight - layoutHeight);
-      (contentOffset < 0) && (contentOffset = 0);
-      this.scrollTo({ y: contentOffset, animated: false });
-      this._scrollAnimatedValue.setValue(contentOffset);
-    }
-    this.setState({
-      contentOffset,
-      contentHeight: height
-    });
     this.props.onContentSizeChange &&
       this.props.onContentSizeChange(width, height);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-oh/react-native-harmony",
-  "version": "0.72.28",
+  "version": "0.72.29",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -49,7 +49,7 @@
     "./*.har"
   ],
   "dependencies": {
-    "@react-native-oh/react-native-harmony-cli": "^0.0.26-11",
+    "@react-native-oh/react-native-harmony-cli": "^0.0.26-20",
     "colors": "^1.4.0",
     "fs-extra": "^11.1.1",
     "metro": "^0.76.3",