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];