Edge to edge support (#7497)

1 files changed, 21 insertions, 35 deletions

diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 7018d753a..41a54eba6 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -9,22 +9,17 @@
 // https://github.com/jobtoday/react-native-image-viewing
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {
-  LayoutAnimation,
-  PixelRatio,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native'
+import {LayoutAnimation, PixelRatio, StyleSheet, View} from 'react-native'
+import {SystemBars} from 'react-native-edge-to-edge'
 import {Gesture} from 'react-native-gesture-handler'
 import PagerView from 'react-native-pager-view'
 import Animated, {
-  AnimatedRef,
+  type AnimatedRef,
   cancelAnimation,
   interpolate,
   measure,
   runOnJS,
-  SharedValue,
+  type SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
@@ -32,30 +27,28 @@ import Animated, {
   useSharedValue,
   withDecay,
   withSpring,
-  WithSpringConfig,
+  type WithSpringConfig,
 } from 'react-native-reanimated'
 import {
-  Edge,
   SafeAreaView,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
 import * as ScreenOrientation from 'expo-screen-orientation'
-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 {type Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
 import {isIOS} from '#/platform/detection'
-import {Lightbox} from '#/state/lightbox'
+import {type 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 {setNavigationBar} from '#/alf/util/navigationBar'
+import {useTheme} from '#/alf'
+import {setSystemUITheme} from '#/alf/util/systemUI'
 import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
-import {ImageSource, Transform} from './@types'
+import {type ImageSource, type Transform} from './@types'
 import ImageDefaultHeader from './components/ImageDefaultHeader'
 import ImageItem from './components/ImageItem/ImageItem'
 
@@ -63,10 +56,6 @@ type Rect = {x: number; y: number; width: number; height: number}
 
 const PORTRAIT_UP = ScreenOrientation.OrientationLock.PORTRAIT_UP
 const PIXEL_RATIO = PixelRatio.get()
-const EDGES =
-  Platform.OS === 'android' && Platform.Version < 35
-    ? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
-    : ([] satisfies Edge[]) // iOS or Android 15+ bleeds into safe area
 
 const SLOW_SPRING: WithSpringConfig = {
   mass: isIOS ? 1.25 : 0.75,
@@ -167,9 +156,8 @@ export default function ImageViewRoot({
 
   return (
     // Keep it always mounted to avoid flicker on the first frame.
-    <SafeAreaView
+    <View
       style={[styles.screen, !activeLightbox && styles.screenHidden]}
-      edges={EDGES}
       aria-modal
       accessibilityViewIsModal
       aria-hidden={!activeLightbox}>
@@ -197,7 +185,7 @@ export default function ImageViewRoot({
           />
         )}
       </Animated.View>
-    </SafeAreaView>
+    </View>
   )
 }
 
@@ -325,25 +313,23 @@ function ImageView({
     },
   )
 
-  // style nav bar on android
+  // style system ui on android
   const t = useTheme()
   useEffect(() => {
-    setNavigationBar('lightbox', t)
+    setSystemUITheme('lightbox', t)
     return () => {
-      setNavigationBar('theme', t)
+      setSystemUITheme('theme', t)
     }
   }, [t])
 
   return (
     <Animated.View style={[styles.container, containerStyle]}>
-      <StatusBar
-        animated
-        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)}
+      <SystemBars
+        style={{statusBar: 'light', navigationBar: 'light'}}
+        hidden={{
+          statusBar: isScaled || !showControls,
+          navigationBar: false,
+        }}
       />
       <Animated.View
         style={[styles.backdrop, backdropStyle]}