matiru

 1import {
 2  ImageBackground,
 3  ScrollView,
 4  Text,
 5  TouchableOpacity,
 6  StatusBar,
 7  View,
 8} from "react-native";
 9import { SafeAreaView } from "react-native-safe-area-context";
10import { MaterialCommunityIcons } from "@expo/vector-icons";
11import styles, { colors } from "../styles";
12
13export default function HomeScreen({ navigation }) {
14  return (
15    <ImageBackground
16      source={require("../assets/background.png")}
17      style={styles.bg}
18    >
19      <StatusBar
20        translucent={false}
21        backgroundColor={colors.darkGreen}
22        barStyle="light-content"
23      />
24
25      <SafeAreaView style={{ flex: 1 }}>
26        <ScrollView contentContainerStyle={styles.overlay}>
27          <View style={styles.topContent}>
28            <Text style={styles.welcome}>Welcome!</Text>
29
30            <TouchableOpacity
31              style={[
32                styles.bigButton,
33                { backgroundColor: colors.gray, marginBottom: 30 },
34              ]}
35              onPress={() => navigation.navigate("Search")}
36            >
37              <MaterialCommunityIcons name="magnify" size={24} color="white" />
38              <Text style={styles.bigButtonText}>Global Search</Text>
39            </TouchableOpacity>
40
41            <Text style={styles.subtitle}> Continue As </Text>
42
43            <TouchableOpacity
44              style={styles.bigButton}
45              onPress={() => navigation.navigate("Login", { role: "Farmer" })}
46            >
47              <MaterialCommunityIcons name="tractor" size={24} color="white" />
48              <Text style={styles.bigButtonText}>Farmer</Text>
49            </TouchableOpacity>
50
51            <TouchableOpacity
52              style={styles.bigButton}
53              onPress={() =>
54                navigation.navigate("Login", { role: "Distributor" })
55              }
56            >
57              <MaterialCommunityIcons name="truck" size={24} color="white" />
58              <Text style={styles.bigButtonText}>Distributor</Text>
59            </TouchableOpacity>
60
61            <TouchableOpacity
62              style={styles.bigButton}
63              onPress={() => navigation.navigate("Login", { role: "Retailer" })}
64            >
65              <MaterialCommunityIcons name="store" size={24} color="white" />
66              <Text style={styles.bigButtonText}>Retailer</Text>
67            </TouchableOpacity>
68
69            <TouchableOpacity
70              style={styles.bigButton}
71              onPress={() =>
72                navigation.navigate("Login", { role: "Inspector" })
73              }
74            >
75              <MaterialCommunityIcons
76                name="shield-search"
77                size={24}
78                color="white"
79              />
80              <Text style={styles.bigButtonText}>Inspector</Text>
81            </TouchableOpacity>
82          </View>
83
84          <View style={styles.bottomContent}>
85            <Text style={styles.brand}>Matiru.</Text>
86          </View>
87        </ScrollView>
88      </SafeAreaView>
89    </ImageBackground>
90  );
91}