Allow passing style to SafeAreaProvider

th3rdwave · Jun 13, 2020 · ba33b31 · ba33b31
1 parent f494279
commit ba33b31
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/SafeArea.types.ts b/src/SafeArea.types.ts
@@ -1,4 +1,9 @@
-import { NativeSyntheticEvent, ViewStyle, ViewProps } from 'react-native';
+import {
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
 export type Edge = 'top' | 'right' | 'bottom' | 'left';
 
@@ -27,7 +32,7 @@ export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
 
 export interface NativeSafeAreaProviderProps {
   children?: React.ReactNode;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
   onInsetsChange: InsetChangeNativeCallback;
 }
 

diff --git a/src/SafeAreaContext.tsx b/src/SafeAreaContext.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
+import { Dimensions, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import NativeSafeAreaProvider from './NativeSafeAreaProvider';
 import { EdgeInsets, InsetChangedEvent, Metrics, Rect } from './SafeArea.types';
 
@@ -16,12 +16,14 @@ export interface SafeAreaViewProps {
    * @deprecated
    */
   initialSafeAreaInsets?: EdgeInsets | null;
+  style?: StyleProp<ViewStyle>;
 }
 
 export function SafeAreaProvider({
   children,
   initialMetrics,
   initialSafeAreaInsets,
+  style,
 }: SafeAreaViewProps) {
   const parentInsets = useParentSafeAreaInsets();
   const parentFrame = useParentSafeAreaFrame();
@@ -47,7 +49,10 @@ export function SafeAreaProvider({
   }, []);
 
   return (
-    <NativeSafeAreaProvider style={styles.fill} onInsetsChange={onInsetsChange}>
+    <NativeSafeAreaProvider
+      style={[styles.fill, style]}
+      onInsetsChange={onInsetsChange}
+    >
       {insets != null ? (
         <SafeAreaFrameContext.Provider value={frame}>
           <SafeAreaInsetsContext.Provider value={insets}>