From 7268a93b0290e35face6adda5d3507d21c2a62bc Mon Sep 17 00:00:00 2001
From: Syahdan <syahdanhafizzz@gmail.com>
Date: Thu, 15 May 2025 10:43:25 +0700
Subject: [PATCH] navigation works!

---
 App.tsx                 | 41 ++++++++++++++++++++++++++---------------
 src/screens/Home.tsx    | 26 ++++++++++++++++++++++++++
 src/screens/Profile.tsx | 20 ++++++++++++++++++++
 3 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 src/screens/Home.tsx
 create mode 100644 src/screens/Profile.tsx

diff --git a/App.tsx b/App.tsx
index 0329d0c..9970551 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,20 +1,31 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import * as React from "react";
+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}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerLargeTitle: true }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}
+
+export default App;
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
new file mode 100644
index 0000000..49564d5
--- /dev/null
+++ b/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",
+  },
+});
diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx
new file mode 100644
index 0000000..b039110
--- /dev/null
+++ b/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",
+  },
+});