From 8003310d65acc4dc108d8631b7780da0cc1507c0 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 20 Mar 2025 14:03:54 +0800
Subject: [PATCH] feat(mobile): enhance Tabbar component with placeholder
 support

- Added a placeholder mechanism in the Tabbar component to handle cases where no tab screens are available, improving user experience by preventing empty tab displays.
- Utilized `useMemo` to create a default placeholder tab screen, ensuring efficient rendering.
- Updated the rendering logic to conditionally display either the actual tab screens or the placeholder.

These changes optimize the Tabbar functionality and enhance the overall navigation experience within the mobile application.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/components/layouts/tabbar/Tabbar.tsx    | 17 +++++++++++++----
 apps/mobile/src/components/ui/grid/index.tsx    |  3 +++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx b/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx
index b58772c55..9960dc1f9 100644
--- a/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx
+++ b/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from "jotai"
 import type { FC } from "react"
-import { memo, useContext, useEffect } from "react"
+import { memo, useContext, useEffect, useMemo } from "react"
 import type { StyleProp, TextStyle } from "react-native"
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native"
 import Animated, {
@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { SetBottomTabBarHeightContext } from "@/src/components/layouts/tabbar/contexts/BottomTabBarHeightContext"
 import { gentleSpringPreset, quickSpringPreset, softSpringPreset } from "@/src/constants/spring"
 import { BottomTabContext } from "@/src/lib/navigation/bottom-tab/BottomTabContext"
+import type { TabScreenProps } from "@/src/lib/navigation/bottom-tab/TabScreen"
 import type { TabbarIconProps } from "@/src/lib/navigation/bottom-tab/types"
 import { PlayerTabBar } from "@/src/modules/player/PlayerTabBar"
 import { accentColor } from "@/src/theme/colors"
@@ -43,9 +44,16 @@ export const Tabbar: FC<{
       !tabBarVisible ? quickSpringPreset : softSpringPreset,
     )
   }, [tabBarVisible, translateY])
-  if (tabScreens.length === 0) return null
+
+  const placeholderTabScreens = useMemo<TabScreenProps[]>(() => {
+    return [{ tabScreenIndex: 0, title: "", renderIcon: () => <View className="size-5" /> }]
+  }, [])
+
+  const renderTabScreens = tabScreens.length > 0 ? tabScreens : placeholderTabScreens
+
   return (
     <Animated.View
+      pointerEvents={tabScreens.length > 0 ? "auto" : "none"}
       accessibilityRole="tablist"
       className="absolute inset-x-0 bottom-0 z-10"
       style={{
@@ -57,9 +65,10 @@ export const Tabbar: FC<{
       }}
     >
       <TabBarBackground />
+
       <PlayerTabBar />
-      <Grid columns={tabScreens.length} gap={10} className="mt-[7]">
-        {tabScreens.map((route, index) => {
+      <Grid columns={renderTabScreens.length} gap={10} className="mt-[7]">
+        {renderTabScreens.map((route, index) => {
           const focused = index === selectedIndex
 
           const inactiveTintColor = "#999"
diff --git a/apps/mobile/src/components/ui/grid/index.tsx b/apps/mobile/src/components/ui/grid/index.tsx
index e8fb87b3f..2d61e1931 100644
--- a/apps/mobile/src/components/ui/grid/index.tsx
+++ b/apps/mobile/src/components/ui/grid/index.tsx
@@ -20,6 +20,9 @@ export const Grid = ({
   style,
   className,
 }: GridProps & PropsWithChildren) => {
+  if (columns < 1) {
+    throw new Error("Columns must be greater than 0")
+  }
   const rowsChildren = useMemo(() => {
     const childrenArray = React.Children.toArray(children)
     const rows = []