add edges to ImageViewing component (#471)

1 files changed, 17 insertions, 3 deletions

diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 8aee9ebbd..c10d57b37 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -8,7 +8,13 @@
 // Original code copied and simplified from the link below as the codebase is currently not maintained:
 // https://github.com/jobtoday/react-native-image-viewing
 
-import React, {ComponentType, useCallback, useRef, useEffect} from 'react'
+import React, {
+  ComponentType,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from 'react'
 import {
   Animated,
   Dimensions,
@@ -16,6 +22,7 @@ import {
   View,
   VirtualizedList,
   ModalProps,
+  Platform,
 } from 'react-native'
 import {ModalsContainer} from '../../modals/Modal'
 
@@ -26,7 +33,7 @@ import useAnimatedComponents from './hooks/useAnimatedComponents'
 import useImageIndexChange from './hooks/useImageIndexChange'
 import useRequestClose from './hooks/useRequestClose'
 import {ImageSource} from './@types'
-import {SafeAreaView} from 'react-native-safe-area-context'
+import {Edge, SafeAreaView} from 'react-native-safe-area-context'
 
 type Props = {
   images: ImageSource[]
@@ -87,6 +94,13 @@ function ImageViewing({
     [toggleBarsVisible],
   )
 
+  const edges = useMemo(() => {
+    if (Platform.OS === 'android') {
+      return ['top', 'bottom', 'left', 'right'] satisfies Edge[]
+    }
+    return ['left', 'right'] satisfies Edge[] // iOS, so no top/bottom safe area
+  }, [])
+
   const onLayout = useCallback(() => {
     if (imageIndex) {
       imageList.current?.scrollToIndex({index: imageIndex, animated: false})
@@ -98,7 +112,7 @@ function ImageViewing({
   }
 
   return (
-    <SafeAreaView style={styles.screen} onLayout={onLayout}>
+    <SafeAreaView style={styles.screen} onLayout={onLayout} edges={edges}>
       <ModalsContainer />
       <View style={[styles.container, {opacity, backgroundColor}]}>
         <Animated.View style={[styles.header, {transform: headerTransform}]}>