Mempersiapkan menu navigasi

App.js

@@ -5,7 +5,12 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import ScreenHome from './screens/ScreenHome';
-import ScreenContoh from './screens/ScreenContoh';
+import ScreenProfile from './screens/ScreenProfile';
+import ScreenMassa from './screens/ScreenMassa';
+import ScreenSuhu from './screens/ScreenSuhu';
+import ScreenPuasa from './screens/ScreenPuasa';
+import ScreenTensi from './screens/ScreenTensi';
+import ScreenGula from './screens/ScreenGula';
 
 const Stack = createNativeStackNavigator();
 
@@ -14,7 +19,12 @@ const App = () => {
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen name="Home" component={ScreenHome} />
-        <Stack.Screen name="Contoh" component={ScreenContoh} />
+        <Stack.Screen name="Profile" component={ScreenProfile} />
+        <Stack.Screen name="Massa" component={ScreenMassa} />
+        <Stack.Screen name="Suhu" component={ScreenSuhu} />
+        <Stack.Screen name="Puasa" component={ScreenPuasa} />
+        <Stack.Screen name="Tensi" component={ScreenTensi} />
+        <Stack.Screen name="Gula" component={ScreenGula} />
       </Stack.Navigator>
     </NavigationContainer>
   );

screens/ScreenGula.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenGula = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Cek Gula Darah</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenGula;

screens/ScreenHome.js

@@ -6,21 +6,39 @@ const ScreenHome = ({ navigation }) => {
     const menuItems = [
         {
             key: '1',
-            title: 'Apa aja',
+            title: 'Profile',
-            icon: require('../assets/illustration/cheeky.png'),
+            icon: require('../assets/illustration/menu/male.png'),
-            screen: 'Contoh',
+            screen: 'Profile',
         },
         {
             key: '2',
-            title: 'Boleh',
+            title: 'Berat Badan Ideal',
-            icon: require('../assets/illustration/cheeky.png'),
+            icon: require('../assets/illustration/menu/height.png'),
-            screen: 'Contoh',
+            screen: 'Massa',
         },
         {
             key: '3',
-            title: 'Boleh',
+            title: 'Suhu Badan',
-            icon: require('../assets/illustration/cheeky.png'),
+            icon: require('../assets/illustration/menu/thermometer.png'),
-            screen: 'Contoh',
+            screen: 'Suhu',
+        },
+        {
+            key: '4',
+            title: 'Riwayat Puasa',
+            icon: require('../assets/illustration/menu/medicine.png'),
+            screen: 'Puasa',
+        },
+        {
+            key: '5',
+            title: 'Tensi',
+            icon: require('../assets/illustration/menu/sphygmomanometer.png'),
+            screen: 'Tensi',
+        },
+        {
+            key: '6',
+            title: 'Gula Darah',
+            icon: require('../assets/illustration/menu/sugar-blood-level.png'),
+            screen: 'Gula',
         }
     ];
 

screens/ScreenMassa.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenMassa = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Massa</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenMassa;

screens/ScreenProfile.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenProfile = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Profile</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenProfile;

screens/ScreenPuasa.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenPuasa = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Puasa</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenPuasa;

screens/ScreenSuhu.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenSuhu = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Suhu</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenSuhu;

screens/ScreenTensi.js

@@ -0,0 +1,22 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+const ScreenTensi = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text>Ini halaman Tensi</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ScreenTensi;