fix: image gallery safe area

Author: isekovanic

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -154,28 +154,26 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <SafeAreaView
+    <Animated.View
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <Animated.View style={footerStyle}>
-        <View style={[{ backgroundColor: white }, container]}>
-          {photo.type === FileTypes.Video ? (
-            videoControlElement ? (
-              videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
-            ) : (
-              <ImageGalleryVideoControl
-                duration={duration}
-                onPlayPause={onPlayPause}
-                paused={paused}
-                progress={progress}
-                videoRef={videoRef}
-              />
-            )
-          ) : null}
-        </View>
+      <SafeAreaView style={[{ backgroundColor: white }, container, footerStyle]}>
+        {photo.type === FileTypes.Video ? (
+          videoControlElement ? (
+            videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
+          ) : (
+            <ImageGalleryVideoControl
+              duration={duration}
+              onPlayPause={onPlayPause}
+              paused={paused}
+              progress={progress}
+              videoRef={videoRef}
+            />
+          )
+        ) : null}
         <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
@@ -204,8 +202,8 @@ export const ImageGalleryFooterWithContext = <
             </TouchableOpacity>
           )}
         </View>
-      </Animated.View>
-    </SafeAreaView>
+      </SafeAreaView>
+    </Animated.View>
   );
 };
 

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import { Extrapolation, interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -58,6 +53,7 @@ export const ImageGalleryHeader = <
           centerContainer,
           container,
           dateText,
+          innerContainer,
           leftContainer,
           rightContainer,
           usernameText,
@@ -93,12 +89,12 @@ export const ImageGalleryHeader = <
   };
 
   return (
-    <SafeAreaView
+    <View
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <Animated.View style={headerStyle}>
-        <View style={[styles.container, { backgroundColor: white }, container]}>
+      <SafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
+        <View style={[styles.innerContainer, innerContainer]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -124,8 +120,8 @@ export const ImageGalleryHeader = <
             <View style={[styles.rightContainer, rightContainer]} />
           )}
         </View>
-      </Animated.View>
-    </SafeAreaView>
+      </SafeAreaView>
+    </View>
   );
 };
 
@@ -137,16 +133,16 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-  },
   date: {
     fontSize: 12,
     fontWeight: '500',
     opacity: 0.5,
   },
+  innerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+  },
   leftContainer: {
     flex: 1,
     justifyContent: 'center',

package/src/contexts/themeContext/utils/theme.ts

@@ -226,6 +226,7 @@ export type Theme = {
       centerContainer: ViewStyle;
       container: ViewStyle;
       dateText: TextStyle;
+      innerContainer: ViewStyle;
       leftContainer: ViewStyle;
       rightContainer: ViewStyle;
       usernameText: TextStyle;
@@ -983,6 +984,7 @@ export const defaultTheme: Theme = {
       centerContainer: {},
       container: {},
       dateText: {},
+      innerContainer: {},
       leftContainer: {},
       rightContainer: {},
       usernameText: {},