@react-native-oh/react-native-harmony 0.72.28-8 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-oh/react-native-harmony",
-  "version": "0.72.28-8",
+  "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-19",
+    "@react-native-oh/react-native-harmony-cli": "^0.0.26-20",
     "colors": "^1.4.0",
     "fs-extra": "^11.1.1",
     "metro": "^0.76.3",