From fa639e6c448097b90fa134ea96aa84a9a834d137 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 20 Dec 2024 19:28:14 +0000
Subject: [PATCH 1/2] fix lightbox on android 15

---
 .../ImageViewing/components/ImageDefaultHeader.tsx        | 8 ++------
 src/view/com/lightbox/ImageViewing/index.tsx              | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
index 7a37c7e414..3089b6d3f6 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
@@ -5,12 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {
-  SafeAreaView,
-  StyleSheet,
-  TouchableOpacity,
-  ViewStyle,
-} from 'react-native'
+import {StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index f91acc12aa..96f78a709e 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -62,9 +62,9 @@ type Rect = {x: number; y: number; width: number; height: number}
 
 const PIXEL_RATIO = PixelRatio.get()
 const EDGES =
-  Platform.OS === 'android'
+  Platform.OS === 'android' && Platform.Version < 35
     ? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
-    : (['left', 'right'] satisfies Edge[]) // iOS, so no top/bottom safe area
+    : (['left', 'right'] satisfies Edge[]) // iOS or Android 15+, so no top/bottom safe area
 
 const SLOW_SPRING: WithSpringConfig = {
   mass: isIOS ? 1.25 : 0.75,

From a72d7736c605b74429e229789ac21dcab7769500 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 20 Dec 2024 19:49:36 +0000
Subject: [PATCH 2/2] align lightbox behaviour with iOS

---
 src/view/com/lightbox/ImageViewing/index.tsx | 26 ++++++++++++--------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 96f78a709e..f79b1eae0c 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -40,18 +40,19 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
+import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 
 import {Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
-import {isIOS} from '#/platform/detection'
+import {isAndroid, isIOS} from '#/platform/detection'
 import {Lightbox} from '#/state/lightbox'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
-import {ios, useTheme} from '#/alf'
+import {useTheme} from '#/alf'
 import {setNavigationBar} from '#/alf/util/navigationBar'
 import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
 import {ImageSource, Transform} from './@types'
@@ -60,11 +61,12 @@ import ImageItem from './components/ImageItem/ImageItem'
 
 type Rect = {x: number; y: number; width: number; height: number}
 
+const EDGE_TO_EDGE = !(Platform.OS === 'android' && Platform.Version < 35)
+
 const PIXEL_RATIO = PixelRatio.get()
-const EDGES =
-  Platform.OS === 'android' && Platform.Version < 35
-    ? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
-    : (['left', 'right'] satisfies Edge[]) // iOS or Android 15+, so no top/bottom safe area
+const EDGES = EDGE_TO_EDGE
+  ? (['left', 'right'] satisfies Edge[]) // iOS or Android 15+, so no top/bottom safe area
+  : (['top', 'bottom', 'left', 'right'] satisfies Edge[])
 
 const SLOW_SPRING: WithSpringConfig = {
   mass: isIOS ? 1.25 : 0.75,
@@ -298,10 +300,16 @@ function ImageView({
   const t = useTheme()
   useEffect(() => {
     setNavigationBar('lightbox', t)
+    if (isAndroid && EDGE_TO_EDGE && !showControls) {
+      NavigationBar.setVisibilityAsync('hidden')
+    }
     return () => {
       setNavigationBar('theme', t)
+      if (isAndroid && EDGE_TO_EDGE && !showControls) {
+        NavigationBar.setVisibilityAsync('visible')
+      }
     }
-  }, [t])
+  }, [t, showControls])
 
   return (
     <Animated.View style={[styles.container, containerStyle]}>
@@ -310,9 +318,7 @@ function ImageView({
         style="light"
         hideTransitionAnimation="slide"
         backgroundColor="black"
-        // hiding causes layout shifts on android,
-        // so avoid until we add edge-to-edge mode
-        hidden={ios(isScaled || !showControls)}
+        hidden={EDGE_TO_EDGE ? isScaled || !showControls : false}
       />
       <Animated.View
         style={[styles.backdrop, backdropStyle]}