@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/components/Subscription/SubOne.tsx

@@ -4,7 +4,12 @@
  */
 
 import React, { memo, useCallback, useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { scale, verticalScale } from 'react-native-size-matters';
 import LinearGradient from 'react-native-linear-gradient';
@@ -62,11 +67,12 @@ const SubscriptionSliderOne = ({
   onBackPress = () => {},
   header,
   footer,
-  extraContentText
+  extraContentText,
 }: SubscriptionSliderOneProps) => {
   const { theme: appliedTheme } = useTheme(theme);
   const colors = appliedTheme.colors;
-  const parsePrice = (price: string) => parseFloat(price.replace(/[^\d.]/g, '')) || 0;
+  const parsePrice = (price: string) =>
+    parseFloat(price.replace(/[^\d.]/g, '')) || 0;
   const sortedPlans = useMemo(() => {
     return [...plans].sort((a, b) => {
       const aPopular = a?.isPopular ? 1 : 0;
@@ -83,11 +89,18 @@ const SubscriptionSliderOne = ({
       return 0;
     });
   }, [plans]);
-  const placeholderData = useMemo(() => new Array(plans.length || 1).fill({}), [plans]);
+  const placeholderData = useMemo(
+    () => new Array(plans.length || 1).fill({}),
+    [plans]
+  );
 
   const renderSkeleton = useCallback(
     () => (
-      <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.cardContainer}>
+      <Animated.View
+        entering={FadeIn}
+        exiting={FadeOut}
+        style={styles.cardContainer}
+      >
         <SkeletonPlaceholder
           borderRadius={20}
           backgroundColor={colors.skeletonBaseColor}
@@ -111,15 +124,30 @@ const SubscriptionSliderOne = ({
           style={[styles.card, { shadowColor: colors.primary }]}
         >
           {item?.isPopular && (
-            <View style={[styles.popularBadge, { backgroundColor: colors.onBackground }]}>
-              <Text style={[styles.popularText, { color: colors.onSecondary }]}>POPULAR</Text>
+            <View
+              style={[
+                styles.popularBadge,
+                { backgroundColor: colors.onBackground },
+              ]}
+            >
+              <Text style={[styles.popularText, { color: colors.onSecondary }]}>
+                POPULAR
+              </Text>
             </View>
           )}
 
-          <Text style={[styles.cardTitle, { color: colors.white }]}>{item.title}</Text>
-          <Text style={[styles.price, { color: colors.white }]}>{item.price}</Text>
-          <Text style={[styles.per, { color: colors.white }]}>{item.duration}</Text>
-          <Text style={[styles.platforms, { color: colors.white }]}>{item.platforms}</Text>
+          <Text style={[styles.cardTitle, { color: colors.white }]}>
+            {item.title}
+          </Text>
+          <Text style={[styles.price, { color: colors.white }]}>
+            {item.price}
+          </Text>
+          <Text style={[styles.per, { color: colors.white }]}>
+            {item.duration}
+          </Text>
+          <Text style={[styles.platforms, { color: colors.white }]}>
+            {item.platforms}
+          </Text>
           {!!item.benefits?.length && (
             <View style={styles.benefitsContainer}>
               {item.benefits.map((benefit, i) => (
@@ -138,7 +166,9 @@ const SubscriptionSliderOne = ({
             {subscribeLoadingId === item.id ? (
               <ActivityIndicator size="small" color={colors.black} />
             ) : (
-              <Text style={[styles.subscribeText, { color: colors.black }]}>{subscribeButtonText}</Text>
+              <Text style={[styles.subscribeText, { color: colors.black }]}>
+                {subscribeButtonText}
+              </Text>
             )}
           </TouchableOpacity>
         </LinearGradient>
@@ -154,7 +184,7 @@ const SubscriptionSliderOne = ({
       colors.white,
       onSubscribe,
       subscribeButtonText,
-      subscribeLoadingId
+      subscribeLoadingId,
     ]
   );
 
@@ -168,10 +198,14 @@ const SubscriptionSliderOne = ({
       />
       <View style={styles.content}>
         <Text style={[styles.heading]}>{header.title}</Text>
-        <Text style={[styles.subText, { color: colors.onSurfaceVariant }]}>{header.subTitle}</Text>
+        <Text style={[styles.subText, { color: colors.onSurfaceVariant }]}>
+          {header.subTitle}
+        </Text>
 
         {errorMessage ? (
-          <Text style={[styles.errorMessage, { color: colors.error }]}>{errorMessage}</Text>
+          <Text style={[styles.errorMessage, { color: colors.error }]}>
+            {errorMessage}
+          </Text>
         ) : (
           <Carousel
             width={CAROUSEL_WIDTH}
@@ -184,20 +218,31 @@ const SubscriptionSliderOne = ({
             mode="parallax"
             modeConfig={{
               parallaxScrollingOffset: Display.fullWidth * 0.21,
-              parallaxAdjacentItemScale: 0.8
+              parallaxAdjacentItemScale: 0.8,
             }}
           />
         )}
 
-        <Text style={[styles.info, { color: colors.onSurfaceVariant }]}>{footer.title}</Text>
-        <Text style={[styles.cancelText, { color: colors.onSurfaceVariant }]}>{footer.subTitle}</Text>
+        <Text style={[styles.info, { color: colors.onSurfaceVariant }]}>
+          {footer.title}
+        </Text>
+        <Text style={[styles.cancelText, { color: colors.onSurfaceVariant }]}>
+          {footer.subTitle}
+        </Text>
 
         {extraContentText && (
           <View style={styles.extraContentTextWrapper}>
             {React.isValidElement(extraContentText) ? (
               extraContentText
             ) : (
-              <Text style={[styles.extraContentTextText, { color: colors.onSurfaceVariant }]}>{extraContentText}</Text>
+              <Text
+                style={[
+                  styles.extraContentTextText,
+                  { color: colors.onSurfaceVariant },
+                ]}
+              >
+                {extraContentText}
+              </Text>
             )}
           </View>
         )}
@@ -220,25 +265,25 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     textAlign: 'center',
     marginBottom: verticalScale(12),
-    marginHorizontal: scale(16)
+    marginHorizontal: scale(16),
   },
   subText: {
     textAlign: 'center',
     fontSize: RFValue(12),
     fontWeight: '400',
     marginBottom: verticalScale(12),
-    marginHorizontal: scale(16)
+    marginHorizontal: scale(16),
   },
   errorMessage: {
     fontSize: RFValue(13),
     fontWeight: '600',
     textAlign: 'center',
-    marginVertical: verticalScale(12)
+    marginVertical: verticalScale(12),
   },
 
   cardContainer: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   card: {
     position: 'relative',
@@ -251,74 +296,74 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.2,
     shadowRadius: 8,
-    elevation: 5
+    elevation: 5,
   },
   cardTitle: {
     fontSize: RFValue(17),
     fontWeight: '700',
-    marginBottom: verticalScale(8)
+    marginBottom: verticalScale(8),
   },
   price: {
     fontSize: RFValue(43),
     fontWeight: 'bold',
-    marginBottom: verticalScale(4)
+    marginBottom: verticalScale(4),
   },
   per: {
     fontSize: RFValue(13),
     textTransform: 'capitalize',
-    marginBottom: verticalScale(6)
+    marginBottom: verticalScale(6),
   },
   platforms: {
     fontSize: RFValue(13),
     textTransform: 'capitalize',
     textAlign: 'center',
-    marginBottom: verticalScale(8)
+    marginBottom: verticalScale(8),
   },
   benefitsContainer: {
     marginTop: verticalScale(8),
     alignItems: 'flex-start',
     justifyContent: 'center',
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
   },
   benefit: {
-    fontSize: RFValue(12)
+    fontSize: RFValue(12),
   },
   subscribeButton: {
     paddingVertical: verticalScale(10),
     paddingHorizontal: scale(60),
     borderRadius: scale(30),
     alignItems: 'center',
-    marginTop: verticalScale(15)
+    marginTop: verticalScale(15),
   },
   subscribeText: {
     fontSize: RFValue(14),
-    fontWeight: '700'
+    fontWeight: '700',
   },
   info: {
     fontSize: RFValue(11),
     textAlign: 'center',
     fontWeight: '400',
     marginVertical: verticalScale(8),
-    marginHorizontal: scale(16)
+    marginHorizontal: scale(16),
   },
   cancelText: {
     fontSize: RFValue(11),
     textAlign: 'center',
     fontWeight: '400',
     marginBottom: verticalScale(16),
-    marginHorizontal: scale(16)
+    marginHorizontal: scale(16),
   },
   extraContentTextWrapper: {
     marginTop: verticalScale(18),
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
   },
   extraContentTextText: {
     fontSize: RFValue(10),
     marginHorizontal: scale(16),
     fontWeight: '400',
-    textAlign: 'center'
+    textAlign: 'center',
   },
   popularBadge: {
     position: 'absolute',
@@ -327,11 +372,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(10),
     paddingVertical: verticalScale(4),
     borderRadius: scale(12),
-    zIndex: 10
+    zIndex: 10,
   },
   popularText: {
     fontSize: RFValue(12),
     textTransform: 'uppercase',
-    fontWeight: '700'
-  }
+    fontWeight: '700',
+  },
 });

package/src/components/Subscription/index.ts

@@ -6,7 +6,7 @@
 import SubscriptionOne from './SubOne';
 
 const Subscription = {
-  One: SubscriptionOne
+  One: SubscriptionOne,
 };
 
 export { Subscription };

package/src/components/TabBar/One.tsx

@@ -30,7 +30,7 @@ export type TabBarOneProps = {
   renderIcon?: ({
     icon,
     color,
-    size
+    size,
   }: {
     icon: React.ComponentType<{ width: number; height: number; color: string }>;
     color: string;
@@ -49,7 +49,7 @@ type TabBarButtonProps = {
   renderIcon?: ({
     icon,
     color,
-    size
+    size,
   }: {
     icon: React.ComponentType<{ width: number; height: number; color: string }>;
     color: string;
@@ -64,9 +64,11 @@ const TabBarButton: React.FC<TabBarButtonProps> = ({
   appliedTheme,
   setActiveTab,
   onTabPress,
-  renderIcon
+  renderIcon,
 }) => {
-  const color = isActive ? appliedTheme.colors.primary : appliedTheme.colors.textPrimary;
+  const color = isActive
+    ? appliedTheme.colors.primary
+    : appliedTheme.colors.textPrimary;
 
   const iconSize = scale(24);
 
@@ -85,9 +87,11 @@ const TabBarButton: React.FC<TabBarButtonProps> = ({
           onTabPress?.(tab.key);
         }}
         android_ripple={{
-          color: appliedTheme.dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
+          color: appliedTheme.dark
+            ? 'rgba(255, 255, 255, 0.12)'
+            : 'rgba(0, 0, 0, 0.08)',
           borderless: true,
-          radius: scale(35)
+          radius: scale(35),
         }}
         style={styles.iconWithLabel}
         accessibilityRole="button"
@@ -109,11 +113,11 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
   return (
     <Tab.Navigator
       screenListeners={{
-        state: (e) => {
+        state: (e: any) => {
           const index = e.data.state.index;
           const currentKey = tabs[index]?.key;
           if (currentKey) setActiveTab(currentKey);
-        }
+        },
       }}
       screenOptions={{
         headerShown: false,
@@ -129,8 +133,8 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
           borderTopWidth: 0.5,
           paddingBottom: Platform.OS === 'ios' ? scale(28) : scale(18),
           paddingTop: scale(15),
-          zIndex: 100
-        }
+          zIndex: 100,
+        },
       }}
     >
       {tabs.map((tab) => (
@@ -139,7 +143,7 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
           name={tab.key}
           component={tab.screenComponent}
           options={{
-            tabBarButton: (props) =>
+            tabBarButton: (props: any) =>
               TabBarButtonWrapperWithProps({
                 ...props,
                 tab,
@@ -147,8 +151,8 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
                 appliedTheme: appliedTheme,
                 setActiveTab: setActiveTab,
                 onTabPress: onTabPress,
-                renderIcon: renderIcon
-              })
+                renderIcon: renderIcon,
+              }),
           }}
         />
       ))}
@@ -166,7 +170,7 @@ type TabBarButtonWrapperProps = {
   renderIcon?: ({
     icon,
     color,
-    size
+    size,
   }: {
     icon: React.ComponentType<{ width: number; height: number; color: string }>;
     color: string;
@@ -187,16 +191,16 @@ const styles = StyleSheet.create({
   buttonWrapper: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconWithLabel: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: scale(8)
+    paddingHorizontal: scale(8),
   },
   label: {
     marginTop: scale(4),
     fontSize: RFValue(10),
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });

package/src/components/TabBar/Three.tsx

@@ -5,7 +5,10 @@
 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 {
+  createBottomTabNavigator,
+  type BottomTabBarProps,
+} from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
 
 import type { AppTheme, ITheme } from '../../theme/themes';
@@ -45,8 +48,9 @@ const CustomTabBar: React.FC<
         styles.bottomBox,
         {
           borderColor: theme.colors.border,
-          backgroundColor: Platform.OS === 'android' ? theme.colors.backdrop : 'transparent'
-        }
+          backgroundColor:
+            Platform.OS === 'android' ? theme.colors.backdrop : 'transparent',
+        },
       ]}
     >
       {Platform.OS !== 'web' && (
@@ -60,9 +64,15 @@ const CustomTabBar: React.FC<
       <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;
+          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
@@ -75,11 +85,15 @@ const CustomTabBar: React.FC<
                 styles.icon,
                 {
                   backgroundColor: bgColor,
-                  borderColor: isBorderColor
-                }
+                  borderColor: isBorderColor,
+                },
               ]}
             >
-              <tab.icon width={scale(24)} height={scale(24)} color={iconColor} />
+              <tab.icon
+                width={scale(24)}
+                height={scale(24)}
+                color={iconColor}
+              />
             </Pressable>
           );
         })}
@@ -89,20 +103,42 @@ const CustomTabBar: React.FC<
 );
 
 const renderTabBar =
-  (tabs: ITab[], onTabPress: ((key: string) => void) | undefined, theme: ITheme) => (props: BottomTabBarProps) => (
-    <CustomTabBar {...props} tabs={tabs} onTabPress={onTabPress} theme={theme} />
+  (
+    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 TabBarThree: React.FC<TabBarThreeProps> = ({
+  tabs,
+  theme,
+  onTabPress,
+}) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   return (
     <Tab.Navigator
-      screenOptions={{ headerShown: false, tabBarShowLabel: false, tabBarHideOnKeyboard: true }}
+      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.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+        />
       ))}
     </Tab.Navigator>
   );
@@ -114,7 +150,7 @@ const styles = StyleSheet.create({
     bottom: scale(20),
     left: 0,
     right: 0,
-    alignItems: 'center'
+    alignItems: 'center',
   },
   bottomBox: {
     marginHorizontal: scale(16),
@@ -124,14 +160,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '100%',
-    paddingHorizontal: scale(12)
+    paddingHorizontal: scale(12),
   },
   icon: {
     width: ICON_BOX_SIZE,
@@ -141,8 +177,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     borderStyle: 'solid',
-    zIndex: 1
-  }
+    zIndex: 1,
+  },
 });
 
 export default TabBarThree;

package/src/components/TabBar/Two.tsx

@@ -37,7 +37,7 @@ const TabBarButton = ({
   appliedTheme,
   onPress,
   onTabPress,
-  setActiveTab
+  setActiveTab,
 }: {
   tab: ITab;
   isActive: boolean;
@@ -47,7 +47,9 @@ const TabBarButton = ({
   setActiveTab: (key: string) => void;
 }) => {
   const Icon = tab.icon;
-  const color = isActive ? appliedTheme.colors.button : appliedTheme.colors.textPrimary;
+  const color = isActive
+    ? appliedTheme.colors.button
+    : appliedTheme.colors.textPrimary;
 
   return (
     <View style={styles.tabItem}>
@@ -58,9 +60,11 @@ const TabBarButton = ({
           onTabPress?.(tab.key);
         }}
         android_ripple={{
-          color: appliedTheme.dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
+          color: appliedTheme.dark
+            ? 'rgba(255, 255, 255, 0.12)'
+            : 'rgba(0, 0, 0, 0.08)',
           borderless: true,
-          radius: scale(42)
+          radius: scale(42),
         }}
         style={styles.pressable}
         accessibilityRole="button"
@@ -103,8 +107,8 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
           shadowOpacity: 0.2,
           shadowRadius: 6,
           elevation: 10,
-          overflow: 'hidden'
-        }
+          overflow: 'hidden',
+        },
       }}
     >
       {tabs.map((tab) => (
@@ -113,7 +117,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
           name={tab.key}
           component={tab.screenComponent}
           options={{
-            tabBarButton: ({ onPress }) => (
+            tabBarButton: ({ onPress }: any) => (
               <TabBarButton
                 tab={tab}
                 isActive={tab.key === activeTab}
@@ -122,7 +126,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
                 onTabPress={onTabPress}
                 setActiveTab={setActiveTab}
               />
-            )
+            ),
           }}
         />
       ))}
@@ -136,18 +140,18 @@ const styles = StyleSheet.create({
   tabItem: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   pressable: {
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: scale(10),
     paddingVertical: scale(4),
-    borderRadius: scale(30)
+    borderRadius: scale(30),
   },
   label: {
     marginTop: scale(4),
     fontSize: RFValue(10),
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });

package/src/components/TabBar/index.ts

@@ -10,7 +10,7 @@ import TabBarThree from './Three';
 const TabBar = {
   One: TabBarOne,
   Two: TabBarTwo,
-  Three: TabBarThree
+  Three: TabBarThree,
 };
 
 export type { TabBarOneProps } from './One';

package/src/components/Text/Text.tsx

@@ -4,7 +4,11 @@
  */
 
 import React from 'react';
-import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';
+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';
 
@@ -44,9 +48,9 @@ const Text: React.FC<TextProps> = ({
           fontSize: RFValue(size),
           fontWeight: weight,
           textAlign: align,
-          fontFamily
+          fontFamily,
         },
-        style
+        style,
       ]}
     >
       {children}