Pertemuan ke 9: 2025-06-05

screens/ScreenHome.js

@@ -1,28 +1,102 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Image, TouchableOpacity, FlatList } from 'react-native';
 import Container from '../components/Container';
 
 const ScreenHome = ({ navigation }) => {
+
+    const menuItems = [
+        {
+            key: '1',
+            title: 'Apa aja',
+            icon: require('../assets/illustration/cheeky.png'),
+            screen: 'Contoh',
+        },
+        {
+            key: '2',
+            title: 'Boleh',
+            icon: require('../assets/illustration/cheeky.png'),
+            screen: 'Contoh',
+        },
+        {
+            key: '3',
+            title: 'Boleh',
+            icon: require('../assets/illustration/cheeky.png'),
+            screen: 'Contoh',
+        }
+    ];
+
+    const renderItem = ({ item }) => (
+        <TouchableOpacity
+            style={styles.menuItem}
+            onPress={() => navigation.navigate(item.screen)}
+        >
+            <Image source={item.icon} style={styles.menuIcon} />
+            <Text style={styles.menuTitle}>{item.title}</Text>
+        </TouchableOpacity>
+    );
+
+
     return (
         <Container>
+
             <View style={styles.header}>
-                <Text>Ini Header</Text>
-            </View>
-            <View style={styles.main}>
-                <Text>Ini Main Content</Text>
+                <Image
+                    source={require('../assets/illustration/66139.jpg')}
+                    style={styles.headerImage}
+                />
             </View>
+
+            <Text style={styles.title}>Check Care</Text>
+
+            <FlatList
+                data={menuItems}
+                numColumns={3}
+                renderItem={renderItem}
+                keyExtractor={(item) => item.key}
+                contentContainerStyle={styles.menuGrid}
+            />
+
         </Container>
     );
 }
 
 const styles = StyleSheet.create({
     header: {
-        flex:1, 
-        backgroundColor:"#FFDDDD"
+        flex: 1,
+        backgroundColor: "#FFDDDD"
+    },
+    headerImage: {
+        width: '100%',
+        height: '100%',
+        resizeMode: 'cover',
+        position: 'absolute',
+    },
+    title: {
+        fontSize: 36,
+        textAlign: 'center',
+        fontWeight: 'bold',
     },
     main: {
-        flex:3, 
-        backgroundColor:"#DDFFDD"
-    }
+        flex: 3,
+        backgroundColor: "#DDFFDD"
+    },
+    menuGrid: {
+        marginTop: 20,
+        justifyContent: 'center',
+    },
+    menuItem: {
+        flex: 1,
+        margin: 10,
+        alignItems: 'center',
+    },
+    menuIcon: {
+        width: 50,
+        height: 50,
+        marginBottom: 8,
+    },
+    menuTitle: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
 });
 
 export default ScreenHome;