etf-oglasi/frontend/index.tsx

import "./globals.css";

import React, { useState } 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 { enableScreens } from "react-native-screens";
import { SafeAreaProvider } from "react-native-safe-area-context";
import messaging from "@react-native-firebase/messaging";
import notifee, { AndroidImportance } from "@notifee/react-native";

import SubscribedFeed from "@/screens/SubscribedFeed";
import AllFeed from "@/screens/AllFeed";
import Profile from "@/screens/Profile";
import AuthGate from "@/screens/AuthGate";
import { AuthProvider, useAuth } from "@/context/AuthContext";
import { useUpdatecheck } from "./hooks/useUpdatecheck";
import { UpdatePrompt } from "./components/UpdatePrompt";
import { usePushNotifications } from "./hooks/usePushNotifications";

// Handles data-only FCM messages when the app is in the background or closed.
messaging().setBackgroundMessageHandler(async remoteMessage => {
    const title = remoteMessage.data?.title as string | undefined;
    const body  = remoteMessage.data?.body  as string | undefined;

    if (!title && !body) return;

    const channelId = await notifee.createChannel({
        id:         "default",
        name:       "General",
        importance: AndroidImportance.HIGH,
    });

    await notifee.displayNotification({
        title,
        body,
        android: {
            channelId,
            pressAction: { id: "default" },
        },
    });
});

// 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",
};

function ProfileTab() {
    const { user, loading } = useAuth();
    if (loading) return null;
    return user ? <Profile /> : <AuthGate />;
}


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" } };

    const { updateInfo } = useUpdatecheck();
    const [updateDismissed, setUpdateDismissed] = useState(false);

    usePushNotifications();

    return (
        <AuthProvider>
            <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={ProfileTab}
                            options={{ title: "Profile" }}
                        />
                    </Tab.Navigator>
                </NavigationContainer>

                {/* Overlays the entire app including the tab bar */}
                {updateInfo && !updateDismissed && (
                    <UpdatePrompt
                        updateInfo={updateInfo}
                        onDismiss={() => setUpdateDismissed(true)}
                    />
                )}

            </SafeAreaProvider>
        </AuthProvider>
    );
}