diff --git a/App.tsx b/App.tsx index 15311dc..7f2b58d 100644 --- a/App.tsx +++ b/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 ( - - Home Screen - - ); -} - -const Stack = createNativeStackNavigator(); +const Stack = createNativeStackNavigator(); function App() { return ( @@ -31,8 +22,8 @@ function App() { options={{ headerShown: false }} /> diff --git a/src/app/index.tsx b/src/app/index.tsx index e69de29..2f937ea 100644 --- a/src/app/index.tsx +++ b/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 ( + + + Home Screen! + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/src/components/QRCodeScanner/QRCodeScanner.tsx b/src/components/QRCodeScanner/QRCodeScanner.tsx index aa3f79d..0fc3be4 100644 --- a/src/components/QRCodeScanner/QRCodeScanner.tsx +++ b/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; + +export default function QRCodeScanner({ navigation }: QRCodeScannerProps) { const [permission, requestPermission] = useCameraPermissions(); const [disableScanner, setDisableScanner] = useState(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 Bruh you didn't enable perms for the camera; + return Permission for camera not granted.; } return ( diff --git a/src/components/TreeInfoPage/TreeInfoPage.tsx b/src/components/TreeInfoPage/TreeInfoPage.tsx new file mode 100644 index 0000000..ea773b7 --- /dev/null +++ b/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 ( + + + i found a tree + with an id + {route.params.treeId} + navigation.push('Scanner')}> + Back to scanner + + + + ); +} diff --git a/src/components/TreeInfoPage/styles.ts b/src/components/TreeInfoPage/styles.ts new file mode 100644 index 0000000..0cb1df7 --- /dev/null +++ b/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', + }, +}); diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..a334e1e --- /dev/null +++ b/src/types.ts @@ -0,0 +1,6 @@ +// Not sure where to keep this stuff +type RootStackParamList = { + Home: undefined; + Scanner: undefined; + TreeInfoPage: { treeId: string }; +};