115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import React from "react";
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { Text, StyleSheet } from "react-native";
|
|
|
|
// Import screens
|
|
import Home from "../screens/AksesWarga/Home";
|
|
import EcoMapCoinExchangeScreen from "../screens/AksesWarga/EcoMapCoinExchangeScreen";
|
|
import NotifikasiScreen from "../screens/AksesWarga/NotifikasiScreen";
|
|
import ProfilScreen from "../screens/AksesWarga/ProfilScreen";
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
export default function bottomtab() {
|
|
return (
|
|
<Tab.Navigator
|
|
initialRouteName="Home"
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
tabBarStyle: {
|
|
backgroundColor: "#fff", // White background for the tab bar
|
|
borderTopWidth: 1,
|
|
borderTopColor: "#2C6B2F",
|
|
marginBottom: 20,
|
|
},
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
// Set color to green explicitly
|
|
const iconColor = "#2C6B2F"; // Green color for icons
|
|
let iconName;
|
|
|
|
if (route.name === "Home") {
|
|
iconName = "home";
|
|
} else if (route.name === "EcoMapCoin") {
|
|
iconName = "swap-horizontal";
|
|
} else if (route.name === "Notifikasi") {
|
|
iconName = "notifications-outline";
|
|
} else if (route.name === "Profil") {
|
|
iconName = "person-circle-outline";
|
|
}
|
|
|
|
// Return an icon component with the green color
|
|
return <Ionicons name={iconName} size={size} color={iconColor} />;
|
|
},
|
|
tabBarLabel: ({ focused, color }) => {
|
|
let label;
|
|
if (route.name === "Home") {
|
|
label = "UTAMA";
|
|
} else if (route.name === "EcoMapCoin") {
|
|
label = "TUKAR KOIN";
|
|
} else if (route.name === "Notifikasi") {
|
|
label = "NOTIFIKASI";
|
|
} else if (route.name === "Profil") {
|
|
label = "PROFIL";
|
|
}
|
|
return (
|
|
<Text style={{ color: "#2C6B2F", fontSize: 12 }}>{label}</Text>
|
|
); // Green text color
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen name="Home" component={Home} />
|
|
<Tab.Screen
|
|
name="EcoMapCoin"
|
|
component={EcoMapCoinExchangeScreen}
|
|
options={{ title: "Tukar Koin" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Notifikasi"
|
|
component={NotifikasiScreen}
|
|
options={{ title: "Notifikasi" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Profil"
|
|
component={ProfilScreen}
|
|
options={{ title: "Profil" }}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
bottomNav: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
paddingVertical: 10,
|
|
backgroundColor: "#fff",
|
|
borderTopWidth: 1,
|
|
borderTopColor: "#2C6B2F",
|
|
marginBottom: 0, // Green border
|
|
},
|
|
navItem: {
|
|
alignItems: "center",
|
|
},
|
|
navText: {
|
|
fontSize: 12,
|
|
color: "#2C6B2F", // Green text color
|
|
},
|
|
notifIconContainer: {
|
|
position: "relative",
|
|
},
|
|
badge: {
|
|
position: "absolute",
|
|
top: -5,
|
|
right: -5,
|
|
backgroundColor: "red",
|
|
borderRadius: 8,
|
|
paddingHorizontal: 5,
|
|
paddingVertical: 2,
|
|
},
|
|
badgeText: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
});
|