App.tsx

import SignUp from "./components/signup/SignUp";
import Home from "./components/Home";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Login from "./components/login/Login";
import { useState } from "react";
import "./global.css"
import { AxiosResponse } from 'axios';

import { Ionicons } from '@expo/vector-icons'; 
import { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';


type TabBarIconProps = {
  focused: boolean;
  color: string;
  size: number;
};

type Route = {
  name: string
}

const Tab = createBottomTabNavigator();


export default function App() {
  const [signedIn, setSignedIn] = useState(false);

  const [token, setToken] = useState("");

  function getToken(tokenResponse: AxiosResponse) {
    setToken(tokenResponse.data.access);
    setSignedIn(true);
  }

  function signOut() {
    setSignedIn(false);
    //TODO: Invalidate token when possible on the backend.
  }

  function displayIcons() {
    return ({ route }: { route: Route }): BottomTabNavigationOptions => ({

      tabBarIcon: ({ focused, color, size }: TabBarIconProps) => {
        const iconMap: Record<string, string> = {
          "Heim": focused ? "home" : "home-outline",
          "Skrá út": focused ? "log-out" : "log-out-outline",
          "Skrá inn": focused ? "log-in" : "log-in-outline",
          "Nýskrá": focused ? "person-add" : "person-add-outline",
        };
        
        //casting to Ionicons.glypMap as that seems to be the right type for valid icon names. 
        const iconName = iconMap[route.name] as keyof typeof Ionicons.glyphMap;
  
        return <Ionicons name={iconName} size={size} color={color} />;
      },
    })
  }

  return (
    <NavigationContainer>
      {!signedIn ? (
        <Tab.Navigator screenOptions={displayIcons()}>
          <Tab.Screen
            name="Heim"
            children={() => <Home signedIn={signedIn} />}
          />
          <Tab.Screen
            name="Skrá inn"
            children={() => <Login getToken={getToken} />}
          />
          <Tab.Screen
            name="Nýskrá"
            children={() => <SignUp getToken={getToken} />}
          />
        </Tab.Navigator>
      ) : (
        <Tab.Navigator screenOptions={displayIcons()}>
          <Tab.Screen
            name="Heim"
            children={() => <Home signedIn={signedIn} token={token} />}
          />
          <Tab.Screen
            name="Skrá út"
            children={() => <Home signedIn={signedIn} token={token} />}
            listeners={({ navigation }) => ({
              tabPress: (e) => {
                e.preventDefault();
                signOut();
                navigation.navigate("Heim");
              },
            })}
          />
        </Tab.Navigator>
      )}
    </NavigationContainer>
  );
}