attempt to install rn-e2e

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',

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",

src/alf/util/navigationBar.ts

@@ -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')
-    }
-  }
-}

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>

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

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 />

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"