diff --git a/src/CompatNativeSafeAreaProvider.tsx b/src/CompatNativeSafeAreaProvider.tsx
index 114ad8d1..b155cc5a 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,9 @@ export function CompatNativeSafeAreaProvider({
// @ts-ignore: missing properties
onInsetsChange({ nativeEvent: { insets, frame } });
}, [onInsetsChange, window.height, window.width]);
- return {children};
+ return (
+
+ {children}
+
+ );
}
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 = {
+ 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(null);
@@ -108,7 +109,7 @@ export function NativeSafeAreaProvider({
}, [onInsetsChange]);
return (
-
+
{children}
);
@@ -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];