pages

.gitignore

@@ -15,3 +15,5 @@ web-build/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+start.sh

App.js

@@ -1,12 +1,28 @@
+import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
+import HomeScreen from "./src/Pages/Home";
+import { NativeBaseProvider } from "native-base";
+import { NavigationContainer } from "@react-navigation/native";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import TestScreen from "./src/Pages/Test";
+
+// fix: https://github.com/GeekyAnts/NativeBase/issues/5758
+
+const Drawer = createDrawerNavigator();
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your apptest!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NativeBaseProvider>
+      <NavigationContainer>
+        <Drawer.Navigator>
+          <Drawer.Screen name="Home" component={HomeScreen} />
+          <Drawer.Screen name="Test" component={TestScreen} />
+        </Drawer.Navigator>
+
+        <StatusBar style="dark" />
+      </NavigationContainer>
+    </NativeBaseProvider>
   );
 }
 

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
   };
 };

package.json

@@ -9,10 +9,19 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/drawer": "^6.6.3",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/native-stack": "^6.9.13",
     "expo": "~48.0.18",
     "expo-status-bar": "~1.4.4",
+    "native-base": "^3.4.28",
     "react": "18.2.0",
-    "react-native": "0.71.8"
+    "react-native": "0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-paper": "^5.9.1",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

patches/native-base+3.4.28.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/native-base/src/core/NativeBaseProvider.tsx b/node_modules/native-base/src/core/NativeBaseProvider.tsx
+index 43b4bd1..74090f4 100644
+--- a/node_modules/native-base/src/core/NativeBaseProvider.tsx
++++ b/node_modules/native-base/src/core/NativeBaseProvider.tsx
+@@ -4,7 +4,7 @@ import {
+   Metrics,
+   initialWindowMetrics as defaultInitialWindowMetrics,
+ } from 'react-native-safe-area-context';
+-import { SSRProvider } from '@react-native-aria/utils';
++//import { SSRProvider } from '@react-native-aria/utils';
+ import { theme as defaultTheme, ITheme } from './../theme';
+ import type { IColorModeProviderProps } from './color-mode';
+ import HybridProvider from './hybrid-overlay/HybridProvider';
+@@ -94,7 +94,7 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
+             <OverlayProvider isSSR>
+               <ToastProvider>
+                 <InitializeToastRef />
+-                <SSRProvider>{children}</SSRProvider>
++                {children}
+               </ToastProvider>
+             </OverlayProvider>
+           </HybridProvider>

src/Pages/Home/index.js

@@ -0,0 +1,30 @@
+import { Text } from "native-base";
+import { StyleSheet, View } from "react-native";
+import { Avatar, Button } from "react-native-paper";
+
+export default function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Avatar.Icon size={82} icon="frequently-asked-questions" />
+      <Text fontSize="xl" style={{ marginBottom: 10 }}>
+        Kein Gerät gefunden
+      </Text>
+      <Button
+        icon="plus"
+        mode="contained-tonal"
+        onPress={() => console.log("Pressed")}
+      >
+        Gerät verbinden
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

src/Pages/Test/index.js

@@ -0,0 +1,9 @@
+import { Text } from "react-native";
+
+export default function TestScreen() {
+  return (
+    <View>
+      <Text>Test Screen</Text>
+    </View>
+  );
+}

src/utils.js

@@ -0,0 +1,10 @@
+const Styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: "#fff",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  });
+
+  export function Styles