navigation works!

App.tsx

@@ -1,20 +1,31 @@
-import { StatusBar } from 'expo-status-bar';
+import * as React from "react";
-import { StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import HomeScreen from "@/screens/Home";
+import ProfileScreen from "@/screens/Profile";
 
-export default function App() {
+export type RootStackParamList = {
+  Home: undefined;
+  Profile: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function App() {
   return (
-    <View style={styles.container}>
+    <NavigationContainer>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Stack.Navigator screenOptions={{ headerLargeTitle: true }}>
-      <StatusBar style="auto" />
+        <Stack.Screen name="Home" component={HomeScreen} />
-    </View>
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 
-const styles = StyleSheet.create({
+declare global {
-  container: {
+  namespace ReactNavigation {
-    flex: 1,
+    interface RootParamList extends RootStackParamList {}
-    backgroundColor: '#fff',
+  }
-    alignItems: 'center',
+}
-    justifyContent: 'center',
+
-  },
+export default App;
-});

src/screens/Home.tsx

@@ -0,0 +1,26 @@
+import { useNavigation } from "@react-navigation/native";
+import { type RootStackParamList } from "App";
+import { StatusBar } from "expo-status-bar";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+export default function HomeScreen() {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
+
+      <Button title="profile" onPress={() => navigation.navigate("Profile")} />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

src/screens/Profile.tsx

@@ -0,0 +1,20 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export default function ProfileScreen() {
+  return (
+    <View style={styles.container}>
+      <Text>This is a profile screen</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   }
 }