From be89fc229cf8057d9b7b26627a61c69ab627fd51 Mon Sep 17 00:00:00 2001
From: Oskar Eichler <62393985+OskarEichler@users.noreply.github.com>
Date: Thu, 27 Aug 2026 20:07:44 +0300
Subject: [PATCH 1/2] fix(web): forward provider view props and listen for
 standard transitions

---
 src/CompatNativeSafeAreaProvider.tsx | 3 ++-
 src/NativeSafeAreaProvider.web.tsx   | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/CompatNativeSafeAreaProvider.tsx b/src/CompatNativeSafeAreaProvider.tsx
index 114ad8d1..4e1d8741 100644
--- a/src/CompatNativeSafeAreaProvider.tsx
+++ b/src/CompatNativeSafeAreaProvider.tsx
@@ -6,6 +6,7 @@ export function CompatNativeSafeAreaProvider({
   children,
   style,
   onInsetsChange,
+  ...rest
 }: NativeSafeAreaProviderProps) {
   const window = useWindowDimensions();
   React.useEffect(() => {
@@ -24,5 +25,5 @@ export function CompatNativeSafeAreaProvider({
     // @ts-ignore: missing properties
     onInsetsChange({ nativeEvent: { insets, frame } });
   }, [onInsetsChange, window.height, window.width]);
-  return <View style={style}>{children}</View>;
+  return <View {...rest} style={style}>{children}</View>;
 }
diff --git a/src/NativeSafeAreaProvider.web.tsx b/src/NativeSafeAreaProvider.web.tsx
index 82828693..a769f57e 100644
--- a/src/NativeSafeAreaProvider.web.tsx
+++ b/src/NativeSafeAreaProvider.web.tsx
@@ -5,8 +5,8 @@ import { View } from 'react-native';
 import type { NativeSafeAreaProviderProps } from './SafeArea.types';
 
 const CSSTransitions: Record<string, string> = {
+  transition: 'transitionend',
   WebkitTransition: 'webkitTransitionEnd',
-  Transition: 'transitionEnd',
   MozTransition: 'transitionend',
   MSTransition: 'msTransitionEnd',
   OTransition: 'oTransitionEnd',
@@ -16,6 +16,7 @@ export function NativeSafeAreaProvider({
   children,
   style,
   onInsetsChange,
+  ...rest
 }: NativeSafeAreaProviderProps) {
   const viewRef = React.useRef<View>(null);
 
@@ -108,7 +109,7 @@ export function NativeSafeAreaProvider({
   }, [onInsetsChange]);
 
   return (
-    <View ref={viewRef} style={style}>
+    <View {...rest} ref={viewRef} style={style}>
       {children}
     </View>
   );
@@ -121,7 +122,7 @@ function getSupportedTransitionEvent(): string {
   }
   const element = document.createElement('invalidtype');
 
-  _supportedTransitionEvent = CSSTransitions.Transition;
+  _supportedTransitionEvent = CSSTransitions.transition;
   for (const key in CSSTransitions) {
     if (element.style[key as keyof CSSStyleDeclaration] !== undefined) {
       _supportedTransitionEvent = CSSTransitions[key];

From ba712c7134fba03056828c517bf28628b000d15a Mon Sep 17 00:00:00 2001
From: Oskar Eichler <62393985+OskarEichler@users.noreply.github.com>
Date: Thu, 27 Aug 2026 20:10:52 +0300
Subject: [PATCH 2/2] style: format provider changes

---
 src/CompatNativeSafeAreaProvider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/CompatNativeSafeAreaProvider.tsx b/src/CompatNativeSafeAreaProvider.tsx
index 4e1d8741..b155cc5a 100644
--- a/src/CompatNativeSafeAreaProvider.tsx
+++ b/src/CompatNativeSafeAreaProvider.tsx
@@ -25,5 +25,9 @@ export function CompatNativeSafeAreaProvider({
     // @ts-ignore: missing properties
     onInsetsChange({ nativeEvent: { insets, frame } });
   }, [onInsetsChange, window.height, window.width]);
-  return <View {...rest} style={style}>{children}</View>;
+  return (
+    <View {...rest} style={style}>
+      {children}
+    </View>
+  );
 }