fix: update insets and frame on window resize on web

Author: janicduplessis

package.json

@@ -75,13 +75,14 @@
     "clang-format": "^1.8.0",
     "commitlint": "^19.3.0",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-jest": "^28.6.0",
-    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-testing-library": "^7.5.4",
     "husky": "^9.0.11",
     "jest": "^29.2.1",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.2",
     "react": "19.2.3",
     "react-dom": "19.2.3",

src/NativeSafeAreaProvider.web.tsx

@@ -53,10 +53,12 @@ export function NativeSafeAreaProvider({
       onInsetsChange({ nativeEvent: { insets, frame } });
     };
     element.addEventListener(getSupportedTransitionEvent(), onEnd);
+    window.addEventListener('resize', onEnd);
     onEnd();
     return () => {
       document.body.removeChild(element);
       element.removeEventListener(getSupportedTransitionEvent(), onEnd);
+      window.removeEventListener('resize', onEnd);
     };
   }, [onInsetsChange]);
 

src/__tests__/NativeSafeAreaProvider.web-test.tsx

@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { describe, expect, it, jest } from '@jest/globals';
+import { act, render } from '@testing-library/react-native';
+import * as React from 'react';
+import { NativeSafeAreaProvider } from '../NativeSafeAreaProvider.web';
+import type { InsetChangeNativeCallback } from '../SafeArea.types';
+
+const setDocumentDimensions = (width: number, height: number) => {
+  Object.defineProperty(document.documentElement, 'offsetWidth', {
+    configurable: true,
+    value: width,
+  });
+  Object.defineProperty(document.documentElement, 'offsetHeight', {
+    configurable: true,
+    value: height,
+  });
+};
+
+const mockComputedPadding = (padding: {
+  paddingTop: string;
+  paddingBottom: string;
+  paddingLeft: string;
+  paddingRight: string;
+}) => {
+  jest
+    .spyOn(window, 'getComputedStyle')
+    .mockReturnValue(padding as unknown as CSSStyleDeclaration);
+};
+
+describe('NativeSafeAreaProvider.web', () => {
+  it('updates insets and frame on window resize', () => {
+    setDocumentDimensions(800, 600);
+    mockComputedPadding({
+      paddingTop: '20px',
+      paddingBottom: '10px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+    });
+    const onInsetsChange = jest.fn<InsetChangeNativeCallback>();
+    render(<NativeSafeAreaProvider onInsetsChange={onInsetsChange} />);
+    expect(onInsetsChange).toHaveBeenCalledWith({
+      nativeEvent: {
+        insets: { top: 20, bottom: 10, left: 0, right: 0 },
+        frame: { x: 0, y: 0, width: 800, height: 600 },
+      },
+    });
+
+    onInsetsChange.mockClear();
+    setDocumentDimensions(1024, 768);
+    mockComputedPadding({
+      paddingTop: '40px',
+      paddingBottom: '10px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+    });
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(onInsetsChange).toHaveBeenCalledWith({
+      nativeEvent: {
+        insets: { top: 40, bottom: 10, left: 0, right: 0 },
+        frame: { x: 0, y: 0, width: 1024, height: 768 },
+      },
+    });
+  });
+});