114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
|
|
|
|
import "./globals.css";
|
|
|
|
import React from "react";
|
|
import { useColorScheme } from "react-native";
|
|
import { NavigationContainer, DefaultTheme, DarkTheme } from "@react-navigation/native";
|
|
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
import SubscribedFeed from "@/screens/SubscribedFeed";
|
|
import AllFeed from "@/screens/AllFeed";
|
|
import Profile from "@/screens/Profile";
|
|
import {enableScreens} from "react-native-screens";
|
|
import {SafeAreaProvider} from "react-native-safe-area-context";
|
|
|
|
|
|
// Must be called before any navigator renders
|
|
enableScreens();
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
const LIGHT_TAB = {
|
|
bg: "#FFFFFF",
|
|
border: "#E8E2D5",
|
|
active: "#C4622D",
|
|
inactive: "#8A8278",
|
|
label: "#1A1714",
|
|
};
|
|
const DARK_TAB = {
|
|
bg: "#161513",
|
|
border: "#2C2A27",
|
|
active: "#E07B45",
|
|
inactive: "#706D67",
|
|
label: "#F0EDE8",
|
|
};
|
|
|
|
|
|
|
|
export default function App() {
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
const tab = dark ? DARK_TAB : LIGHT_TAB;
|
|
|
|
const navTheme = dark
|
|
? { ...DarkTheme, colors: { ...DarkTheme.colors, background: "#0E0D0C" } }
|
|
: { ...DefaultTheme, colors: { ...DefaultTheme.colors, background: "#FDFAF5" } };
|
|
|
|
return (
|
|
<SafeAreaProvider>
|
|
<NavigationContainer theme={navTheme}>
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
headerShown: false,
|
|
|
|
tabBarStyle: {
|
|
backgroundColor: tab.bg,
|
|
borderTopColor: tab.border,
|
|
borderTopWidth: 1,
|
|
height: 60,
|
|
paddingBottom: 8,
|
|
paddingTop: 6,
|
|
},
|
|
|
|
tabBarActiveTintColor: tab.active,
|
|
tabBarInactiveTintColor: tab.inactive,
|
|
|
|
tabBarLabelStyle: {
|
|
fontSize: 10,
|
|
fontWeight: "600",
|
|
letterSpacing: 0.3,
|
|
},
|
|
|
|
tabBarIcon: ({ focused, color, size }) => {
|
|
const icons: Record<
|
|
string,
|
|
{ active: keyof typeof Ionicons.glyphMap; inactive: keyof typeof Ionicons.glyphMap }
|
|
> = {
|
|
"Subscribed": { active: "bookmark", inactive: "bookmark-outline" },
|
|
"Discover": { active: "compass", inactive: "compass-outline" },
|
|
"Profile": { active: "person-circle", inactive: "person-circle-outline" },
|
|
};
|
|
const set = icons[route.name];
|
|
|
|
return (
|
|
<Ionicons
|
|
name={focused ? set.active : set.inactive}
|
|
size={focused ? size + 1 : size}
|
|
color={color}
|
|
/>
|
|
);
|
|
},
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="Subscribed"
|
|
component={SubscribedFeed}
|
|
options={{ title: "My Feed" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Discover"
|
|
component={AllFeed}
|
|
options={{ title: "Discover" }}
|
|
/>
|
|
<Tab.Screen
|
|
name="Profile"
|
|
component={Profile}
|
|
options={{ title: "Profile" }}
|
|
/>
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
</SafeAreaProvider>
|
|
);
|
|
} |