Add react navigation

App.tsx

@@ -1,20 +1,11 @@
-// 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 HomeScreen from '@/app';
 import QRCodeScanner from '@/components/QRCodeScanner/QRCodeScanner';
+import TreeInfoPage from '@/components/TreeInfoPage/TreeInfoPage';
 
-function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-    </View>
-  );
-}
-
-const Stack = createNativeStackNavigator();
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function App() {
   return (
@@ -31,8 +22,8 @@ function App() {
           options={{ headerShown: false }}
         />
         <Stack.Screen
-          name="Tree"
-          component={HomeScreen}
+          name="TreeInfoPage"
+          component={TreeInfoPage}
           options={{ headerShown: false }}
         />
       </Stack.Navigator>

src/app/index.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import Logo from '@/components/Logo';
+
+// Dummy home screen for now? idk what to put here
+export default function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Logo />
+      <Text>Home Screen!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/components/QRCodeScanner/QRCodeScanner.tsx

@@ -5,9 +5,12 @@ import {
   CameraView,
   useCameraPermissions,
 } from 'expo-camera';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import styles from './styles';
 
-export default function QRCodeScanner() {
+type QRCodeScannerProps = NativeStackScreenProps<RootStackParamList, 'Scanner'>;
+
+export default function QRCodeScanner({ navigation }: QRCodeScannerProps) {
   const [permission, requestPermission] = useCameraPermissions();
   const [disableScanner, setDisableScanner] = useState<boolean>(false);
 
@@ -22,13 +25,19 @@ export default function QRCodeScanner() {
     // Disable scanning callback so we don't scan multiple times
     setDisableScanner(true);
 
-    Alert.alert('YUHHHHH QR Code Scanned', data.data, [
-      {
-        text: 'OK',
-        // Enable scanner after 2 seconds of pressing OK
-        onPress: () => setTimeout(() => setDisableScanner(false), 2000),
-      },
-    ]);
+    Alert.alert(
+      'YUHHHHH QR Code Scanned',
+      `Going to tree page with id: ${data.data}`,
+      [
+        {
+          text: 'OK',
+          // Enable scanner after 2 seconds of pressing OK
+          onPress: () => navigation.push('TreeInfoPage', { treeId: data.data }),
+        },
+      ],
+    );
+
+    // setTimeout(() => setDisableScanner(false), 2000),
   };
 
   // Camera permissions are still loading.
@@ -38,7 +47,7 @@ export default function QRCodeScanner() {
 
   // No perms :(
   if (!permission.granted) {
-    return <Text>Bruh you didn't enable perms for the camera</Text>;
+    return <Text>Permission for camera not granted.</Text>;
   }
 
   return (

src/components/TreeInfoPage/TreeInfoPage.tsx

@@ -0,0 +1,26 @@
+import { Pressable, Text, View } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import Logo from '@/components/Logo';
+import styles from './styles';
+
+type TreeInfoPageProps = NativeStackScreenProps<
+  RootStackParamList,
+  'TreeInfoPage'
+>;
+
+export default function TreeInfoPage({ route, navigation }: TreeInfoPageProps) {
+  // Just placeholder text for now to show that the tree ID is being passed
+  return (
+    <View style={styles.container}>
+      <Logo />
+      <Text>i found a tree</Text>
+      <Text>with an id</Text>
+      <Text>{route.params.treeId}</Text>
+      <Pressable onPress={() => navigation.push('Scanner')}>
+        <Text>Back to scanner</Text>
+      </Pressable>
+      <StatusBar style="auto" />
+    </View>
+  );
+}

src/components/TreeInfoPage/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/types.ts

@@ -0,0 +1,6 @@
+// Not sure where to keep this stuff
+type RootStackParamList = {
+  Home: undefined;
+  Scanner: undefined;
+  TreeInfoPage: { treeId: string };
+};