@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/components/TabBar/One.tsx

@@ -0,0 +1,145 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+import type { ITab } from '../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigationMode } from '../../hooks/useNavigationMode';
+
+export type TabBarOneProps = {
+  tabs: ITab[];
+  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();
+
+const renderTabBarButton = (
+  props: BottomTabBarButtonProps,
+  rippleColor: string
+) => {
+  const {
+    onPress,
+    onLongPress,
+    accessibilityRole,
+    accessibilityState,
+    testID,
+    style,
+    children,
+  } = props;
+  return (
+    <Pressable
+      android_ripple={{
+        color: rippleColor,
+        borderless: true,
+        radius: scale(30),
+      }}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+      testID={testID}
+      style={style}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+const renderTabBarIcon = (
+  TabIcon: ITab['icon'],
+  color: string,
+  renderIcon?: TabBarOneProps['renderIcon']
+) => {
+  const iconSize = scale(24);
+  return renderIcon ? (
+    <View style={styles.iconContainer}>
+      {renderIcon({ icon: TabIcon, color, size: iconSize })}
+    </View>
+  ) : (
+    <View style={styles.iconContainer}>
+      <TabIcon width={iconSize} height={iconSize} color={color} />
+    </View>
+  );
+};
+
+const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
+  const { isGestureNav } = useNavigationMode();
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const baseHeight =
+    Platform.OS === 'android'
+      ? isGestureNav
+        ? scale(53)
+        : scale(68)
+      : scale(49);
+
+  const tabBarHeight = Math.max(scale(49), baseHeight + insets.bottom);
+
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarHideOnKeyboard: true,
+        tabBarStyle: {
+          backgroundColor: appliedTheme.colors.background,
+          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),
+        },
+      }}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+          options={{
+            tabBarButton: (props: BottomTabBarButtonProps) =>
+              renderTabBarButton(props, appliedTheme.colors.border),
+            onTabPress: () => onTabPress?.(tab.key),
+            tabBarLabel: tab.name,
+            tabBarIcon: ({ color }: { color: string }) =>
+              renderTabBarIcon(tab.icon, color, renderIcon),
+          }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+export default TabBarOne;
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/TabBar/Three.tsx

@@ -0,0 +1,162 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import { View, Pressable, StyleSheet, Platform } from 'react-native';
+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 { ThemeOverride } from '../../theme/themes';
+import type { ITab } from '../../types';
+import { useTheme } from '../../theme';
+
+export interface TabBarThreeProps {
+  tabs: ITab[];
+  theme?: ThemeOverride;
+  onTabPress?: (key: string) => void;
+  tabBarHeight?: number;
+}
+
+const Tab = createBottomTabNavigator();
+const TAB_BAR_HEIGHT = scale(65);
+const TAB_BAR_OFFSET = Platform.OS === 'android' ? scale(5) : scale(8);
+
+const TabBarThree: React.FC<TabBarThreeProps> = ({
+  tabs,
+  theme,
+  onTabPress,
+  tabBarHeight = TAB_BAR_HEIGHT,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(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) => {
+    const containerBottomStyle = {
+      bottom: Math.max(scale(8), insets.bottom + TAB_BAR_OFFSET),
+    };
+    const dynamicTabBarStyle = {
+      height: tabBarHeight,
+      width: totalWidth,
+      paddingHorizontal: tabPadding,
+      gap: tabGap,
+      borderRadius: scale(tabBarHeight / 2),
+      borderColor: appliedTheme.colors.border,
+      backgroundColor:
+        Platform.OS === 'android'
+          ? appliedTheme.colors.backdrop
+          : 'transparent',
+    };
+    return (
+      <View style={[styles.container, containerBottomStyle]}>
+        <View style={[styles.tabBar, dynamicTabBarStyle]}>
+          {Platform.OS !== 'web' && (
+            <BlurView
+              style={StyleSheet.absoluteFill}
+              blurType="light"
+              blurAmount={25}
+              reducedTransparencyFallbackColor="transparent"
+            />
+          )}
+
+          {tabs.map((tab, index) => {
+            const isFocused = props.state.index === index;
+
+            return (
+              <Pressable
+                key={tab.key}
+                onPress={() => {
+                  onTabPress?.(tab.key);
+                  props.navigation.navigate(tab.key);
+                }}
+                style={[
+                  styles.tab,
+                  {
+                    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(tabBarHeight / 3.1)}
+                  height={scale(tabBarHeight / 3.1)}
+                  color={
+                    isFocused
+                      ? appliedTheme.colors.buttonText
+                      : appliedTheme.colors.textPrimary
+                  }
+                />
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarHideOnKeyboard: true,
+      }}
+      tabBar={renderTabBar}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  tabBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+
+    borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
+    overflow: 'hidden',
+    marginHorizontal: 'auto',
+  },
+  tab: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: scale(100),
+    aspectRatio: 1,
+  },
+});
+
+export default TabBarThree;

package/src/components/TabBar/Two.tsx

@@ -0,0 +1,179 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+import type { ITab } from '../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export type TabBarTwoProps = {
+  tabs: ITab[];
+  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();
+
+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);
+
+const CustomTabButton = React.memo(
+  ({
+    props,
+    rippleColor,
+  }: {
+    props: BottomTabBarButtonProps;
+    rippleColor?: string;
+  }) => {
+    const {
+      onPress,
+      onLongPress,
+      accessibilityRole,
+      accessibilityState,
+      testID,
+      style,
+      children,
+    } = props;
+
+    return (
+      <Pressable
+        android_ripple={{
+          color: rippleColor,
+          borderless: true,
+          radius: RIPPLE_RADIUS,
+        }}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        accessibilityRole={accessibilityRole}
+        accessibilityState={accessibilityState}
+        testID={testID}
+        style={[style, styles.tabButton]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+);
+
+CustomTabButton.displayName = 'CustomTabButton';
+
+const TabBarTwo = ({ tabs, theme, onTabPress, renderIcon }: TabBarTwoProps) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(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: Math.max(scale(8), 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={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>
+  );
+};
+
+export default TabBarTwo;
+
+const styles = StyleSheet.create({
+  tabButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/TabBar/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import TabBarOne from './One';
+import TabBarTwo from './Two';
+import TabBarThree from './Three';
+
+const TabBar = {
+  One: TabBarOne,
+  Two: TabBarTwo,
+  Three: TabBarThree,
+};
+
+export type { TabBarOneProps } from './One';
+export type { TabBarTwoProps } from './Two';
+export type { TabBarThreeProps } from './Three';
+
+export { TabBar };

package/src/components/Text/Text.tsx

@@ -0,0 +1,90 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import {
+  Text as RNText,
+  type TextProps as RNTextProps,
+  type TextStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../theme/themes';
+
+export interface TextProps extends RNTextProps {
+  children: React.ReactNode;
+  type?: 'title' | 'subtitle' | 'body' | 'caption';
+  size?: number;
+  color?: string;
+  weight?: TextStyle['fontWeight'];
+  align?: TextStyle['textAlign'];
+  fontFamily?: string;
+  numberOfLines?: number;
+  allowFontScaling?: boolean;
+  theme?: ThemeOverride;
+}
+
+const Text: React.FC<TextProps> = ({
+  children,
+  type = 'body',
+  size,
+  color,
+  weight,
+  align = 'left',
+  fontFamily,
+  numberOfLines,
+  allowFontScaling = false,
+  style,
+  theme: overrideTheme,
+  ...rest
+}) => {
+  const { theme } = useTheme(overrideTheme);
+
+  // Memoize default styles for each type
+  const typeStyles = useMemo<
+    Record<
+      string,
+      { size: number; weight: TextStyle['fontWeight']; color?: string }
+    >
+  >(
+    () => ({
+      title: { size: 18, weight: '700', color: theme.colors.textPrimary },
+      subtitle: { size: 14, weight: '500', color: theme.colors.textSecondary },
+      body: { size: 12, weight: '400', color: theme.colors.textPrimary },
+      caption: { size: 10, weight: '400', color: theme.colors.textSecondary },
+    }),
+    [theme.colors.textPrimary, theme.colors.textSecondary]
+  );
+
+  const typeStyle = typeStyles[type] || typeStyles.body;
+
+  // Memoize computed style
+  const computedStyle = useMemo(
+    () => [
+      {
+        color: color ?? typeStyle?.color,
+        fontSize: size ? RFValue(size) : RFValue(Number(typeStyle?.size)),
+        fontWeight: weight ?? typeStyle?.weight,
+        textAlign: align,
+        fontFamily,
+      },
+      style,
+    ],
+    [color, typeStyle, size, weight, align, fontFamily, style]
+  );
+
+  return (
+    <RNText
+      {...rest}
+      allowFontScaling={allowFontScaling}
+      numberOfLines={numberOfLines}
+      style={computedStyle}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default React.memo(Text);

package/src/components/Text/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export { default as Text } from './Text';