feat: unauthenticated tab

src/navigation/BottomTab.js

@@ -1,6 +1,7 @@
 import { Motion } from "@legendapp/motion";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import React from "reactn";
+import { useGlobal } from "reactn";
 import { Palette } from "../styles";
 import { Routes } from "./Routes";
 import { tabs } from "../assets";
@@ -15,6 +16,9 @@ import HomeStack from "./HomeStack";
 const BottomTab = createBottomTabNavigator();
 
 export const BottomTabScreen = () => {
+  const [currentUID] = useGlobal("currentUID");
+  const isAuthenticated = !!currentUID;
+
   const renderIcon = (icon, focused) => (
     <Motion.Image
       resizeMode={"contain"}
@@ -72,6 +76,7 @@ export const BottomTabScreen = () => {
           headerShown: false,
           tabBarShowLabel: true,
           tabBarIcon: ({ focused }) => renderIcon(tabs.albums, focused),
+          hide: !isAuthenticated,
         }}
       />
       <BottomTab.Screen
@@ -83,6 +88,7 @@ export const BottomTabScreen = () => {
           headerShown: false,
           tabBarShowLabel: true,
           tabBarIcon: ({ focused }) => renderIcon(tabs.person, focused),
+          hide: !isAuthenticated,
         }}
       />
     </BottomTab.Navigator>

src/navigation/TabBar.js

@@ -19,6 +19,13 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
     : isIOS
       ? Math.max(bottomInset, fallbackBottomOffset)
       : bottomInset + fallbackBottomOffset;
+  const visibleRoutesCount = Math.max(
+    1,
+    (state?.routes || []).reduce((count, route) => {
+      const descriptor = descriptors[route.key];
+      return descriptor?.options?.hide ? count : count + 1;
+    }, 0)
+  );
 
   return (
     <View
@@ -87,7 +94,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
                   key={route.key}
                   style={{
                     alignSelf: "center",
-                    width: `${100 / state?.routes?.length}%`,
+                    width: `${100 / visibleRoutesCount}%`,
                     height: "100%",
                     ...Style.containerCenter,
                   }}