fix: re-measure web provider metrics when an ancestor scrolls

Author: janicduplessis

src/NativeSafeAreaProvider.web.tsx

@@ -88,16 +88,20 @@ export function NativeSafeAreaProvider({
 
     let resizeObserver: ResizeObserver | null = null;
     if (canMeasureProviderElement) {
-      // Note this only observes size changes, position-only changes of the
-      // provider element do not trigger an update.
       resizeObserver = new ResizeObserver(onEnd);
       resizeObserver.observe(providerElement);
+      // Capture-phase listener so scrolling any ancestor re-measures the
+      // provider element position.
+      window.addEventListener('scroll', onEnd, true);
     }
 
     return () => {
       document.body.removeChild(element);
       element.removeEventListener(getSupportedTransitionEvent(), onEnd);
-      resizeObserver?.disconnect();
+      if (resizeObserver != null) {
+        resizeObserver.disconnect();
+        window.removeEventListener('scroll', onEnd, true);
+      }
     };
   }, [onInsetsChange]);
 

src/__tests__/NativeSafeAreaProviderWeb-test.tsx

@@ -216,6 +216,26 @@ describe('NativeSafeAreaProvider.web', () => {
     });
   });
 
+  it('updates metrics when an ancestor scroll moves the provider element', () => {
+    rectMock.mockReturnValue(makeRect(0, 100, 200, 300));
+    const onInsetsChange = jest.fn<InsetChangeNativeCallback>();
+    mountProvider(onInsetsChange);
+    // Position-only change, the element moves up by 80px without resizing.
+    rectMock.mockReturnValue(makeRect(0, 20, 200, 300));
+    act(() => {
+      document.dispatchEvent(new Event('scroll'));
+    });
+    expect(lastMetrics(onInsetsChange)).toEqual({
+      insets: {
+        top: WINDOW_INSETS.top - 20,
+        bottom: 0,
+        left: WINDOW_INSETS.left,
+        right: 0,
+      },
+      frame: { x: 0, y: 20, width: 200, height: 300 },
+    });
+  });
+
   it('falls back to window metrics when ResizeObserver is not available', () => {
     delete (globalThis as { ResizeObserver?: unknown }).ResizeObserver;
     rectMock.mockReturnValue(makeRect(20, 30, 200, 300));