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

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -3,7 +3,12 @@
  * @LastModified Mon 30 Jun 2025 at 11:30 PM
  */
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { View, TouchableOpacity, StyleSheet, type AccessibilityProps } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  type AccessibilityProps,
+} from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { scale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
@@ -35,7 +40,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
   skeletonCount = 3,
   accessibilityLabel = 'Full Width Slider',
   accessibilityHint = 'Swipe to view content',
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
@@ -96,7 +101,11 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
             highlightColor={appliedTheme.colors.skeletonHighlightColor}
             speed={2000}
           >
-            <SkeletonPlaceholder.Item width={scale(18)} height={scale(8)} borderRadius={scale(50)} />
+            <SkeletonPlaceholder.Item
+              width={scale(18)}
+              height={scale(8)}
+              borderRadius={scale(50)}
+            />
           </SkeletonPlaceholder>
         ) : i === activeIndex ? (
           <LinearGradient
@@ -106,7 +115,12 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
             style={styles.activeIndicator}
           />
         ) : (
-          <View style={[styles.inactiveIndicator, { backgroundColor: appliedTheme.colors.onSurface }]} />
+          <View
+            style={[
+              styles.inactiveIndicator,
+              { backgroundColor: appliedTheme.colors.onSurface },
+            ]}
+          />
         )}
       </View>
     ),
@@ -116,7 +130,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
       appliedTheme.colors.skeletonHighlightColor,
       appliedTheme.colors.onSurface,
       activeIndex,
-      gradientColors
+      gradientColors,
     ]
   );
 
@@ -129,7 +143,11 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
   }
 
   return (
-    <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+    <View
+      style={styles.container}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
       <Carousel
         width={FULL_WIDTH}
         height={FULL_HEIGHT}
@@ -137,13 +155,21 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
         loop={!isLoading && contentData.length > 1}
         scrollAnimationDuration={1000}
         autoPlayInterval={3000}
-        data={isLoading ? (Array.from({ length: skeletonCount }) as IContentData[]) : contentData}
+        data={
+          isLoading
+            ? (Array.from({ length: skeletonCount }) as IContentData[])
+            : contentData
+        }
         renderItem={isLoading ? renderSkeletonItem : renderCarouselItem}
         onSnapToItem={handleSnapToItem}
-        onConfigurePanGesture={(gesture: any) => gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])}
+        onConfigurePanGesture={(gesture: any) =>
+          gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
+        }
       />
       <View style={styles.indicatorContainer}>
-        <View style={styles.indicator}>{Array.from({ length: contentData.length }, renderIndicator)}</View>
+        <View style={styles.indicator}>
+          {Array.from({ length: contentData.length }, renderIndicator)}
+        </View>
       </View>
     </View>
   );
@@ -152,14 +178,14 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginVertical: verticalScale(6)
+    marginVertical: verticalScale(6),
   },
   itemWrapper: {
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   image: {
     width: FULL_WIDTH,
-    height: FULL_HEIGHT
+    height: FULL_HEIGHT,
   },
   gradientBottomOverlay: {
     position: 'absolute',
@@ -167,44 +193,44 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     height: verticalScale(120),
-    zIndex: 2
+    zIndex: 2,
   },
   indicatorContainer: {
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    marginTop: verticalScale(10)
+    marginTop: verticalScale(10),
   },
   indicator: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(6)
+    gap: scale(6),
   },
   indicatorWrapper: {
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   activeIndicator: {
     width: scale(18),
     height: scale(8),
-    borderRadius: scale(50)
+    borderRadius: scale(50),
   },
   inactiveIndicator: {
     width: scale(8),
     height: scale(8),
-    borderRadius: scale(50)
+    borderRadius: scale(50),
   },
   emptyState: {
     padding: scale(12),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   emptyText: {
     fontSize: RFValue(13),
     fontWeight: '500',
     color: '#fff',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });
 
 export default memo(SliderTwo);

package/src/components/Content/Card/Sliders/index.ts

@@ -8,8 +8,8 @@ import SliderTwo from './Styles/Two';
 const Sliders = {
   Styles: {
     One: SliderOne,
-    Two: SliderTwo
-  }
+    Two: SliderTwo,
+  },
 };
 
 export default Sliders;

package/src/components/Content/Card/Styles/Five.tsx

@@ -14,7 +14,7 @@ import {
   type ViewStyle,
   type TextStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
@@ -25,7 +25,12 @@ import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import { useTheme } from '../../../../theme/hook/useTheme';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 const DEFAULT_ITEM_WIDTH = moderateScale(140);
@@ -45,7 +50,10 @@ type MovieCardFiveProps = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
   itemWidth?: number;
   borderRadius?: number;
   skeletonCount?: number;
@@ -73,7 +81,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
   itemStyle,
   isLoading = false,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const flatListRef = useRef<FlatList<IContentData>>(null);
@@ -87,16 +95,28 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
     data,
     pagination,
     loading: isPaginating,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
-  const handleItemPress = useCallback((item: IContentData) => onPressItem?.(item), [onPressItem]);
+    loadMoreData,
+  } = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data,
+    isLoading
+  );
+  const handleItemPress = useCallback(
+    (item: IContentData) => onPressItem?.(item),
+    [onPressItem]
+  );
 
   const handlePressMore = useCallback(() => {
     onPressMore?.({ section_id, name: title, type });
   }, [onPressMore, section_id, title, type]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(pagination.nextPage);
     }
@@ -105,7 +125,11 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
   const renderItem = useCallback(
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
-        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.8}
+        >
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
@@ -121,7 +145,16 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
         </TouchableOpacity>
       );
     },
-    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+    [
+      styles.item,
+      styles.image,
+      itemStyle,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      isLoading,
+      handleItemPress,
+    ]
   );
   if (!initialData) {
     return null;
@@ -165,9 +198,13 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
             />
           </SkeletonPlaceholder>
 
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.skeletonList}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.skeletonList}
+          >
             {Array.from({
-              length: isPaginating ? 1 : skeletonCount
+              length: isPaginating ? 1 : skeletonCount,
             }).map((_, index) => renderSkeletonItem({ index }))}
           </ScrollView>
         </>
@@ -176,7 +213,11 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
           <NavigateToMore
             title={title}
             onPress={handlePressMore}
-            titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+            titleStyle={[
+              styles.title,
+              { color: appliedTheme.colors.textPrimary },
+              titleStyle,
+            ]}
             containerStyle={styles.navigateToMoreContainer}
             showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
           />
@@ -197,7 +238,9 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
             onMomentumScrollBegin={() => {
               onEndReachedCalledDuringMomentum.current = false;
             }}
-            ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
+            ListFooterComponent={
+              isPaginating ? renderSkeletonItem({ index: 0 }) : null
+            }
           />
         </>
       )}
@@ -208,34 +251,34 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
 const getStyles = (theme: ITheme, width: number, radius: number) =>
   StyleSheet.create({
     root: {
-      marginVertical: verticalScale(6)
+      marginVertical: verticalScale(6),
     },
     item: {
       marginLeft: moderateScale(10),
-      marginBottom: verticalScale(2)
+      marginBottom: verticalScale(2),
     },
     image: {
       width,
       aspectRatio: 0.67,
       borderRadius: radius,
-      backgroundColor: theme.colors.surfaceVariant
+      backgroundColor: theme.colors.surfaceVariant,
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
-      marginBottom: verticalScale(8)
+      marginBottom: verticalScale(8),
     },
     title: {
       fontSize: RFValue(13),
-      fontWeight: '600'
+      fontWeight: '600',
     },
     listContent: {
-      paddingRight: moderateScale(15)
+      paddingRight: moderateScale(15),
     },
     skeletonList: {
       flexDirection: 'row',
       alignItems: 'flex-start',
-      paddingRight: moderateScale(15)
-    }
+      paddingRight: moderateScale(15),
+    },
   });
 
 export default memo(MovieCardFive);

package/src/components/Content/Card/Styles/Four.tsx

@@ -14,7 +14,7 @@ import {
   type TextStyle,
   type ViewStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
@@ -23,7 +23,12 @@ import NavigateToMore from '../components/NavigateToMore';
 import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 import FastImage from 'react-native-fast-image';
-import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type {
+  IContentData,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
@@ -45,7 +50,10 @@ type MovieCardFourProps = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
   itemWidth?: number;
   itemHeight?: number;
   borderRadius?: number;
@@ -76,7 +84,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
   isLoading = false,
   theme,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
@@ -91,17 +99,29 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
     data,
     pagination,
     loading: isPaginating,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+    loadMoreData,
+  } = usePaginatedSection(
+    section_id,
+    moreFetchData,
+    initialData?.data || [],
+    isLoading
+  );
 
-  const handleItemPress = useCallback((item: IContentData) => onPressItem?.(item), [onPressItem]);
+  const handleItemPress = useCallback(
+    (item: IContentData) => onPressItem?.(item),
+    [onPressItem]
+  );
 
   const handlePressMore = useCallback(() => {
     onPressMore?.({ section_id, name: title, type });
   }, [onPressMore, section_id, title, type]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+    if (
+      !onEndReachedCalledDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage
+    ) {
       onEndReachedCalledDuringMomentum.current = true;
       loadMoreData(pagination.nextPage);
     }
@@ -110,7 +130,11 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
   const renderItem = useCallback(
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
-        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.8}
+        >
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
@@ -126,7 +150,16 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
         </TouchableOpacity>
       );
     },
-    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+    [
+      styles.item,
+      styles.image,
+      itemStyle,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      isLoading,
+      handleItemPress,
+    ]
   );
 
   const renderSkeletonItem = ({ index }: { index: number }) => (
@@ -169,10 +202,16 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
               marginBottom={verticalScale(6)}
             />
           </SkeletonPlaceholder>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.skeletonList}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.skeletonList}
+          >
             {skeletonCount > 0 && (
               <View style={styles.skeletonList}>
-                {Array.from({ length: skeletonCount }).map((_, index) => renderSkeletonItem({ index }))}
+                {Array.from({ length: skeletonCount }).map((_, index) =>
+                  renderSkeletonItem({ index })
+                )}
               </View>
             )}
           </ScrollView>
@@ -182,7 +221,11 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
           <NavigateToMore
             title={title}
             onPress={handlePressMore}
-            titleStyle={[styles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+            titleStyle={[
+              styles.title,
+              { color: appliedTheme.colors.textPrimary },
+              titleStyle,
+            ]}
             containerStyle={styles.navigateToMoreContainer}
             showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
           />
@@ -203,7 +246,9 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             onMomentumScrollBegin={() => {
               onEndReachedCalledDuringMomentum.current = false;
             }}
-            ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
+            ListFooterComponent={
+              isPaginating ? renderSkeletonItem({ index: 0 }) : null
+            }
           />
         </>
       )}
@@ -211,36 +256,41 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
   );
 };
 
-const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
+const getStyles = (
+  theme: ITheme,
+  width: number,
+  height: number,
+  radius: number
+) =>
   StyleSheet.create({
     root: {
-      marginVertical: verticalScale(6)
+      marginVertical: verticalScale(6),
     },
     item: {
-      marginLeft: moderateScale(10)
+      marginLeft: moderateScale(10),
     },
     image: {
       width,
       height,
       borderRadius: radius,
-      backgroundColor: theme.colors.surfaceVariant
+      backgroundColor: theme.colors.surfaceVariant,
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
-      marginBottom: verticalScale(8)
+      marginBottom: verticalScale(8),
     },
     title: {
       fontSize: RFValue(13),
-      fontWeight: '600'
+      fontWeight: '600',
     },
     listContent: {
-      paddingRight: moderateScale(12)
+      paddingRight: moderateScale(12),
     },
     skeletonList: {
       flexDirection: 'row',
       alignItems: 'flex-start',
-      paddingRight: moderateScale(15)
-    }
+      paddingRight: moderateScale(15),
+    },
   });
 
 export default memo(MovieCardFour);