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

package/src/components/TabBar/One.tsx

@@ -1,16 +1,18 @@
 /**
- * @author Ashok Desai
- * @lastModified jun 23 Jun 2025 at 11:40 AM
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 11:50 AM
  */
 
-import React, { useState } from 'react';
-import { View, Pressable, Platform, StyleSheet } from 'react-native';
+import React 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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { Text } from '../Text';
-import type { ITheme, ThemeOverride } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigationMode } from '../../hooks/useNavigationMode';
 
 type ITab = {
   key: string;
@@ -39,103 +41,39 @@ export type TabBarOneProps = {
 };
 
 const Tab = createBottomTabNavigator();
-type TabBarButtonProps = {
-  onPress?: (e: any) => void;
-  tab: ITab;
-  isActive: boolean;
-  appliedTheme: ITheme;
-  isDarkMode: boolean;
-  setActiveTab: (key: string) => void;
-  onTabPress?: (key: string) => void;
-  renderIcon?: ({
-    icon,
-    color,
-    size,
-  }: {
-    icon: React.ComponentType<{ width: number; height: number; color: string }>;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-};
 
-const TabBarButton: React.FC<TabBarButtonProps> = ({
-  onPress,
-  tab,
-  isActive,
-  appliedTheme,
-  isDarkMode,
-  setActiveTab,
-  onTabPress,
-  renderIcon,
-}) => {
-  const color = isActive
-    ? appliedTheme.colors.primary
-    : appliedTheme.colors.textPrimary;
+const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
+  const { isGestureNav } = useNavigationMode();
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const iconSize = scale(24);
+  const baseHeight =
+    Platform.OS === 'android'
+      ? isGestureNav
+        ? scale(53)
+        : scale(68)
+      : scale(35);
 
-  const icon = renderIcon ? (
-    renderIcon({ icon: tab.icon, color, size: iconSize })
-  ) : (
-    <tab.icon width={iconSize} height={iconSize} color={color} />
-  );
-
-  return (
-    <View style={styles.buttonWrapper}>
-      <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)',
-          borderless: true,
-          radius: scale(35),
-        }}
-        style={styles.iconWithLabel}
-        accessibilityRole="button"
-        accessibilityLabel={`Tab: ${tab.name}`}
-      >
-        <View style={{ marginBottom: scale(3) }}>{icon}</View>
-        <Text style={[styles.label]} color={color} numberOfLines={1}>
-          {tab.name}
-        </Text>
-      </Pressable>
-    </View>
-  );
-};
-
-const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
-  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+  const tabBarHeight = baseHeight + insets.bottom;
 
   return (
     <Tab.Navigator
-      screenListeners={{
-        state: (e: any) => {
-          const index = e.data.state.index;
-          const currentKey = tabs[index]?.key;
-          if (currentKey) setActiveTab(currentKey);
-        },
-      }}
       screenOptions={{
         headerShown: false,
-        tabBarShowLabel: false,
         tabBarHideOnKeyboard: true,
-
         tabBarStyle: {
-          position: 'absolute',
-          bottom: 0,
-          height: scale(80),
           backgroundColor: appliedTheme.colors.background,
-          borderTopColor: appliedTheme.colors.border,
-          borderTopWidth: 0.5,
-          paddingBottom: Platform.OS === 'ios' ? scale(28) : scale(18),
-          paddingTop: scale(15),
-          zIndex: 100,
+          borderColor: appliedTheme.colors.border,
+          borderTopWidth: scale(0.5),
+          paddingHorizontal: scale(5),
+          height: tabBarHeight,
+        },
+
+        tabBarActiveTintColor: appliedTheme.colors.primary,
+        tabBarInactiveTintColor: appliedTheme.colors.textPrimary,
+
+        tabBarLabelStyle: {
+          fontSize: RFValue(10),
         },
       }}
     >
@@ -145,17 +83,54 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
           name={tab.key}
           component={tab.screenComponent}
           options={{
-            tabBarButton: (props: any) =>
-              TabBarButtonWrapperWithProps({
-                ...props,
-                tab,
-                isActive: tab.key === activeTab,
-                appliedTheme: appliedTheme,
-                isDarkMode,
-                setActiveTab: setActiveTab,
-                onTabPress: onTabPress,
-                renderIcon: renderIcon,
-              }),
+            tabBarButton: (props: BottomTabBarButtonProps) => {
+              const {
+                onPress,
+                onLongPress,
+                accessibilityRole,
+                accessibilityState,
+                testID,
+                style,
+                children,
+              } = props;
+              return (
+                <Pressable
+                  android_ripple={{
+                    color: appliedTheme.colors.border,
+                    borderless: true,
+                    radius: scale(30),
+                  }}
+                  onPress={onPress}
+                  onLongPress={onLongPress}
+                  accessibilityRole={accessibilityRole}
+                  accessibilityState={accessibilityState}
+                  testID={testID}
+                  style={style}
+                >
+                  {children}
+                </Pressable>
+              );
+            },
+            onTabPress: () => onTabPress?.(tab.key),
+            tabBarLabel: tab.name,
+            tabBarIcon: ({
+              color,
+            }: {
+              color: string;
+              focused: boolean;
+              size: number;
+            }) => {
+              const iconSize = scale(24);
+              return renderIcon ? (
+                <View style={styles.iconContainer}>
+                  {renderIcon({ icon: tab.icon, color, size: iconSize })}
+                </View>
+              ) : (
+                <View style={styles.iconContainer}>
+                  <tab.icon width={iconSize} height={iconSize} color={color} />
+                </View>
+              );
+            },
           }}
         />
       ))}
@@ -163,48 +138,11 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
   );
 };
 
-type TabBarButtonWrapperProps = {
-  onPress?: (e: any) => void;
-  tab: ITab;
-  isActive: boolean;
-  isDarkMode: boolean;
-  appliedTheme: ITheme;
-  setActiveTab: (key: string) => void;
-  onTabPress?: (key: string) => void;
-  renderIcon?: ({
-    icon,
-    color,
-    size,
-  }: {
-    icon: React.ComponentType<{ width: number; height: number; color: string }>;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-};
-
-const TabBarButtonWrapper: React.FC<TabBarButtonWrapperProps> = (props) => {
-  return <TabBarButton {...props} />;
-};
-
-function TabBarButtonWrapperWithProps(props: TabBarButtonWrapperProps) {
-  return <TabBarButtonWrapper {...props} />;
-}
 export default TabBarOne;
 
 const styles = StyleSheet.create({
-  buttonWrapper: {
-    flex: 1,
+  iconContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
-  iconWithLabel: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-  },
-  label: {
-    marginTop: scale(4),
-    fontSize: RFValue(10),
-    textAlign: 'center',
-  },
 });

package/src/components/TabBar/Three.tsx

@@ -1,129 +1,127 @@
 /**
- * @author Naresh Desai
- * @lastModified Sat 26 Jul 2025 at 12:37 PM
+ * @author Naresh Dhamu
+ * @lastModified Sun 09 Nov 2025 at 01:33 PM
  */
+
 import React from 'react';
 import { View, Pressable, StyleSheet, Platform } from 'react-native';
-import { BlurView } from '@react-native-community/blur';
 import {
   createBottomTabNavigator,
   type BottomTabBarProps,
 } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
 
-import type { ITheme, ThemeOverride } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 
 export interface ITab {
   key: string;
   name: string;
   screenComponent: React.ComponentType<any>;
-  icon: React.ComponentType<{
-    width: number;
-    height: number;
-    color: string;
-  }>;
+  icon: React.ComponentType<{ width: number; height: number; color: string }>;
 }
 
 export interface TabBarThreeProps {
   tabs: ITab[];
   theme?: ThemeOverride;
   onTabPress?: (key: string) => void;
+  tabBarHeight?: number;
 }
 
 const Tab = createBottomTabNavigator();
-const ICON_BOX_SIZE = scale(52);
-const BOTTOM_BAR_HEIGHT = scale(70);
+const TAB_BAR_HEIGHT = scale(65);
+const TAB_BAR_OFFSET = Platform.OS === 'android' ? scale(5) : -scale(8);
 
-const CustomTabBar: React.FC<
-  BottomTabBarProps & {
-    tabs: ITab[];
-    onTabPress?: (key: string) => void;
-    theme: ITheme;
-  }
-> = ({ state, navigation, tabs, onTabPress, theme }) => (
-  <View style={styles.bottomWrapper}>
+const TabBarThree: React.FC<TabBarThreeProps> = ({
+  tabs,
+  theme,
+  onTabPress,
+  tabBarHeight = TAB_BAR_HEIGHT,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const tabWidth = tabBarHeight - scale(10);
+  const tabPadding = scale(7);
+  const tabGap = scale(8);
+  const totalWidth =
+    tabs.length * tabWidth + tabPadding * 2 + tabGap * (tabs.length - 1);
+
+  const renderTabBar = (props: BottomTabBarProps) => (
     <View
-      style={[
-        styles.bottomBox,
-        {
-          borderColor: theme.colors.border,
-          backgroundColor:
-            Platform.OS === 'android' ? theme.colors.backdrop : 'transparent',
-        },
-      ]}
+      style={[styles.container, { bottom: insets.bottom + TAB_BAR_OFFSET }]}
     >
-      {Platform.OS !== 'web' && (
-        <BlurView
-          style={StyleSheet.absoluteFill}
-          blurAmount={25}
-          reducedTransparencyFallbackColor={theme.colors.backdrop}
-          blurType="light"
-        />
-      )}
-      <View style={styles.row}>
+      <View
+        style={[
+          styles.tabBar,
+          {
+            height: tabBarHeight,
+            width: totalWidth,
+            paddingHorizontal: tabPadding,
+            gap: tabGap,
+            borderRadius: scale(tabBarHeight / 2),
+            borderColor: appliedTheme.colors.border,
+            backgroundColor:
+              Platform.OS === 'android'
+                ? appliedTheme.colors.backdrop
+                : 'transparent',
+          },
+        ]}
+      >
+        {Platform.OS !== 'web' && (
+          <BlurView
+            style={StyleSheet.absoluteFillObject}
+            blurType="light"
+            blurAmount={25}
+            reducedTransparencyFallbackColor="transparent"
+          />
+        )}
+
         {tabs.map((tab, index) => {
-          const isFocused = state.index === index;
-          const iconColor = isFocused
-            ? theme.colors.buttonText
-            : theme.colors.textPrimary;
-          const bgColor = isFocused
-            ? theme.colors.button
-            : theme.colors.blueBackground;
-          const isBorderColor = isFocused
-            ? theme.colors.button
-            : theme.colors.border;
+          const isFocused = props.state.index === index;
 
           return (
             <Pressable
               key={tab.key}
               onPress={() => {
                 onTabPress?.(tab.key);
-                navigation.navigate(tab.key);
+                props.navigation.navigate(tab.key);
               }}
               style={[
-                styles.icon,
+                styles.tab,
                 {
-                  backgroundColor: bgColor,
-                  borderColor: isBorderColor,
+                  padding: scale(tabBarHeight / 5.1),
+                  borderWidth: Platform.select({
+                    ios: scale(1),
+                    android: scale(1.5),
+                  }),
+                  backgroundColor: isFocused
+                    ? appliedTheme.colors.button
+                    : appliedTheme.colors.background,
+                  borderColor: isFocused
+                    ? appliedTheme.colors.button
+                    : appliedTheme.colors.border,
                 },
               ]}
             >
               <tab.icon
-                width={scale(24)}
-                height={scale(24)}
-                color={iconColor}
+                width={scale(tabBarHeight / 3.1)}
+                height={scale(tabBarHeight / 3.1)}
+                color={
+                  isFocused
+                    ? appliedTheme.colors.buttonText
+                    : appliedTheme.colors.textPrimary
+                }
               />
             </Pressable>
           );
         })}
       </View>
     </View>
-  </View>
-);
-
-const renderTabBar =
-  (
-    tabs: ITab[],
-    onTabPress: ((key: string) => void) | undefined,
-    theme: ITheme
-  ) =>
-  (props: BottomTabBarProps) => (
-    <CustomTabBar
-      {...props}
-      tabs={tabs}
-      onTabPress={onTabPress}
-      theme={theme}
-    />
   );
 
-const TabBarThree: React.FC<TabBarThreeProps> = ({
-  tabs,
-  theme,
-  onTabPress,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
   return (
     <Tab.Navigator
       screenOptions={{
@@ -131,7 +129,7 @@ const TabBarThree: React.FC<TabBarThreeProps> = ({
         tabBarShowLabel: false,
         tabBarHideOnKeyboard: true,
       }}
-      tabBar={renderTabBar(tabs, onTabPress, appliedTheme)}
+      tabBar={renderTabBar}
     >
       {tabs.map((tab) => (
         <Tab.Screen
@@ -145,39 +143,26 @@ const TabBarThree: React.FC<TabBarThreeProps> = ({
 };
 
 const styles = StyleSheet.create({
-  bottomWrapper: {
+  container: {
     position: 'absolute',
-    bottom: scale(20),
     left: 0,
     right: 0,
     alignItems: 'center',
   },
-  bottomBox: {
-    marginHorizontal: scale(16),
-    alignSelf: 'center',
-    height: BOTTOM_BAR_HEIGHT,
-    borderRadius: scale(BOTTOM_BAR_HEIGHT / 2),
-    overflow: 'hidden',
-    borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  row: {
+  tabBar: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    width: '100%',
-    paddingHorizontal: scale(12),
-  },
-  icon: {
-    width: ICON_BOX_SIZE,
-    height: ICON_BOX_SIZE,
-    borderRadius: ICON_BOX_SIZE / 2,
+
     borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
+    overflow: 'hidden',
+    marginHorizontal: 'auto',
+  },
+  tab: {
     justifyContent: 'center',
     alignItems: 'center',
-    borderStyle: 'solid',
-    zIndex: 1,
+    borderRadius: scale(100),
+    aspectRatio: 1,
   },
 });