Update StoryDecorator.tsx

sherlo-io · Nov 9, 2024 · f58e257 · f58e257
1 parent 87890b6
commit f58e257
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/testing/testing-components/src/decorators/StoryDecorator.tsx b/testing/testing-components/src/decorators/StoryDecorator.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
-import { SafeAreaView, StyleSheet, useColorScheme } from 'react-native';
+import { StyleSheet, useColorScheme, View } from 'react-native';
 import { setStatusBarStyle } from 'expo-status-bar';
-
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const StoryDecorator =
   ({ placement }: { placement?: 'top' | 'center' | 'bottom' } = {}) =>
   (Story: React.FC) => {
     const theme = useColorScheme();
+    const insets = useSafeAreaInsets();
 
     useEffect(() => {
       setStatusBarStyle(theme === 'dark' ? 'light' : 'dark');
@@ -28,14 +29,19 @@ const StoryDecorator =
     }
 
     return (
-      <SafeAreaView
+      <View
         style={[
           containerStyle,
-          { flex: 1, backgroundColor: theme === 'dark' ? '#333' : '#dfdfdf' },
+          {
+            flex: 1,
+            backgroundColor: theme === 'dark' ? '#333' : '#dfdfdf',
+            paddingBottom: insets.bottom,
+            paddingTop: insets.top,
+          },
         ]}
       >
         <Story />
-      </SafeAreaView>
+      </View>
     );
   };