150 lines
4.2 KiB
TypeScript
150 lines
4.2 KiB
TypeScript
import React from "react";
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { View, Text, StyleSheet, Platform } from "react-native";
|
|
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
|
import GroupScreen from "../screens/GroupScreen";
|
|
import Profile from "../screens/profile/Profile";
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
const TAB_CONFIG = {
|
|
activeColor: "#000",
|
|
inactiveColor: "#8e8e93",
|
|
backgroundColor: "#fff",
|
|
height: 70,
|
|
iconSize: 26,
|
|
};
|
|
|
|
// 1. Define a color map for active tabs
|
|
const activeTabColors: { [key: string]: string } = {
|
|
Home: "#ff7675", // A soft red
|
|
Profile: "#74b9ff", // A nice blue
|
|
Group: "#55efc4", // Your theme's green
|
|
Settings: "#ffeaa7", // A gentle yellow
|
|
};
|
|
|
|
// 2. Define a text color map for contrasting icon colors
|
|
const activeIconColors: { [key: string]: string } = {
|
|
Home: "#333",
|
|
Profile: "#333",
|
|
Group: "#333",
|
|
Settings: "#e17055",
|
|
}
|
|
|
|
|
|
function HomeScreen() {
|
|
return (
|
|
<View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
|
|
);
|
|
}
|
|
|
|
function SettingsScreen() {
|
|
return (
|
|
<View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
|
|
);
|
|
}
|
|
|
|
export default function BottomTabs() {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
tabBarStyle: styles.tabBar,
|
|
|
|
tabBarLabel: ({ focused, color }) =>
|
|
!focused ? (
|
|
<Text style={[styles.label, { color }]}>{route.name}</Text>
|
|
) : null,
|
|
|
|
tabBarIcon: ({ focused }) => {
|
|
let iconName: string = "home-outline";
|
|
|
|
// Determine icon based on route
|
|
if (route.name === "Home") iconName = focused ? "home" : "home-outline";
|
|
else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
|
|
else if (route.name === "Settings") iconName = focused ? "settings" : "settings-outline";
|
|
else if (route.name === "Group") iconName = focused ? "people" : "people-outline";
|
|
|
|
// 3. Get the active background color and icon color from the maps
|
|
const activeBackgroundColor = activeTabColors[route.name];
|
|
const activeIconColor = activeIconColors[route.name];
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.iconContainer,
|
|
// 4. Apply the dynamic background color when focused
|
|
focused && [
|
|
styles.activeIconContainer,
|
|
{ backgroundColor: activeBackgroundColor },
|
|
],
|
|
]}
|
|
>
|
|
<Ionicons
|
|
name={iconName}
|
|
size={TAB_CONFIG.iconSize}
|
|
color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen name="Home" component={HomeScreen} />
|
|
<Tab.Screen name="Profile" component={Profile} />
|
|
<Tab.Screen name="Group" component={GroupScreen} />
|
|
<Tab.Screen name="Settings" component={SettingsScreen} />
|
|
</Tab.Navigator>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#f5f7fa",
|
|
},
|
|
text: {
|
|
fontSize: 20,
|
|
fontWeight: "600",
|
|
color: "#111",
|
|
},
|
|
tabBar: {
|
|
position: "absolute",
|
|
bottom: 20,
|
|
left: 20,
|
|
right: 20,
|
|
height: TAB_CONFIG.height,
|
|
backgroundColor: TAB_CONFIG.backgroundColor,
|
|
borderRadius: 20,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
shadowOffset: { width: 0, height: 5 },
|
|
shadowRadius: 8,
|
|
elevation: 10,
|
|
paddingBottom: Platform.OS === "ios" ? 25 : 10,
|
|
paddingTop: 10,
|
|
marginHorizontal: 10,
|
|
},
|
|
label: {
|
|
fontSize: 12,
|
|
marginBottom: 5,
|
|
},
|
|
iconContainer: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: 50, // Reduced size for a sleeker look
|
|
height: 50, // Reduced size
|
|
marginTop: 10,
|
|
borderRadius: 15,
|
|
},
|
|
activeIconContainer: {
|
|
// The default active style, background color is now applied dynamically
|
|
elevation: 2,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 5,
|
|
},
|
|
});
|