From 2104f0f3a1da3bb22a8734015f930fc60c0ddfd0 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Thu, 15 May 2025 10:27:59 +0700
Subject: [PATCH] Percobaan screen navigation

---
 App.js                  | 33 ++++++++++++++++++---------------
 screens/ScreenContoh.js | 22 ++++++++++++++++++++++
 screens/ScreenHome.js   | 22 ++++++++++++++++++++++
 3 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 screens/ScreenContoh.js
 create mode 100644 screens/ScreenHome.js

diff --git a/App.js b/App.js
index 09f879b..ed8f60e 100644
--- a/App.js
+++ b/App.js
@@ -1,20 +1,23 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import * as React from 'react';
+import 'react-native-gesture-handler';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-export default function App() {
+import ScreenHome from './screens/ScreenHome';
+import ScreenContoh from './screens/ScreenContoh';
+
+const Stack = createNativeStackNavigator();
+
+const App = () => {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={ScreenHome} />
+        <Stack.Screen name="Contoh" component={ScreenContoh} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export default App;
diff --git a/screens/ScreenContoh.js b/screens/ScreenContoh.js
new file mode 100644
index 0000000..59a1cef
--- /dev/null
+++ b/screens/ScreenContoh.js
@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenContoh = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Contoh</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenContoh;
\ No newline at end of file
diff --git a/screens/ScreenHome.js b/screens/ScreenHome.js
new file mode 100644
index 0000000..90e57ba
--- /dev/null
+++ b/screens/ScreenHome.js
@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenHome = ({ navigation }) => {
+    return (
+        <View style={styles.container}>
+            <Text>Ini halaman Home</Text>
+            <StatusBar style="auto" />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default ScreenHome;
\ No newline at end of file