From 4a69401f0c7391ff423b9d295a3288786dac9d6d Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Mon, 8 Jun 2026 17:30:59 +0100
Subject: [PATCH] chore: add examples with 5 and 6 tabs

---
 apps/example/src/App.tsx               |   4 +
 apps/example/src/Examples/FiveTabs.tsx | 187 +++++++++++++++++++++++++
 apps/example/src/Examples/SixTabs.tsx  |  87 ++++++++++++
 3 files changed, 278 insertions(+)
 create mode 100644 apps/example/src/Examples/FiveTabs.tsx
 create mode 100644 apps/example/src/Examples/SixTabs.tsx

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
index 26b5e752..a4bfc631 100644
--- a/apps/example/src/App.tsx
+++ b/apps/example/src/App.tsx
@@ -23,6 +23,8 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import JSBottomTabs from './Examples/JSBottomTabs';
 import ThreeTabs from './Examples/ThreeTabs';
 import FourTabs from './Examples/FourTabs';
+import FiveTabs from './Examples/FiveTabs';
+import SixTabs from './Examples/SixTabs';
 import FourTabsRTL from './Examples/FourTabsRTL';
 import MaterialBottomTabs from './Examples/MaterialBottomTabs';
 import SFSymbols from './Examples/SFSymbols';
@@ -84,6 +86,8 @@ const examples = [
     name: 'Three Tabs',
   },
   { component: FourTabs, name: 'Four Tabs' },
+  { component: FiveTabs, name: 'Five Tabs' },
+  { component: SixTabs, name: 'Six Tabs' },
   {
     component: SFSymbols,
     name: 'SF Symbols',
diff --git a/apps/example/src/Examples/FiveTabs.tsx b/apps/example/src/Examples/FiveTabs.tsx
new file mode 100644
index 00000000..9bb8b725
--- /dev/null
+++ b/apps/example/src/Examples/FiveTabs.tsx
@@ -0,0 +1,187 @@
+import TabView from 'react-native-bottom-tabs';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  type NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import * as React from 'react';
+import { Button, StyleSheet, Text, View, type ColorValue } from 'react-native';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+
+interface Props {
+  disablePageAnimations?: boolean;
+  scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  backgroundColor?: ColorValue;
+  translucent?: boolean;
+  rippleColor?: ColorValue;
+  activeIndicatorColor?: ColorValue;
+}
+
+type ReproStackParamList = {
+  ReproHome: undefined;
+  HiddenTabBar: undefined;
+};
+
+const ReproStack = createNativeStackNavigator<ReproStackParamList>();
+
+function ReproHomeScreen() {
+  const navigation =
+    useNavigation<
+      NativeStackNavigationProp<ReproStackParamList, 'ReproHome'>
+    >();
+
+  return (
+    <View style={styles.centered}>
+      <Text style={styles.title}>Five tabs repro</Text>
+      <Text style={styles.instructions}>
+        Select the Fifth tab once, return here, open the hidden tab bar screen,
+        then go back.
+      </Text>
+      <Button
+        title="Open hidden tab bar screen"
+        onPress={() => navigation.navigate('HiddenTabBar')}
+      />
+    </View>
+  );
+}
+
+function HiddenTabBarScreen({
+  setTabBarHidden,
+}: {
+  setTabBarHidden: (hidden: boolean) => void;
+}) {
+  const navigation =
+    useNavigation<
+      NativeStackNavigationProp<ReproStackParamList, 'HiddenTabBar'>
+    >();
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setTabBarHidden(true);
+
+      return () => {
+        setTabBarHidden(false);
+      };
+    }, [setTabBarHidden])
+  );
+
+  return (
+    <View style={styles.centered}>
+      <Text style={styles.title}>Tab bar hidden</Text>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+function ReproStackScreen({
+  setTabBarHidden,
+}: {
+  setTabBarHidden: (hidden: boolean) => void;
+}) {
+  return (
+    <ReproStack.Navigator>
+      <ReproStack.Screen name="ReproHome" component={ReproHomeScreen} />
+      <ReproStack.Screen name="HiddenTabBar">
+        {() => <HiddenTabBarScreen setTabBarHidden={setTabBarHidden} />}
+      </ReproStack.Screen>
+    </ReproStack.Navigator>
+  );
+}
+
+export default function FiveTabs({
+  disablePageAnimations = false,
+  scrollEdgeAppearance = 'default',
+  backgroundColor,
+  translucent = true,
+  rippleColor,
+  activeIndicatorColor,
+}: Props) {
+  const [index, setIndex] = React.useState(0);
+  const [tabBarHidden, setTabBarHidden] = React.useState(false);
+  const [routes] = React.useState([
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'Albums',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      badge: '5',
+    },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+      badge: ' ',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'Chat',
+    },
+    {
+      key: 'fifth',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Fifth',
+    },
+  ]);
+
+  return (
+    <TabView
+      sidebarAdaptable
+      disablePageAnimations={disablePageAnimations}
+      scrollEdgeAppearance={scrollEdgeAppearance}
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={({ route }) => {
+        switch (route.key) {
+          case 'article':
+            return <ReproStackScreen setTabBarHidden={setTabBarHidden} />;
+          case 'albums':
+            return <Albums />;
+          case 'contacts':
+            return <Contacts />;
+          case 'chat':
+            return <Chat />;
+          case 'fifth':
+            return <Article />;
+          default:
+            return null;
+        }
+      }}
+      tabBarHidden={tabBarHidden}
+      tabBarStyle={{ backgroundColor }}
+      translucent={translucent}
+      rippleColor={rippleColor}
+      activeIndicatorColor={activeIndicatorColor}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    padding: 24,
+    backgroundColor: '#fff',
+  },
+  title: {
+    color: '#000',
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  instructions: {
+    color: '#000',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+});
diff --git a/apps/example/src/Examples/SixTabs.tsx b/apps/example/src/Examples/SixTabs.tsx
new file mode 100644
index 00000000..5b2394b8
--- /dev/null
+++ b/apps/example/src/Examples/SixTabs.tsx
@@ -0,0 +1,87 @@
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import type { ColorValue } from 'react-native';
+
+interface Props {
+  disablePageAnimations?: boolean;
+  scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  backgroundColor?: ColorValue;
+  translucent?: boolean;
+  rippleColor?: ColorValue;
+  activeIndicatorColor?: ColorValue;
+}
+
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+  fifth: Article,
+  sixth: Albums,
+});
+
+export default function SixTabs({
+  disablePageAnimations = false,
+  scrollEdgeAppearance = 'default',
+  backgroundColor,
+  translucent = true,
+  rippleColor,
+  activeIndicatorColor,
+}: Props) {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'Albums',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      badge: '5',
+    },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'Contacts',
+      badge: ' ',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'Chat',
+    },
+    {
+      key: 'fifth',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      title: 'Fifth',
+    },
+    {
+      key: 'sixth',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      title: 'Sixth',
+    },
+  ]);
+
+  return (
+    <TabView
+      sidebarAdaptable
+      disablePageAnimations={disablePageAnimations}
+      scrollEdgeAppearance={scrollEdgeAppearance}
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+      tabBarStyle={{ backgroundColor }}
+      translucent={translucent}
+      rippleColor={rippleColor}
+      activeIndicatorColor={activeIndicatorColor}
+    />
+  );
+}