@zezosoft/zezo-ott-react-native-ui-kit 1.0.8 → 1.0.9

package/src/components/TabBar/Two.tsx

@@ -1,15 +1,17 @@
 /**
- * @author Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 AM
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 12:30 PM
  */
-import React, { useState } from 'react';
-import { View, Pressable, StyleSheet, Platform } from 'react-native';
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, Pressable, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import type { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import type { ITheme, ThemeOverride } from '../../theme/themes';
 import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export type ITab = {
   key: string;
@@ -24,115 +26,150 @@ export type ITab = {
 
 export type TabBarTwoProps = {
   tabs: ITab[];
-  theme?: ThemeOverride;
   onTabPress?: (key: string) => void;
+  theme?: ThemeOverride;
+  renderIcon?: ({
+    icon,
+    color,
+    size,
+  }: {
+    icon: React.ComponentType<{ width: number; height: number; color: string }>;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
 };
 
 const Tab = createBottomTabNavigator();
 
-// Extracted TabBarButton component
-const TabBarButton = ({
-  tab,
-  isActive,
-  appliedTheme,
-  isDarkMode,
-  onPress,
-  onTabPress,
-  setActiveTab,
-}: {
-  tab: ITab;
-  isActive: boolean;
-  isDarkMode: boolean;
-  appliedTheme: ITheme;
-  onPress?: (e: any) => void;
-  onTabPress?: (key: string) => void;
-  setActiveTab: (key: string) => void;
-}) => {
-  const Icon = tab.icon;
-  const color = isActive
-    ? appliedTheme.colors.button
-    : appliedTheme.colors.textPrimary;
+const ICON_SIZE = scale(24);
+const RIPPLE_RADIUS = scale(35);
+const TAB_BAR_HEIGHT = scale(60);
+const TAB_BAR_BORDER_RADIUS = scale(40);
+const TAB_BAR_MARGIN = scale(16);
+const TAB_BAR_BORDER_WIDTH = scale(2);
+const TAB_BAR_BOTTOM_OFFSET = Platform.OS === 'android' ? scale(5) : -scale(8);
 
-  return (
-    <View style={styles.tabItem}>
+const CustomTabButton = React.memo(
+  ({
+    props,
+    rippleColor,
+  }: {
+    props: BottomTabBarButtonProps;
+    rippleColor?: string;
+  }) => {
+    const {
+      onPress,
+      onLongPress,
+      accessibilityRole,
+      accessibilityState,
+      testID,
+      style,
+      children,
+    } = props;
+
+    return (
       <Pressable
-        onPress={(e) => {
-          onPress?.(e);
-          setActiveTab(tab.key);
-          onTabPress?.(tab.key);
-        }}
         android_ripple={{
-          color: isDarkMode
-            ? 'rgba(255, 255, 255, 0.12)'
-            : 'rgba(0, 0, 0, 0.08)',
+          color: rippleColor,
           borderless: true,
-          radius: scale(42),
+          radius: RIPPLE_RADIUS,
         }}
-        style={styles.pressable}
-        accessibilityRole="button"
-        accessibilityLabel={`Tab: ${tab.name}`}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        accessibilityRole={accessibilityRole}
+        accessibilityState={accessibilityState}
+        testID={testID}
+        style={[style, styles.tabButton]}
       >
-        <Icon width={scale(24)} height={scale(24)} color={color} />
-        <Text style={[styles.label]} color={color} numberOfLines={1}>
-          {tab.name}
-        </Text>
+        {children}
       </Pressable>
-    </View>
-  );
-};
+    );
+  }
+);
+
+CustomTabButton.displayName = 'CustomTabButton';
 
-const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
-  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+const TabBarTwo = ({ tabs, theme, onTabPress, renderIcon }: TabBarTwoProps) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const screenOptions = useMemo(
+    () => ({
+      headerShown: false,
+      tabBarHideOnKeyboard: true,
+
+      tabBarStyle: {
+        backgroundColor: appliedTheme.colors.background,
+        position: 'absolute' as const,
+        borderRadius: TAB_BAR_BORDER_RADIUS,
+        marginHorizontal: TAB_BAR_MARGIN,
+        paddingHorizontal: scale(5),
+        paddingBottom: 0,
+        borderColor: appliedTheme.colors.border,
+        borderWidth: TAB_BAR_BORDER_WIDTH,
+        height: TAB_BAR_HEIGHT,
+        borderTopWidth: TAB_BAR_BORDER_WIDTH,
+        bottom: insets.bottom + TAB_BAR_BOTTOM_OFFSET,
+      },
+
+      tabBarActiveTintColor: appliedTheme.colors.primary,
+      tabBarInactiveTintColor: appliedTheme.colors.textPrimary,
+
+      tabBarLabelStyle: {
+        fontSize: RFValue(10),
+      },
+    }),
+    [appliedTheme.colors, insets.bottom]
+  );
 
   return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        tabBarShowLabel: false,
-        tabBarHideOnKeyboard: true,
-        tabBarStyle: {
-          position: 'absolute',
-          bottom: scale(20),
-          marginHorizontal: scale(16),
-          height: scale(70),
-          borderRadius: scale(40),
-          backgroundColor: appliedTheme.colors.background,
-          borderWidth: 2,
-          borderTopWidth: 2,
-          borderTopColor: appliedTheme.colors.border,
-          borderColor: appliedTheme.colors.border,
-          paddingBottom: Platform.OS === 'ios' ? scale(12) : scale(10),
-          paddingTop: Platform.OS === 'ios' ? scale(12) : scale(10),
-          shadowColor: appliedTheme.colors.shadow,
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.2,
-          shadowRadius: 6,
-          elevation: 10,
-          overflow: 'hidden',
-        },
-      }}
-    >
-      {tabs.map((tab) => (
-        <Tab.Screen
-          key={tab.key}
-          name={tab.key}
-          component={tab.screenComponent}
-          options={{
-            tabBarButton: ({ onPress }: any) => (
-              <TabBarButton
-                tab={tab}
-                isActive={tab.key === activeTab}
-                appliedTheme={appliedTheme}
-                isDarkMode={isDarkMode}
-                onPress={onPress}
-                onTabPress={onTabPress}
-                setActiveTab={setActiveTab}
-              />
-            ),
-          }}
-        />
-      ))}
+    <Tab.Navigator screenOptions={screenOptions}>
+      {tabs.map((tab) => {
+        const handleTabPress = () => onTabPress?.(tab.key);
+
+        const renderTabIcon = ({
+          color,
+        }: {
+          color: string;
+          focused: boolean;
+          size: number;
+        }) => {
+          if (renderIcon) {
+            return (
+              <View style={styles.iconContainer}>
+                {renderIcon({ icon: tab.icon, color, size: ICON_SIZE })}
+              </View>
+            );
+          }
+
+          return (
+            <View style={styles.iconContainer}>
+              <tab.icon width={ICON_SIZE} height={ICON_SIZE} color={color} />
+            </View>
+          );
+        };
+
+        const renderTabButton = (props: BottomTabBarButtonProps) => (
+          <CustomTabButton
+            props={props}
+            rippleColor={appliedTheme.colors.border}
+          />
+        );
+
+        return (
+          <Tab.Screen
+            key={tab.key}
+            name={tab.key}
+            component={tab.screenComponent}
+            options={{
+              tabBarButton: renderTabButton,
+              tabBarLabel: tab.name,
+              tabBarIcon: renderTabIcon,
+              onTabPress: handleTabPress,
+            }}
+          />
+        );
+      })}
     </Tab.Navigator>
   );
 };
@@ -140,21 +177,13 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
 export default TabBarTwo;
 
 const styles = StyleSheet.create({
-  tabItem: {
+  tabButton: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  pressable: {
+  iconContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: scale(10),
-    paddingVertical: scale(4),
-    borderRadius: scale(30),
-  },
-  label: {
-    marginTop: scale(4),
-    fontSize: RFValue(10),
-    textAlign: 'center',
   },
 });