From 611fbb75f3bc86b50e83693d339c507909c4aadc Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 29 Nov 2024 13:45:51 +0000
Subject: [PATCH] attempt to install rn-e2e

---
 app.config.js                                |  1 +
 package.json                                 |  1 +
 src/alf/util/navigationBar.ts                | 18 ---------------
 src/components/Layout.tsx                    | 12 ++++------
 src/view/com/lightbox/ImageViewing/index.tsx | 24 ++++++--------------
 src/view/shell/index.tsx                     | 12 +++-------
 yarn.lock                                    |  5 ++++
 7 files changed, 21 insertions(+), 52 deletions(-)
 delete mode 100644 src/alf/util/navigationBar.ts

diff --git a/app.config.js b/app.config.js
index fd754a50f7..53c28fc3a3 100644
--- a/app.config.js
+++ b/app.config.js
@@ -213,6 +213,7 @@ module.exports = function (config) {
         channel: UPDATES_CHANNEL,
       },
       plugins: [
+        'react-native-edge-to-edge',
         'expo-localization',
         USE_SENTRY && [
           '@sentry/react-native/expo',
diff --git a/package.json b/package.json
index ddb90c4f65..4fded8a6a8 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,7 @@
     "react-native-compressor": "^1.8.24",
     "react-native-date-picker": "^4.4.2",
     "react-native-drawer-layout": "^4.0.1",
+    "react-native-edge-to-edge": "^1.1.3",
     "react-native-gesture-handler": "2.20.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "0.41.2",
diff --git a/src/alf/util/navigationBar.ts b/src/alf/util/navigationBar.ts
deleted file mode 100644
index face869837..0000000000
--- a/src/alf/util/navigationBar.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as NavigationBar from 'expo-navigation-bar'
-
-import {isAndroid} from '#/platform/detection'
-import {Theme} from '../types'
-
-export function setNavigationBar(themeType: 'theme' | 'lightbox', t: Theme) {
-  if (isAndroid) {
-    if (themeType === 'theme') {
-      NavigationBar.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setBorderColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setButtonStyleAsync(t.name !== 'light' ? 'light' : 'dark')
-    } else {
-      NavigationBar.setBackgroundColorAsync('black')
-      NavigationBar.setBorderColorAsync('black')
-      NavigationBar.setButtonStyleAsync('light')
-    }
-  }
-}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ea11e22174..4e168ebb38 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 import React, {useContext, useMemo} from 'react'
 import {View, ViewStyle} from 'react-native'
 import {StyleProp} from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {ScrollView} from '#/view/com/util/Views'
@@ -31,7 +31,6 @@ let Screen = ({
   disableTopPadding?: boolean
   style?: StyleProp<ViewStyle>
 }): React.ReactNode => {
-  const {top} = useSafeAreaInsets()
   const context = useMemo(
     () => ({
       withinScreen: true,
@@ -42,12 +41,9 @@ let Screen = ({
   )
   return (
     <LayoutContext.Provider value={context}>
-      <View
-        style={[
-          {paddingTop: disableTopPadding ? 0 : top},
-          a.util_screen_outer,
-          style,
-        ]}
+      <SafeAreaView
+        edges={disableTopPadding ? ['left', 'right', 'bottom'] : undefined}
+        style={[a.util_screen_outer, style]}
         {...props}
       />
     </LayoutContext.Provider>
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index f91acc12aa..90ebf5ab9d 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -16,6 +16,7 @@ import {
   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, {
@@ -40,7 +41,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
-import {StatusBar} from 'expo-status-bar'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 
@@ -51,8 +51,6 @@ 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 {setNavigationBar} from '#/alf/util/navigationBar'
 import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
 import {ImageSource, Transform} from './@types'
 import ImageDefaultHeader from './components/ImageDefaultHeader'
@@ -294,26 +292,18 @@ function ImageView({
     },
   )
 
-  // style nav bar on android
-  const t = useTheme()
   useEffect(() => {
-    setNavigationBar('lightbox', t)
+    const entry = SystemBars.pushStackEntry({
+      style: 'light',
+      hidden: isScaled || !showControls,
+    })
     return () => {
-      setNavigationBar('theme', t)
+      SystemBars.popStackEntry(entry)
     }
-  }, [t])
+  }, [isScaled, showControls])
 
   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)}
-      />
       <Animated.View
         style={[styles.backdrop, backdropStyle]}
         renderToHardwareTextureAndroid
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 8dbbbea6f2..43e46618d8 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -1,8 +1,8 @@
 import {useCallback, useEffect} from 'react'
 import {BackHandler, useWindowDimensions, View} from 'react-native'
 import {Drawer} from 'react-native-drawer-layout'
+import {SystemBars} from 'react-native-edge-to-edge'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
 import {useDedupe} from '#/lib/hooks/useDedupe'
@@ -23,7 +23,6 @@ import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, select, useTheme} from '#/alf'
-import {setNavigationBar} from '#/alf/util/navigationBar'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -133,19 +132,14 @@ export const Shell: React.FC = function ShellImpl() {
   const t = useTheme()
   useIntentHandler()
 
-  useEffect(() => {
-    setNavigationBar('theme', t)
-  }, [t])
-
   return (
     <View testID="mobileShellView" style={[a.h_full, t.atoms.bg]}>
-      <StatusBar
+      <SystemBars
         style={
-          t.name !== 'light' || (isIOS && fullyExpandedCount > 0)
+          t.scheme === 'dark' || (isIOS && fullyExpandedCount > 0)
             ? 'light'
             : 'dark'
         }
-        animated
       />
       <RoutesContainer>
         <ShellInner />
diff --git a/yarn.lock b/yarn.lock
index f70489e179..b932267caa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16129,6 +16129,11 @@ react-native-drawer-layout@^4.0.1:
   dependencies:
     use-latest-callback "^0.2.1"
 
+react-native-edge-to-edge@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-native-edge-to-edge/-/react-native-edge-to-edge-1.1.3.tgz#bcfc5142da5556766de7ac8371fba94d0bc72e07"
+  integrity sha512-+as8PmGZCvZtHbHT2xXH0YFH1qqBpFVH14Pzk0+6fI53zWMa56m5HY9S1mhIBgPjdqLBM8Y6KresI1/MUI86pw==
+
 react-native-gesture-handler@2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.0.tgz#2d9ec4e9bd22619ebe36269dda3ecb1173928276"