102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
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}>
|
|
<Image
|
|
source={require('../assets/illustration/66139.jpg')}
|
|
style={styles.headerImage}
|
|
/>
|
|
</View>
|
|
|
|
<Text style={styles.title}>Check Care Apps</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"
|
|
},
|
|
headerImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
resizeMode: 'cover',
|
|
position: 'absolute',
|
|
},
|
|
title: {
|
|
fontSize: 36,
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
},
|
|
main: {
|
|
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; |