Install expo router and route to the qr scanner screen

App.tsx

@@ -1,21 +1,43 @@
-import { StyleSheet, View } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
+// In App.js in a new project
+
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import QRCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
 
-export default function StartPage() {
+function HomeScreen() {
   return (
-    <View style={styles.container}>
-      <QRCodeScanner />
-      <StatusBar style="auto" />
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Scanner">
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Scanner"
+          component={QRCodeScanner}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Tree"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

package.json

@@ -34,7 +34,9 @@
     "react-native-toast-message": "^2.2.1",
     "react-native-url-polyfill": "^2.0.0",
     "zod": "^3.23.8",
-    "zustand": "^5.0.0-rc.2"
+    "zustand": "^5.0.0-rc.2",
+    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.10.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",