feat: use react-native-bottom-tabs

.vscode/settings.json

@@ -1,8 +1,24 @@
 {
+  // You shouldn't use formatter with this ESLint config
   "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  }
+  },
+
+  // If you do not want to auto fix some rules on save
+  // You can put this in your user settings or workspace settings
+  "eslint.codeActionsOnSave.rules": [
+    "!prefer-const",
+    "!unused-imports/no-unused-imports",
+    "!@stylistic/jsx-self-closing-comp",
+    "!tailwindcss/classnames-order",
+    "*"
+  ],
+
+  // You can also silent all auto fixable rules
+  "eslint.rules.customizations": [
+    { "rule": "*", "fixable": true, "severity": "off" }
+  ]
 }

app.config.ts

@@ -45,6 +45,15 @@ export default function app({ config }: ConfigContext): ExpoConfig {
         },
       ],
       'react-native-background-fetch',
+      'react-native-bottom-tabs',
+      [
+        'expo-build-properties',
+        {
+          ios: {
+            useFrameworks: 'static',
+          },
+        },
+      ],
     ],
     experiments: {
       typedRoutes: true,

app/(app)/(tabs)/_layout.tsx

@@ -1,17 +1,16 @@
 import * as Notifications from 'expo-notifications'
-import { Tabs } from 'expo-router'
 import { useAtomValue } from 'jotai'
 import { useEffect } from 'react'
 import { useStyles } from 'react-native-unistyles'
 
 import { syncFeedsEffect } from '~/api/feed'
+import { Tabs } from '~/components/bottom-tabs'
 import { tabViewList } from '~/consts/view'
 import { useUnreadCount, useUnreadCountList } from '~/hooks/use-badge-count'
-import type { ThemeColorKey } from '~/theme'
 import { isTablet } from '~/theme/breakpoints'
 
 export default function TabLayout() {
-  const { theme, breakpoint } = useStyles()
+  const { breakpoint } = useStyles()
   useAtomValue(syncFeedsEffect)
   const countList = useUnreadCountList()
 
@@ -23,31 +22,17 @@ export default function TabLayout() {
   }, [unreadCount])
 
   return (
-    <Tabs>
+    <Tabs
+      labeled={isTablet(breakpoint)}
+    >
       {tabViewList.map(view => (
         <Tabs.Screen
           key={view.name}
           name={view.name}
           options={{
-            href: {
-              pathname: view.path as any,
-              params: {
-                view: view.view,
-                title: view.title,
-              },
-            },
             title: view.title,
-            tabBarIcon: ({ color }) => view.icon(color),
-            tabBarActiveTintColor: theme.colors[`${view.color}9` as ThemeColorKey],
-            tabBarShowLabel: isTablet(breakpoint),
-            headerShown: false,
-            tabBarBadge: countList[view.view] > 0 ? isTablet(breakpoint) ? countList[view.view] : '' : undefined,
-            tabBarBadgeStyle: {
-              transform: [
-                { scale: isTablet(breakpoint) ? 0.8 : 0.4 },
-                { translateX: isTablet(breakpoint) ? -40 : 0 },
-              ],
-            },
+            tabBarIcon: view.iconRequire,
+            tabBarBadge: `${countList[view.view] > 0 ? countList[view.view] : ''}`,
           }}
         />
       ))}

components/bottom-tabs.tsx

@@ -0,0 +1,6 @@
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
+import { withLayoutContext } from 'expo-router'
+
+export const Tabs = withLayoutContext(
+  createNativeBottomTabNavigator().Navigator,
+)

consts/view.tsx

@@ -16,6 +16,7 @@ export type TabView = {
   path: Route
   title: string
   icon: (color: string) => React.ReactNode
+  iconRequire: () => any
   color: string
 }
 
@@ -26,6 +27,7 @@ export const tabViewList: TabView[] = [
     path: '/',
     title: 'Articles',
     icon: (color: string) => <IconPaperCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/paper_cute_fi.svg'),
     color: 'orange',
   },
   {
@@ -34,6 +36,7 @@ export const tabViewList: TabView[] = [
     path: '/social',
     title: 'Social Media',
     icon: (color: string) => <IconTwitterCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/twitter_cute_fi.svg'),
     color: 'sky',
   },
   {
@@ -42,6 +45,7 @@ export const tabViewList: TabView[] = [
     path: '/picture',
     title: 'Pictures',
     icon: (color: string) => <IconPicCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/pic_cute_fi.svg'),
     color: 'green',
   },
   {
@@ -50,6 +54,7 @@ export const tabViewList: TabView[] = [
     path: '/video',
     title: 'Videos',
     icon: (color: string) => <IconVideoCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/video_cute_fi.svg'),
     color: 'red',
   },
   {
@@ -58,6 +63,7 @@ export const tabViewList: TabView[] = [
     path: '/audio',
     title: 'Audios',
     icon: (color: string) => <IconMicCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/mic_cute_fi.svg'),
     color: 'purple',
   },
   {
@@ -66,6 +72,7 @@ export const tabViewList: TabView[] = [
     path: '/notification',
     title: 'Notifications',
     icon: (color: string) => <IconAnnouncementCuteFi color={color} />,
+    iconRequire: () => require('~/icons/mgc/announcement_cute_fi.svg'),
     color: 'yellow',
   },
 ]

package.json

@@ -21,6 +21,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@bottom-tabs/react-navigation": "^0.7.3",
     "@gorhom/bottom-sheet": "5.0.6",
     "@gorhom/portal": "^1.0.14",
     "@mozilla/readability": "^0.5.0",
@@ -35,6 +36,7 @@
     "expo": "~52.0.17",
     "expo-av": "15.0.1",
     "expo-background-fetch": "13.0.3",
+    "expo-build-properties": "^0.13.1",
     "expo-clipboard": "7.0.0",
     "expo-constants": "17.0.3",
     "expo-dev-client": "5.0.5",
@@ -61,6 +63,7 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.3",
     "react-native-background-fetch": "^4.2.7",
+    "react-native-bottom-tabs": "^0.7.3",
     "react-native-context-menu-view": "^1.16.0",
     "react-native-gesture-handler": "^2.21.2",
     "react-native-inappbrowser-reborn": "^3.7.0",