From 875c6a43297cbcb449d6546b5548a48cb5ec8faa Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Dec 2024 13:26:01 +0530
Subject: [PATCH] fix: image gallery header and footer safe area view (#2840)

---
 .../components/ImageGalleryFooter.tsx         | 64 +++++++++----------
 .../components/ImageGalleryHeader.tsx         | 11 ++--
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
index a5ae6d6e2f..8a6a338071 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -154,14 +154,14 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <View
+    <SafeAreaView
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
       <Animated.View style={footerStyle}>
-        <SafeAreaView style={[{ backgroundColor: white }, container]}>
+        <View style={[{ backgroundColor: white }, container]}>
           {photo.type === FileTypes.Video ? (
             videoControlElement ? (
               videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
@@ -175,37 +175,37 @@ export const ImageGalleryFooterWithContext = <
               />
             )
           ) : null}
-          <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
-            {leftElement ? (
-              leftElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
-            )}
-            {centerElement ? (
-              centerElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <View style={[styles.centerContainer, centerContainer]}>
-                <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
-                  {t<string>('{{ index }} of {{ photoLength }}', {
-                    index: photoLength - selectedIndex,
-                    photoLength,
-                  })}
-                </Text>
+        </View>
+        <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
+          {leftElement ? (
+            leftElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
+          )}
+          {centerElement ? (
+            centerElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <View style={[styles.centerContainer, centerContainer]}>
+              <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
+                {t<string>('{{ index }} of {{ photoLength }}', {
+                  index: photoLength - selectedIndex,
+                  photoLength,
+                })}
+              </Text>
+            </View>
+          )}
+          {rightElement ? (
+            rightElement({ openGridView, photo, share, shareMenuOpen })
+          ) : (
+            <TouchableOpacity onPress={openGridView}>
+              <View style={[styles.rightContainer, rightContainer]}>
+                {GridIcon ? GridIcon : <GridIconDefault />}
               </View>
-            )}
-            {rightElement ? (
-              rightElement({ openGridView, photo, share, shareMenuOpen })
-            ) : (
-              <TouchableOpacity onPress={openGridView}>
-                <View style={[styles.rightContainer, rightContainer]}>
-                  {GridIcon ? GridIcon : <GridIconDefault />}
-                </View>
-              </TouchableOpacity>
-            )}
-          </View>
-        </SafeAreaView>
+            </TouchableOpacity>
+          )}
+        </View>
       </Animated.View>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -300,7 +300,7 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     flexDirection: 'row',
-    height: 56,
+    paddingVertical: 4,
   },
   leftContainer: {
     flex: 1,
diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
index 05b2a3520d..ef835f842c 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -93,12 +93,12 @@ export const ImageGalleryHeader = <
   };
 
   return (
-    <View
+    <SafeAreaView
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
       <Animated.View style={headerStyle}>
-        <SafeAreaView style={[styles.container, { backgroundColor: white }, container]}>
+        <View style={[styles.container, { backgroundColor: white }, container]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -123,9 +123,9 @@ export const ImageGalleryHeader = <
           ) : (
             <View style={[styles.rightContainer, rightContainer]} />
           )}
-        </SafeAreaView>
+        </View>
       </Animated.View>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -140,12 +140,11 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingVertical: 4,
+    paddingVertical: 8,
   },
   date: {
     fontSize: 12,
     fontWeight: '500',
-    marginBottom: 8,
     opacity: 0.5,
   },
   leftContainer: {