Navigation theming and native Android

app/App.tsx

@@ -1,8 +1,13 @@
-import 'react-native-gesture-handler';
+import "react-native-gesture-handler";
 import React from "react";
-import { StyleSheet, useWindowDimensions } from "react-native";
-import { NavigationContainer } from "@react-navigation/native";
-import { PaperProvider, Text } from "react-native-paper";
+import { StyleSheet, useColorScheme, useWindowDimensions } from "react-native";
+import {
+  NavigationContainer,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from "@react-navigation/native";
+import { PaperProvider, Text, adaptNavigationTheme } from "react-native-paper";
+import { StatusBar } from "expo-status-bar";
 import { BottomNavigation } from "./src/BottomNavigation";
 import { DrawerNavigation } from "./src/DrawerNavigation";
 
@@ -19,8 +24,8 @@ const linking = {
       Home: {
         screens: {
           List: "lists/:listId?",
-          Task: "tasks/:taskId"
-        }
+          Task: "tasks/:taskId",
+        },
       },
       Notifications: "notifications",
       Profile: "profile",
@@ -28,16 +33,27 @@ const linking = {
   },
 };
 
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+  reactNavigationLight: NavigationDefaultTheme,
+  reactNavigationDark: NavigationDarkTheme,
+});
+
 export default function App() {
+  const colorScheme = useColorScheme();
   const dimensions = useWindowDimensions();
   //const NavigationComponent = dimensions.width < 700 ? BottomNavigation : DrawerNavigation;
 
   return (
-    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-      <PaperProvider>
+    <PaperProvider>
+      <NavigationContainer
+        linking={linking}
+        fallback={<Text>Loading...</Text>}
+        theme={colorScheme === "dark" ? DarkTheme : LightTheme}
+      >
         <BottomNavigation />
-      </PaperProvider>
-    </NavigationContainer>
+        <StatusBar />
+      </NavigationContainer>
+    </PaperProvider>
   );
 }