Merge pull request #415 from OpenDTU-App/382-integrate-edge-to-edge-to-make-google-happy

Author: CommanderRedYT

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

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.EdgeToEdge">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:windowIsTranslucent">true</item>

licenses.json

@@ -185,6 +185,12 @@
         "licenseUrl": "https://github.com/luggit/react-native-config/raw/master/LICENSE",
         "parents": "opendtu-react-native"
     },
+    "react-native-edge-to-edge@1.7.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/zoontek/react-native-edge-to-edge",
+        "licenseUrl": "https://github.com/zoontek/react-native-edge-to-edge/raw/master/LICENSE",
+        "parents": "opendtu-react-native"
+    },
     "react-native-fast-image@8.6.3": {
         "licenses": "(MIT AND Apache-2.0)",
         "repository": "https://github.com/DylanVann/react-native-fast-image",

package.json

@@ -65,6 +65,7 @@
         "react-native": "0.81.4",
         "react-native-charts-wrapper": "^0.6.0",
         "react-native-config": "1.5.6",
+        "react-native-edge-to-edge": "^1.7.0",
         "react-native-fast-image": "^8.6.3",
         "react-native-flex-layout": "^0.1.5",
         "react-native-fs": "^2.20.0",

src/InnerApp.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Config from 'react-native-config';
+import { SystemBars } from 'react-native-edge-to-edge';
 import type { MD3Theme } from 'react-native-paper';
 import {
   adaptNavigationTheme,
@@ -19,7 +20,7 @@ import Toast, {
   SuccessToast,
 } from 'react-native-toast-message';
 
-import { StatusBar, useColorScheme } from 'react-native';
+import { useColorScheme } from 'react-native';
 
 import moment from 'moment/moment';
 
@@ -310,10 +311,12 @@ const InnerApp: FC = () => {
     <PaperProvider theme={theme}>
       <AppOfflineModal />
       <AppChangelogModal />
-      <StatusBar
-        backgroundColor={theme.colors.background}
-        barStyle={theme.dark ? 'light-content' : 'dark-content'}
-        animated
+      <SystemBars
+        style={{
+          statusBar: theme.dark ? 'light' : 'dark',
+          navigationBar: theme.dark ? 'light' : 'dark',
+        }}
+        hidden={{ statusBar: false, navigationBar: false }}
       />
       <NavigationContainer theme={navigationTheme}>
         <NavigationStack />

yarn.lock

@@ -12542,6 +12542,7 @@ __metadata:
     react-native: "npm:0.81.4"
     react-native-charts-wrapper: "npm:^0.6.0"
     react-native-config: "npm:1.5.6"
+    react-native-edge-to-edge: "npm:^1.7.0"
     react-native-fast-image: "npm:^8.6.3"
     react-native-flex-layout: "npm:^0.1.5"
     react-native-fs: "npm:^2.20.0"
@@ -13289,6 +13290,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-edge-to-edge@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "react-native-edge-to-edge@npm:1.7.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/26ca09c125ce21b632b1645f23681688630b1bc4d7ad869de74c64328a29fd5300eaf258f1353072016c30a0c236e832e4b19ed42846c48d19898917d4c13112
+  languageName: node
+  linkType: hard
+
 "react-native-fast-image@npm:^8.6.3":
   version: 8.6.3
   resolution: "react-native-fast-image@npm:8.6.3"