fix: image gallery header and footer safe area view (#2840)

Author: khushal87

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,

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: {