Percobaan screen navigation

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}>
+    <NavigationContainer>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Stack.Navigator initialRouteName="Home">
-      <StatusBar style="auto" />
+        <Stack.Screen name="Home" component={ScreenHome} />
-    </View>
+        <Stack.Screen name="Contoh" component={ScreenContoh} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
-}
+};
 
-const styles = StyleSheet.create({
+export default App;
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

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;

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;