105 lines
2.9 KiB
TypeScript
105 lines
2.9 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";
|
|
import Home from "../screens/home/Home";
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
const TAB_CONFIG = {
|
|
activeColor: "#eb87a3ff", // coffee-like orange
|
|
inactiveColor: "#000000ff",
|
|
backgroundColor: "#e3e9efff",
|
|
height: 80,
|
|
iconSize: 30,
|
|
labelSize: 12,
|
|
labelWeight: "600",
|
|
};
|
|
|
|
|
|
|
|
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,
|
|
tabBarActiveTintColor: TAB_CONFIG.activeColor,
|
|
tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
|
|
tabBarLabelStyle: {
|
|
fontSize: TAB_CONFIG.labelSize,
|
|
fontWeight: TAB_CONFIG.labelWeight as any,
|
|
marginBottom: Platform.OS === "ios" ? 0 : 5,
|
|
},
|
|
tabBarIcon: ({ color, focused }) => {
|
|
let iconName:
|
|
| "home"
|
|
| "home-outline"
|
|
| "person"
|
|
| "person-outline"
|
|
| "settings"
|
|
| "settings-outline"
|
|
| "people"
|
|
| "people-outline" = "home-outline";
|
|
|
|
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";
|
|
|
|
return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen name="Home" component={Home} />
|
|
<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: "#dae4ed",
|
|
},
|
|
text: {
|
|
fontSize: 20,
|
|
fontWeight: "600",
|
|
color: "#111",
|
|
},
|
|
tabBar: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: TAB_CONFIG.height,
|
|
backgroundColor: TAB_CONFIG.backgroundColor,
|
|
borderTopLeftRadius: 30,
|
|
borderTopRightRadius: 30,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.10,
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowRadius: 8,
|
|
elevation: 20,
|
|
paddingTop: 10,
|
|
borderTopWidth: 0,
|
|
},
|
|
});
|