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

package/src/components/Content/Card/NowWatching/NowWatching.tsx

@@ -22,11 +22,12 @@ import { Play } from 'lucide-react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import type { IContentData, IGetSectionData, MoreFetchData } from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import { Text } from '../../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface IHistoryItem {
   _id: string;
@@ -107,7 +108,6 @@ const NowWatchingItem = memo(
       () => getStyles(appliedTheme, itemWidth, borderRadius),
       [appliedTheme, itemWidth, borderRadius]
     );
-
     return (
       <TouchableOpacity
         style={[styles.item, itemStyle, index === 0 && styles.firstItem, isLast && { marginRight: moderateScale(12) }]}
@@ -118,7 +118,14 @@ const NowWatchingItem = memo(
           {renderItemImage ? (
             renderItemImage({ item: item.content, index })
           ) : (
-            <FastImage source={{ uri: item.content?.thumbnail }} style={styles.poster}>
+            <FastImage
+              source={{
+                uri: item.content?.thumbnail || item.content?.poster,
+                cache: FastImage.cacheControl.immutable,
+                priority: FastImage.priority.normal
+              }}
+              style={styles.poster}
+            >
               <LinearGradient
                 colors={['rgba(0,0,0,0.95)', 'transparent']}
                 start={{ x: 0, y: 1 }}
@@ -314,14 +321,14 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
       marginRight: moderateScale(12)
     },
     firstItem: {
-      marginLeft: moderateScale(12)
+      marginLeft: moderateScale(10)
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(12),
+      paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600'
     },
     cardWrapper: {
@@ -362,11 +369,11 @@ const getStyles = (theme: ITheme, itemWidth: number, borderRadius: number) =>
     titleText: {
       color: theme.colors.textPrimary,
       fontWeight: '600',
-      fontSize: moderateScale(12)
+      fontSize: RFValue(11)
     },
     subTitleText: {
       color: theme.colors.textSecondary,
-      fontSize: moderateScale(11),
+      fontSize: RFValue(10),
       opacity: 0.85,
       marginTop: verticalScale(2)
     },

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

@@ -12,10 +12,11 @@ import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { Play } from 'lucide-react-native';
 import { Text } from '../../../../Text';
-import { useTheme } from '../../../../../theme/ThemeProvider';
 import Display from '../../../../../utils/Display';
 import type { IContentData, ISectionContent } from '../../../../../types';
 import type { AppTheme } from '../../../../../theme/themes';
+import { useTheme } from '../../../../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
 const DEFAULT_SKELETON_COUNT = 3;
@@ -275,7 +276,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   playText: {
-    fontSize: scale(16),
+    fontSize: RFValue(15),
     fontWeight: 'bold',
     maxWidth: scale(220)
   },
@@ -310,7 +311,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   emptyText: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     fontWeight: '500',
     color: '#fff',
     textAlign: 'center'

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

@@ -10,11 +10,12 @@ import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { Text } from '../../../../Text';
-import { useTheme } from '../../../../../theme/ThemeProvider';
+import { useTheme } from '../../../../../theme/hook/useTheme';
 import Display from '../../../../../utils/Display';
 import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { IContentData, ISectionContent } from '../../../../../types';
 import type { AppTheme } from '../../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
@@ -199,7 +200,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   emptyText: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     fontWeight: '500',
     color: '#fff',
     textAlign: 'center'

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

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

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

@@ -23,9 +23,10 @@ import FastImage from 'react-native-fast-image';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const DEFAULT_ITEM_WIDTH = moderateScale(140);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
@@ -114,13 +115,13 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
       );
     },
-    [renderItemImage, styles.item, styles.image, itemStyle, appliedTheme, borderRadius, isPaginating, handleItemPress]
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
   );
   if (!initialData) {
     return null;
@@ -210,7 +211,7 @@ const getStyles = (theme: ITheme, width: number, radius: number) =>
       marginVertical: verticalScale(6)
     },
     item: {
-      marginLeft: moderateScale(12),
+      marginLeft: moderateScale(10),
       marginBottom: verticalScale(2)
     },
     image: {
@@ -220,11 +221,11 @@ const getStyles = (theme: ITheme, width: number, radius: number) =>
       backgroundColor: theme.colors.surfaceVariant
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(12),
+      paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600'
     },
     listContent: {

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

@@ -20,11 +20,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import NavigateToMore from '../components/NavigateToMore';
-import { useTheme } from '../../../../theme';
+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 { AppTheme, ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // default values
 const DEFAULT_ITEM_WIDTH = moderateScale(100);
@@ -119,13 +120,13 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
       );
     },
-    [renderItemImage, styles.item, styles.image, itemStyle, appliedTheme, borderRadius, isPaginating, handleItemPress]
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
   );
 
   const renderSkeletonItem = ({ index }: { index: number }) => (
@@ -216,7 +217,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       marginVertical: verticalScale(6)
     },
     item: {
-      marginLeft: moderateScale(12)
+      marginLeft: moderateScale(10)
     },
     image: {
       width,
@@ -225,11 +226,11 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       backgroundColor: theme.colors.surfaceVariant
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(12),
+      paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600'
     },
     listContent: {

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

@@ -13,21 +13,21 @@ import {
   type ViewStyle,
   type TextStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo,
-  type ListRenderItem
+  type ListRenderItemInfo
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
-import type { AppTheme } from '../../../../theme/themes';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
-const DEFAULT_ITEM_WIDTH = moderateScale(110);
+const DEFAULT_ITEM_WIDTH = moderateScale(105);
 const DEFAULT_ITEM_HEIGHT = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(6);
 const DEFAULT_SKELETON_COUNT = 5;
@@ -80,6 +80,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const { theme: appliedTheme } = useTheme(theme);
+
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
@@ -87,46 +88,28 @@ const MovieCard: React.FC<MovieCardProps> = ({
 
   const {
     data,
-    pagination: paginated,
+    pagination,
     loading: isPaginating,
     loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
-
-  const listData = useMemo(() => data ?? [], [data]);
+  } = 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(() => {
-    return onPressMore?.({
-      section_id,
-      name: title,
-      type
-    });
+    onPressMore?.({ section_id, name: title, type });
   }, [onPressMore, section_id, title, type]);
 
   const handleEndReached = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current && paginated?.hasNextPage && paginated?.nextPage) {
+    if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(paginated.nextPage);
+      loadMoreData(pagination.nextPage);
     }
-  }, [loadMoreData, paginated?.hasNextPage, paginated?.nextPage]);
+  }, [loadMoreData, pagination]);
 
   const renderItem = useCallback(
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
-        <TouchableOpacity
-          style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
-          testID={`movie-card-item-${index}`}
-          accessibilityLabel={`Movie ${item.name || 'item'} ${index + 1}`}
-          accessibilityHint="Press to view movie details"
-        >
+        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
@@ -136,49 +119,34 @@ const MovieCard: React.FC<MovieCardProps> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
       );
     },
-    [
-      renderItemImage,
-      styles.item,
-      styles.firstItem,
-      styles.image,
-      itemStyle,
-      appliedTheme,
-      borderRadius,
-      isPaginating,
-      handleItemPress
-    ]
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
   );
 
-  const renderSkeletonItem: ListRenderItem<null> = useCallback(
-    ({ index }) => (
-      <SkeletonPlaceholder
-        key={`skeleton-${index}`}
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-      >
-        <SkeletonPlaceholder.Item
-          width={itemWidth}
-          height={itemHeight}
-          borderRadius={borderRadius}
-          marginRight={moderateScale(12)}
-          marginLeft={index === 0 ? moderateScale(12) : 0}
-        />
-      </SkeletonPlaceholder>
-    ),
-    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  const renderSkeletonItem = ({ index }: { index: number }) => (
+    <SkeletonPlaceholder
+      key={`skeleton-${index}`}
+      highlightColor={appliedTheme.colors.skeletonHighlightColor}
+      backgroundColor={appliedTheme.colors.skeletonBaseColor}
+    >
+      <SkeletonPlaceholder.Item
+        width={itemWidth}
+        height={itemHeight}
+        borderRadius={borderRadius}
+        marginLeft={index === 0 ? moderateScale(12) : 0}
+        marginRight={moderateScale(12)}
+      />
+    </SkeletonPlaceholder>
   );
   if (!initialData) {
     return null;
   }
-  if (!isLoading && listData.length === 0) {
-    return null;
-  }
+  if (!isLoading && data.length === 0) return null;
 
   if (isLoading) {
     return (
@@ -223,86 +191,51 @@ const MovieCard: React.FC<MovieCardProps> = ({
       />
       <FlatList
         ref={flatListRef}
-        data={listData}
+        data={data}
         horizontal
-        showsHorizontalScrollIndicator={false}
-        keyExtractor={(item, index) => `${item._id ?? item.name}-${index}`}
+        keyExtractor={(item, index) => `${item._id}-${index}`}
         renderItem={renderItem}
+        showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.listContent}
         initialNumToRender={5}
-        maxToRenderPerBatch={10}
-        windowSize={5}
+        onEndReached={handleEndReached}
         onEndReachedThreshold={0.5}
+        onScrollBeginDrag={() => {
+          onEndReachedCalledDuringMomentum.current = false;
+        }}
         onMomentumScrollBegin={() => {
           onEndReachedCalledDuringMomentum.current = false;
         }}
-        onEndReached={handleEndReached}
-        ListFooterComponent={
-          isPaginating ? (
-            <SkeletonPlaceholder
-              highlightColor={appliedTheme.colors.skeletonHighlightColor}
-              backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            >
-              <SkeletonPlaceholder.Item
-                width={itemWidth}
-                height={itemHeight}
-                borderRadius={borderRadius}
-                marginRight={moderateScale(12)}
-              />
-            </SkeletonPlaceholder>
-          ) : null
-        }
+        ListFooterComponent={isPaginating ? renderSkeletonItem({ index: 0 }) : null}
       />
     </View>
   );
 };
 
-const getStyles = (theme: AppTheme, width: number, height: number, radius: number) =>
+const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
   StyleSheet.create({
     root: {
       marginVertical: verticalScale(6)
     },
     item: {
-      marginRight: moderateScale(12),
-      borderRadius: radius,
-      overflow: 'hidden',
-      backgroundColor: theme.colors?.surfaceVariant ?? '#2c2c2c',
-      elevation: 2,
-      shadowColor: theme.colors?.shadow ?? '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 4
-    },
-    firstItem: {
-      marginLeft: moderateScale(12)
+      marginLeft: moderateScale(10)
     },
     image: {
       width,
       height,
       borderRadius: radius,
-      backgroundColor: theme.colors?.surfaceVariant ?? '#222'
+      backgroundColor: theme.colors.surfaceVariant
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(12),
+      paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600'
     },
     listContent: {
       paddingRight: moderateScale(15)
-    },
-    emptyState: {
-      padding: moderateScale(12),
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    emptyText: {
-      color: theme.colors?.textPrimary ?? '#fff',
-      fontSize: moderateScale(14),
-      fontWeight: '500',
-      textAlign: 'center'
     }
   });
 

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

@@ -19,13 +19,14 @@ import Carousel from 'react-native-snap-carousel';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { debounce } from 'lodash';
 
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
 import type { AppTheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
 
@@ -39,11 +40,11 @@ const staticStyles = StyleSheet.create({
     marginVertical: verticalScale(6)
   },
   navigateToMoreContainer: {
-    paddingHorizontal: moderateScale(12),
+    paddingHorizontal: moderateScale(10),
     marginBottom: verticalScale(8)
   },
   title: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     fontWeight: '600',
     marginHorizontal: moderateScale(15),
     marginVertical: moderateScale(5)
@@ -205,7 +206,7 @@ const RotateCarousel: React.FC<Props> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
@@ -221,7 +222,6 @@ const RotateCarousel: React.FC<Props> = ({
       renderItemImage,
       appliedTheme,
       borderRadius,
-      isPaginating,
       itemWidth,
       itemHeight,
       handleItemPress

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

@@ -20,13 +20,14 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
 
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { ThumbnailCard } from '../components/ThumbnailCard';
 import { Text } from '../../../Text';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { AppTheme } from '../../../../theme/themes';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
@@ -128,6 +129,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
         key={`skeleton-${index}`}
         highlightColor={appliedTheme.colors.skeletonHighlightColor}
         backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        borderRadius={borderRadius}
       >
         <SkeletonPlaceholder.Item
           flexDirection="column"
@@ -218,18 +220,18 @@ const styles = StyleSheet.create({
     marginVertical: verticalScale(6)
   },
   item: {
-    marginLeft: moderateScale(12)
+    marginLeft: moderateScale(10)
   },
   navigateToMoreContainer: {
-    paddingHorizontal: moderateScale(12),
+    paddingHorizontal: moderateScale(10),
     marginBottom: verticalScale(8)
   },
   title: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     fontWeight: '600'
   },
   itemTitle: {
-    fontSize: moderateScale(10),
+    fontSize: RFValue(9),
     fontWeight: '500',
     lineHeight: moderateScale(13),
     height: moderateScale(13)

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

@@ -21,11 +21,12 @@ import { debounce } from 'lodash';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
 import type { AppTheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
 
@@ -39,11 +40,11 @@ const staticStyles = StyleSheet.create({
     marginVertical: verticalScale(6)
   },
   navigateToMoreContainer: {
-    paddingHorizontal: moderateScale(12),
+    paddingHorizontal: moderateScale(10),
     marginBottom: verticalScale(8)
   },
   title: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     fontWeight: '600',
     marginHorizontal: moderateScale(15),
     marginVertical: moderateScale(5)
@@ -206,7 +207,7 @@ const MovieCardThree: React.FC<Props> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
@@ -222,7 +223,6 @@ const MovieCardThree: React.FC<Props> = ({
       renderItemImage,
       appliedTheme,
       borderRadius,
-      isPaginating,
       itemWidth,
       itemHeight,
       handleItemPress