@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.1

package/src/components/TabBar/One.tsx

@@ -0,0 +1,202 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+
+import React, { useState } from 'react';
+import { View, Pressable, Platform, StyleSheet } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import { Text } from '../Text';
+import type { AppTheme, ITheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type ITab = {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+};
+
+export type TabBarOneProps = {
+  tabs: ITab[];
+  onTabPress?: (key: string) => void;
+  theme?: AppTheme;
+  renderIcon?: ({
+    icon,
+    color,
+    size
+  }: {
+    icon: React.ComponentType<{ width: number; height: number; color: string }>;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+};
+
+const Tab = createBottomTabNavigator();
+type TabBarButtonProps = {
+  onPress?: (e: any) => void;
+  tab: ITab;
+  isActive: 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 TabBarButton: React.FC<TabBarButtonProps> = ({
+  onPress,
+  tab,
+  isActive,
+  appliedTheme,
+  setActiveTab,
+  onTabPress,
+  renderIcon
+}) => {
+  const color = isActive ? appliedTheme.colors.primary : appliedTheme.colors.textPrimary;
+
+  const iconSize = scale(24);
+
+  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: appliedTheme.dark ? '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 } = useTheme(theme);
+  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+
+  return (
+    <Tab.Navigator
+      screenListeners={{
+        state: (e) => {
+          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 + '80',
+          borderTopColor: appliedTheme.colors.border,
+          borderTopWidth: 0.5,
+          paddingBottom: Platform.OS === 'ios' ? scale(28) : scale(18),
+          paddingTop: scale(15),
+          zIndex: 100
+        }
+      }}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+          options={{
+            tabBarButton: (props) =>
+              TabBarButtonWrapperWithProps({
+                ...props,
+                tab,
+                isActive: tab.key === activeTab,
+                appliedTheme: appliedTheme,
+                setActiveTab: setActiveTab,
+                onTabPress: onTabPress,
+                renderIcon: renderIcon
+              })
+          }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+type TabBarButtonWrapperProps = {
+  onPress?: (e: any) => void;
+  tab: ITab;
+  isActive: 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,
+    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

@@ -0,0 +1,148 @@
+/**
+ * @author Naresh Desai
+ * @lastModified Sat 26 Jul 2025 at 12:37 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 type { AppTheme, ITheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
+
+export interface ITab {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+}
+
+export interface TabBarThreeProps {
+  tabs: ITab[];
+  theme?: AppTheme;
+  onTabPress?: (key: string) => void;
+}
+
+const Tab = createBottomTabNavigator();
+const ICON_BOX_SIZE = scale(52);
+const BOTTOM_BAR_HEIGHT = scale(70);
+
+const CustomTabBar: React.FC<
+  BottomTabBarProps & {
+    tabs: ITab[];
+    onTabPress?: (key: string) => void;
+    theme: ITheme;
+  }
+> = ({ state, navigation, tabs, onTabPress, theme }) => (
+  <View style={styles.bottomWrapper}>
+    <View
+      style={[
+        styles.bottomBox,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: Platform.OS === 'android' ? theme.colors.backdrop : 'transparent'
+        }
+      ]}
+    >
+      {Platform.OS !== 'web' && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          blurAmount={25}
+          reducedTransparencyFallbackColor={theme.colors.backdrop}
+          blurType="light"
+        />
+      )}
+      <View style={styles.row}>
+        {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;
+
+          return (
+            <Pressable
+              key={tab.key}
+              onPress={() => {
+                onTabPress?.(tab.key);
+                navigation.navigate(tab.key);
+              }}
+              style={[
+                styles.icon,
+                {
+                  backgroundColor: bgColor,
+                  borderColor: isBorderColor
+                }
+              ]}
+            >
+              <tab.icon width={scale(24)} height={scale(24)} color={iconColor} />
+            </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 } = useTheme(theme);
+
+  return (
+    <Tab.Navigator
+      screenOptions={{ headerShown: false, tabBarShowLabel: false, tabBarHideOnKeyboard: true }}
+      tabBar={renderTabBar(tabs, onTabPress, appliedTheme)}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen key={tab.key} name={tab.key} component={tab.screenComponent} />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomWrapper: {
+    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: {
+    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) }),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderStyle: 'solid',
+    zIndex: 1
+  }
+});
+
+export default TabBarThree;

package/src/components/TabBar/Two.tsx

@@ -0,0 +1,153 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+import React, { useState } from 'react';
+import { View, Pressable, StyleSheet, Platform } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../Text';
+import type { AppTheme, ITheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export type ITab = {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+};
+
+export type TabBarTwoProps = {
+  tabs: ITab[];
+  theme?: AppTheme;
+  onTabPress?: (key: string) => void;
+};
+
+const Tab = createBottomTabNavigator();
+
+// Extracted TabBarButton component
+const TabBarButton = ({
+  tab,
+  isActive,
+  appliedTheme,
+  onPress,
+  onTabPress,
+  setActiveTab
+}: {
+  tab: ITab;
+  isActive: 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;
+
+  return (
+    <View style={styles.tabItem}>
+      <Pressable
+        onPress={(e) => {
+          onPress?.(e);
+          setActiveTab(tab.key);
+          onTabPress?.(tab.key);
+        }}
+        android_ripple={{
+          color: appliedTheme.dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
+          borderless: true,
+          radius: scale(42)
+        }}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={`Tab: ${tab.name}`}
+      >
+        <Icon width={scale(24)} height={scale(24)} color={color} />
+        <Text style={[styles.label]} color={color} numberOfLines={1}>
+          {tab.name}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+
+  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 + '80',
+          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 }) => (
+              <TabBarButton
+                tab={tab}
+                isActive={tab.key === activeTab}
+                appliedTheme={appliedTheme}
+                onPress={onPress}
+                onTabPress={onTabPress}
+                setActiveTab={setActiveTab}
+              />
+            )
+          }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+export default TabBarTwo;
+
+const styles = StyleSheet.create({
+  tabItem: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pressable: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(4),
+    borderRadius: scale(30)
+  },
+  label: {
+    marginTop: scale(4),
+    fontSize: RFValue(10),
+    textAlign: 'center'
+  }
+});

package/src/components/TabBar/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 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,57 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 04:33 PM
+ */
+
+import React from 'react';
+import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';
+import { useTheme } from '../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+export interface TextProps extends RNTextProps {
+  children: React.ReactNode;
+  size?: number; // base size
+  color?: string;
+  weight?: TextStyle['fontWeight'];
+  align?: TextStyle['textAlign'];
+  fontFamily?: string;
+  numberOfLines?: number;
+  allowFontScaling?: boolean;
+}
+
+const Text: React.FC<TextProps> = ({
+  children,
+  size = 10,
+  color,
+  weight = '500',
+  align = 'left',
+  fontFamily,
+  numberOfLines,
+  allowFontScaling = false,
+  style,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <RNText
+      {...rest}
+      allowFontScaling={allowFontScaling}
+      numberOfLines={numberOfLines}
+      style={[
+        {
+          color: color ?? theme.colors.textPrimary,
+          fontSize: RFValue(size),
+          fontWeight: weight,
+          textAlign: align,
+          fontFamily
+        },
+        style
+      ]}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;

package/src/components/Text/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 05:02 PM
+ */
+export { default as Text } from './Text';