feat(ui): integrate edge-to-edge layout on android

android/app/src/main/res/values/strings.xml

@@ -2,4 +2,5 @@
   <string name="app_name">Neuland Next</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -1,10 +1,9 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+  <style name="AppTheme" parent="Theme.EdgeToEdge">
     <item name="android:textColor">@android:color/black</item>
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#ffffff</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

app.config.json

@@ -42,6 +42,7 @@
             "tsconfigPaths": true
         },
         "plugins": [
+            ["react-native-edge-to-edge"],
             [
                 "expo-router",
                 {
@@ -82,7 +83,8 @@
                     },
                     "imageWidth": 200
                 }
-            ]
+            ],
+            "react-native-edge-to-edge"
         ],
         "extra": {
             "eas": {

package.json

@@ -71,6 +71,7 @@
     "react-native-drag-drop-ios": "^0.1.1",
     "react-native-drag-sort": "^2.4.4",
     "react-native-dynamic-app-icon": "^1.1.0",
+    "react-native-edge-to-edge": "^1.1.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.5.1",

src/app/(tabs)/_layout.tsx

@@ -11,7 +11,6 @@ import { USER_GUEST } from '@/data/constants'
 import { convertToMajorMinorPatch } from '@/utils/app-utils'
 import Aptabase from '@aptabase/react-native'
 import * as Application from 'expo-application'
-import * as NavigationBar from 'expo-navigation-bar'
 import { Redirect, useRouter } from 'expo-router'
 import React, { useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -41,16 +40,6 @@ export default function HomeLayout(): JSX.Element {
     const { isOnboarded } = React.useContext(FlowContext)
     const { userKind = USER_GUEST } = useContext(UserKindContext)
 
-    // Android only
-    const prepare = async (): Promise<void> => {
-        void NavigationBar.setPositionAsync('absolute')
-        // transparent backgrounds to see through
-        void NavigationBar.setBackgroundColorAsync('#ffffff00')
-    }
-    if (Platform.OS === 'android') {
-        void prepare()
-    }
-
     useEffect(() => {
         const shortcuts = [
             {

src/app/_layout.tsx

@@ -6,20 +6,16 @@ import i18n from '@/localization/i18n'
 import '@/styles/unistyles'
 import { storage } from '@/utils/storage'
 import { getLocales } from 'expo-localization'
-import * as NavigationBar from 'expo-navigation-bar'
 import { Stack, useRouter } from 'expo-router'
 import { Try } from 'expo-router/build/views/Try'
 import Head from 'expo-router/head'
 import * as ScreenOrientation from 'expo-screen-orientation'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AppState, Platform, Pressable, StatusBar } from 'react-native'
+import { AppState, Platform, Pressable } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
-import {
-    UnistylesRuntime,
-    createStyleSheet,
-    useStyles,
-} from 'react-native-unistyles'
+import { SystemBars } from 'react-native-edge-to-edge'
+import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_settings = {
@@ -30,14 +26,6 @@ function RootLayout(): JSX.Element {
     const { t } = useTranslation(['navigation'])
     const isPad = DeviceInfo.isTablet()
 
-    useEffect(() => {
-        if (Platform.OS === 'android') {
-            void NavigationBar.setPositionAsync('absolute')
-            // transparent backgrounds to see through
-            void NavigationBar.setBackgroundColorAsync('#ffffff00')
-            UnistylesRuntime.navigationBar.setColor('#ffffff00')
-        }
-    }, [])
     useEffect(() => {
         if (isPad) {
             void ScreenOrientation.unlockAsync()
@@ -103,7 +91,7 @@ function RootLayout(): JSX.Element {
                 <meta property="expo:handoff" content="true" />
                 <meta property="expo:spotlight" content="true" />
             </Head>
-            <StatusBar translucent backgroundColor="transparent" />
+            <SystemBars style="auto" />
             <Stack
                 screenOptions={{
                     contentStyle: styles.background,

src/app/index.tsx

@@ -1,19 +1,14 @@
-import * as NavigationBar from 'expo-navigation-bar'
 import { Redirect } from 'expo-router'
 import Head from 'expo-router/head'
 import React from 'react'
-import { Platform, StyleSheet, View, useColorScheme } from 'react-native'
+import { StyleSheet, View, useColorScheme } from 'react-native'
 
 export default function App(): JSX.Element {
     // This initial page is only used to redirect to the actual app
     // This helps to avoid weird layout issues on Android where the tab bar is not displayed correctly
     const colorScheme = useColorScheme()
     const backgroundColor = colorScheme === 'dark' ? 'black' : 'white'
-    if (Platform.OS === 'android') {
-        void NavigationBar.setPositionAsync('absolute')
-        // transparent backgrounds to see through
-        void NavigationBar.setBackgroundColorAsync('#ffffff00')
-    }
+
     return (
         <>
             <Head>