@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.5

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

@@ -4,11 +4,13 @@
  */
 import SliderOne from './Styles/One';
 import SliderTwo from './Styles/Two';
+import SliderThree from './Styles/Three';
 
 const Sliders = {
   Styles: {
     One: SliderOne,
     Two: SliderTwo,
+    Three: SliderThree,
   },
 };
 

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

@@ -221,6 +221,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
           ) : (
             <CardPoster
               content_offering_type={contentItem.content_offering_type}
+              contentType={contentItem.type}
               posterUri={contentItem.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

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

@@ -216,6 +216,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
           <CardPoster
             posterUri={contentItem.poster}
             content_offering_type={contentItem.content_offering_type}
+            contentType={contentItem.type}
             theme={appliedTheme}
             borderRadius={borderRadius}
             posterWrapperStyle={styles.image}

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

@@ -220,6 +220,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
             <CardPoster
               posterUri={contentItem.poster}
               content_offering_type={contentItem.content_offering_type}
+              contentType={contentItem.type}
               theme={appliedTheme}
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}

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

@@ -310,6 +310,7 @@ const RotateCarousel: React.FC<Props> = ({
           ) : (
             <CardPoster
               content_offering_type={contentItem.content_offering_type}
+              contentType={contentItem.type}
               posterUri={contentItem.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

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

@@ -14,7 +14,6 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import Carousel from 'react-native-snap-carousel';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
@@ -39,24 +38,11 @@ import { useCards } from '../../../../hooks';
 
 // Constants
 const { width, height } = Dimensions.get('window');
-const ITEM_WIDTH_RATIO = 0.42;
-const ITEM_HEIGHT_RATIO = 0.28;
-const DEFAULT_ITEM_WIDTH = width * ITEM_WIDTH_RATIO;
-const DEFAULT_ITEM_HEIGHT = height * ITEM_HEIGHT_RATIO;
+const DEFAULT_ITEM_WIDTH = width * 0.4;
+const DEFAULT_ITEM_HEIGHT = height * 0.28;
 const DEFAULT_BORDER_RADIUS = moderateScale(10);
 const DEFAULT_SKELETON_COUNT = 5;
 const DEBOUNCE_DELAY = 300;
-const ITEM_ACTIVE_OPACITY = 0.8;
-const CAROUSEL_FIRST_ITEM = 1;
-const CAROUSEL_INACTIVE_OPACITY = 0.6;
-const CAROUSEL_INACTIVE_SCALE = 0.9;
-const PAGINATION_TRIGGER_OFFSET = 2;
-const SKELETON_TITLE_WIDTH = moderateScale(100);
-const SKELETON_TITLE_HEIGHT = verticalScale(14);
-const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
-const SKELETON_TITLE_MARGIN_LEFT = moderateScale(12);
-const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
-const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
 
 // Static Styles
 const staticStyles = StyleSheet.create({
@@ -70,8 +56,6 @@ const staticStyles = StyleSheet.create({
   title: {
     fontSize: RFValue(13),
     fontWeight: '600',
-    marginHorizontal: moderateScale(15),
-    marginVertical: moderateScale(5),
   },
 });
 
@@ -125,7 +109,7 @@ const MovieCardThree: React.FC<Props> = ({
   containerStyle,
   titleStyle,
   itemStyle,
-  isLoading = false,
+  isLoading = true,
   theme,
   onDisplayAds,
   screenDimensions,
@@ -152,13 +136,6 @@ const MovieCardThree: React.FC<Props> = ({
           height: '100%',
           backgroundColor: appliedTheme.colors.surfaceVariant,
         },
-        skeleton: {
-          width: itemWidth,
-          height: itemHeight,
-          borderRadius,
-          marginRight: SKELETON_ITEM_MARGIN_RIGHT,
-          overflow: 'hidden',
-        },
       }),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
   );
@@ -224,7 +201,7 @@ const MovieCardThree: React.FC<Props> = ({
     (index: number) => {
       // Pagination logic
       if (!pagination?.hasNextPage || !pagination?.nextPage) return;
-      if (index >= finalData.length - PAGINATION_TRIGGER_OFFSET) {
+      if (index >= finalData.length - 2) {
         debouncedLoadMore(pagination.nextPage);
       }
     },
@@ -263,7 +240,7 @@ const MovieCardThree: React.FC<Props> = ({
       return (
         <TouchableOpacity
           style={[styles.item, itemStyle]}
-          activeOpacity={ITEM_ACTIVE_OPACITY}
+          activeOpacity={0.8}
           onPress={() => {
             if (!isSkeleton && !isLoading) {
               onPressItem?.(contentItem);
@@ -273,6 +250,7 @@ const MovieCardThree: React.FC<Props> = ({
           <CardPoster
             posterUri={item.poster}
             content_offering_type={item.content_offering_type}
+            contentType={item.type}
             theme={appliedTheme}
             borderRadius={borderRadius}
             posterWrapperStyle={styles.image}
@@ -304,42 +282,29 @@ const MovieCardThree: React.FC<Props> = ({
   // Main Render
   return (
     <View style={[staticStyles.root, containerStyle]}>
-      {isLoading ? (
-        <SkeletonPlaceholder
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        >
-          <SkeletonPlaceholder.Item
-            width={SKELETON_TITLE_WIDTH}
-            height={SKELETON_TITLE_HEIGHT}
-            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
-            marginLeft={SKELETON_TITLE_MARGIN_LEFT}
-            marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
-          />
-        </SkeletonPlaceholder>
-      ) : (
-        <NavigateToMore
-          title={title}
-          onPress={handlePressMore}
-          titleStyle={[
-            staticStyles.title,
-            { color: appliedTheme.colors.textPrimary },
-            titleStyle,
-          ]}
-          containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-        />
-      )}
+      <NavigateToMore
+        title={title}
+        onPress={handlePressMore}
+        titleStyle={[
+          staticStyles.title,
+          { color: appliedTheme.colors.textPrimary },
+          titleStyle,
+        ]}
+        containerStyle={staticStyles.navigateToMoreContainer}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
+        isLoading={isLoading}
+        theme={theme}
+      />
 
       <Carousel
         ref={carouselRef}
         data={finalData as IContentData[]}
         renderItem={renderItem}
-        firstItem={CAROUSEL_FIRST_ITEM}
+        firstItem={1}
         sliderWidth={width}
         itemWidth={itemWidth}
-        inactiveSlideOpacity={CAROUSEL_INACTIVE_OPACITY}
-        inactiveSlideScale={CAROUSEL_INACTIVE_SCALE}
+        inactiveSlideOpacity={0.6}
+        inactiveSlideScale={0.9}
         onSnapToItem={handleSnapToItem}
       />
     </View>

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

@@ -242,6 +242,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
         >
           <CardPoster
             content_offering_type={item.content_offering_type}
+            contentType={item.type}
             posterUri={item.poster}
             isLoading={isLoading}
             borderRadius={borderRadius}

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

@@ -229,6 +229,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
             <CardPoster
               posterUri={contentItem.poster}
               content_offering_type={contentItem.content_offering_type}
+              contentType={contentItem.type}
               theme={appliedTheme}
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}

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

@@ -19,6 +19,7 @@ import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 import { useImageLoader } from '../../../../hooks';
 import LinearGradient from 'react-native-linear-gradient';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { convertColorWithOpacity } from '../../../../utils/colorUtils';
 
 // Rank number styling constants
 const RANK_NUMBER_SIZE = scale(40);
@@ -29,8 +30,12 @@ const RANK_NUMBER_TEXT_MARGIN_RIGHT = scale(6);
 const GRADIENT_START = { x: 1, y: 0.5 };
 const GRADIENT_END = { x: 0.5, y: 1 };
 
+// Vertical badge styling constants
+const VERTICAL_BADGE_TEXT_SIZE = RFValue(7.5);
+
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
+  contentType?: IContentData['type'];
   posterUri: string;
   theme: ITheme;
   isLoading?: boolean;
@@ -45,16 +50,29 @@ export type CardPosterProps = {
 // ----------------------------------
 // Image Fallback
 // ----------------------------------
-const ImageFallback = React.memo(({ errorColor, bg }: any) => (
-  <View style={[styles.absolute, styles.center, { backgroundColor: bg }]}>
+type ImageFallbackProps = {
+  errorColor: string;
+  bg: string;
+};
+
+const ImageFallback = React.memo<ImageFallbackProps>(({ errorColor, bg }) => (
+  <View
+    style={[styles.absolute, styles.center, { backgroundColor: bg }]}
+    accessible
+    accessibilityRole="image"
+    accessibilityLabel="Image failed to load"
+  >
     <ImageOff size={scale(18)} color={errorColor} />
     <Text style={styles.fallbackText} color={errorColor}>
       Image Failed
     </Text>
   </View>
 ));
+
+ImageFallback.displayName = 'ImageFallback';
 const CardPoster: React.FC<CardPosterProps> = ({
   content_offering_type,
+  contentType,
   posterUri,
   theme,
   borderRadius = scale(6),
@@ -133,10 +151,35 @@ const CardPoster: React.FC<CardPosterProps> = ({
     [showSkeleton, imageLoading, imageStyle]
   );
 
+  // Check if content type is vertical
+  const isVerticalContent = useMemo(
+    () => contentType === 'VERTICAL_STREAM',
+    [contentType]
+  );
+
+  // Memoize vertical badge gradient colors using primary colors
+  const verticalBadgeColors = useMemo(() => {
+    const primary = theme.colors.primary;
+    const secondary = theme.colors.secondary || primary;
+
+    return [
+      convertColorWithOpacity(primary, 0.9),
+      convertColorWithOpacity(secondary, 0.9),
+    ];
+  }, [theme.colors.primary, theme.colors.secondary]);
+
+  // Derived visibility flags for clearer JSX conditions
+  const shouldShowRentOrBuyIcon =
+    !showSkeleton && !showFallback && !!content_offering_type;
+  const shouldShowVerticalBadge =
+    !showSkeleton && !showFallback && isVerticalContent;
+  const shouldShowFallback = !isLoading && !showSkeleton && showFallback;
+  const shouldShowRankNumber = !showSkeleton && !!showRankNumber;
+
   return (
     <View style={wrapperStyle}>
       {/* Rent/Buy */}
-      {!showSkeleton && !showFallback && content_offering_type && (
+      {shouldShowRentOrBuyIcon && (
         <RentOrBuyIcon
           key={posterUri}
           content_offering_type={content_offering_type}
@@ -144,6 +187,33 @@ const CardPoster: React.FC<CardPosterProps> = ({
         />
       )}
 
+      {/* Vertical Badge */}
+      {shouldShowVerticalBadge && (
+        <View
+          style={[
+            styles.verticalBadgeContainer,
+            showRankNumber && styles.verticalBadgeContainerRight,
+          ]}
+          accessible
+          accessibilityRole="text"
+          accessibilityLabel="Vertical video"
+        >
+          <LinearGradient
+            colors={verticalBadgeColors}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={[
+              styles.verticalBadge,
+              showRankNumber && styles.verticalBadgeRight,
+            ]}
+          >
+            <Text style={styles.verticalBadgeText} color="#FFFFFF">
+              VERTICAL
+            </Text>
+          </LinearGradient>
+        </View>
+      )}
+
       {/* Skeleton */}
       {showSkeleton && (
         <View style={[styles.absolute]}>
@@ -169,7 +239,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
       )}
 
       {/* Fallback */}
-      {!isLoading && !showSkeleton && showFallback && (
+      {shouldShowFallback && (
         <ImageFallback
           key={`${posterUri}-fallback`}
           errorColor={themeColors.error}
@@ -178,8 +248,17 @@ const CardPoster: React.FC<CardPosterProps> = ({
       )}
 
       {/* Rank Number */}
-      {!showSkeleton && showRankNumber && (
-        <View style={styles.numberContainer}>
+      {shouldShowRankNumber && (
+        <View
+          style={styles.numberContainer}
+          accessible
+          accessibilityRole="text"
+          accessibilityLabel={
+            typeof rankNumber === 'number'
+              ? `Rank ${rankNumber}`
+              : 'Rank number'
+          }
+        >
           <LinearGradient
             colors={theme.colors.backgroundLayoutGradient}
             start={GRADIENT_START}
@@ -255,4 +334,44 @@ const styles = StyleSheet.create({
     marginRight: RANK_NUMBER_TEXT_MARGIN_RIGHT,
     letterSpacing: 0.5,
   },
+  verticalBadgeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 15,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  verticalBadgeContainerRight: {
+    left: 'auto',
+    right: 0,
+    width: 'auto',
+  },
+  verticalBadge: {
+    width: '100%',
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(4),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 0,
+  },
+  verticalBadgeRight: {
+    width: 'auto',
+    paddingHorizontal: scale(10),
+    borderTopLeftRadius: scale(4),
+  },
+  verticalBadgeText: {
+    fontSize: VERTICAL_BADGE_TEXT_SIZE,
+    fontWeight: '700',
+    letterSpacing: scale(0.5),
+    textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+    includeFontPadding: false,
+  },
 });

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

@@ -11,10 +11,13 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import { verticalScale } from 'react-native-size-matters';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
 
 interface IProps {
   title: string;
@@ -22,6 +25,8 @@ interface IProps {
   titleStyle?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   showAllProps?: Partial<ShowAllButtonProps>;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
 }
 
 const NavigateToMore: React.FC<IProps> = ({
@@ -30,7 +35,30 @@ const NavigateToMore: React.FC<IProps> = ({
   titleStyle,
   containerStyle,
   showAllProps,
+  isLoading = false,
+  theme,
 }): React.ReactElement => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  if (isLoading) {
+    return (
+      <SkeletonPlaceholder
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <View style={[styles.container, containerStyle]}>
+          <View style={styles.titleWrapper}>
+            <SkeletonPlaceholder.Item
+              width={moderateScale(100)}
+              height={verticalScale(14)}
+              borderRadius={moderateScale(4)}
+            />
+          </View>
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.titleWrapper}>

package/src/components/Content/Content.tsx

@@ -8,27 +8,18 @@ import {
   Dimensions,
   FlatList,
   type FlatListProps,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type StyleProp,
-  type ViewStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import Animated, {
-  type AnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import SectionType from './Sections';
-import type { IAdItem, IGetSectionData, MoreFetchData } from '../../types';
+import type { IGetSectionData } from '../../types';
 import { dummySections } from '../../constants/dummySections';
-import CategoryCard, { type ICategory } from './Card/Category/Category';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ThemeOverride } from '../../theme/themes';
-import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
+import CategoryCard from './Card/Category/Category';
+import { NoContentFallback } from '../Fallbacks';
 import { useInternalTheme } from '../../theme/hook';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import type { IContentProps, FooterProps } from './types';
 
 // Constants
 const VIEWPORT_OFFSETS = {
@@ -45,75 +36,14 @@ const LOADER_PADDING_VERTICAL = 30;
 const CONTENT_PADDING_BOTTOM = 100;
 
 // Types
-export interface ICustomComponentsForContent {
-  type: string;
-  component: React.ReactElement;
-}
-
-export type IContentLoading = {
-  category?: boolean;
-  history?: boolean;
-  section?: boolean;
-  InfiniteScrollIsLoading?: boolean;
-};
-export interface IContentProps {
-  contentData: {
-    category?: ICategory[];
-    sectionData: IGetSectionData[] | null;
-    historyData?: IHistoryItem[];
-  };
-  customComponents?: ICustomComponentsForContent[];
-  LoaderComponent?: React.ReactNode;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  onScroll?:
-    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
-    | SharedValue<
-        ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined
-      >;
-  contentContainerStyle?:
-    | StyleProp<ViewStyle>
-    | AnimatedStyle<StyleProp<ViewStyle>>;
-  onEndReached?: () => void;
-  theme?: ThemeOverride;
-  autoSwitchTheme?: boolean;
-  events?: {
-    onPressItem?: (item: IContentData | IAdItem) => void;
-    onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
-      type: IGetSectionData['type'];
-    }) => void;
-    activeCategory?: ICategory;
-    onPressCategory?: (category: ICategory) => void;
-    onDisplayAds?: (ad: IServeAd) => void;
-  };
-
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  isLoading?: IContentLoading;
-
-  noContentFallbackProps?: NoContentFallbackProps;
-}
+// Re-export IContentLoading for backward compatibility
+export type { IContentLoading, IContentProps } from './types';
 
 // Animated Components
 const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
 );
 
-// Footer Component Types
-interface FooterProps {
-  isEmpty: boolean;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollIsLoading?: boolean;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  theme?: ThemeOverride;
-  noContentFallbackProps?: NoContentFallbackProps;
-}
-
 // Footer Component
 const ContentFooter = React.memo(
   ({
@@ -167,6 +97,8 @@ const ContentFooter = React.memo(
 
 // Main Content Component
 export const Content: React.FC<IContentProps> = ({
+  headerStyle = 'one',
+  customHeaderComponent,
   customComponents,
   InfiniteScrollLoaderComponent,
   LoaderComponent,
@@ -181,6 +113,7 @@ export const Content: React.FC<IContentProps> = ({
   moreFetchData,
   moreFetchDataHistory,
   isLoading,
+  checkWatchlistStatus,
   noContentFallbackProps,
 }) => {
   // Hooks
@@ -194,10 +127,10 @@ export const Content: React.FC<IContentProps> = ({
 
   const sectionDataMemo = useMemo(
     () => ({
-      historyData: contentData.historyData,
-      category: contentData.category,
+      historyData: contentData?.historyData,
+      category: headerStyle === 'three' ? [] : (contentData?.category ?? []),
     }),
-    [contentData.historyData, contentData.category]
+    [contentData?.historyData, contentData?.category, headerStyle]
   );
 
   const loadingStateMemo = useMemo(
@@ -212,8 +145,8 @@ export const Content: React.FC<IContentProps> = ({
   const screenDimensions = useMemo(() => Dimensions.get('window'), []);
 
   const listData = useMemo(
-    () => (isLoading?.section ? dummySections : sectionData),
-    [isLoading?.section, sectionData]
+    () => (isLoading?.section ? dummySections({ headerStyle }) : sectionData),
+    [isLoading?.section, sectionData, headerStyle]
   );
 
   const isEmpty = useMemo(
@@ -223,13 +156,14 @@ export const Content: React.FC<IContentProps> = ({
 
   // Header Component
   const headerComponent = useMemo(() => {
-    if (!contentData?.category || contentData.category.length === 0) {
+    const category = contentData?.category;
+    if (headerStyle === 'three' || !category || category.length === 0) {
       return null;
     }
 
     return (
       <CategoryCard
-        category={contentData.category}
+        category={category}
         onPressCategory={events?.onPressCategory}
         activeCategory={events?.activeCategory}
         isLoading={isLoading?.category}
@@ -244,6 +178,7 @@ export const Content: React.FC<IContentProps> = ({
     events?.activeCategory,
     isLoading?.category,
     theme,
+    headerStyle,
   ]);
 
   // Render Item Callback
@@ -272,6 +207,7 @@ export const Content: React.FC<IContentProps> = ({
           customComponents={customComponents}
           section_id={item?._id || index.toString()}
           events={events}
+          checkWatchlistStatus={checkWatchlistStatus}
           isLoading={{
             ...loadingStateMemo,
             section: isLoadingItem,
@@ -292,6 +228,7 @@ export const Content: React.FC<IContentProps> = ({
       theme,
       customComponents,
       events,
+      checkWatchlistStatus,
       loadingStateMemo,
       sectionProps,
       moreFetchDataHistory,
@@ -342,6 +279,14 @@ export const Content: React.FC<IContentProps> = ({
     ]
   );
 
+  // List Header Component - properly typed
+  const listHeaderComponent = useMemo(() => {
+    if (customHeaderComponent) {
+      return (<>{customHeaderComponent}</>) as React.ReactElement;
+    }
+    return headerComponent;
+  }, [customHeaderComponent, headerComponent]);
+
   return (
     <AnimatedFlatList
       data={listData}
@@ -354,7 +299,8 @@ export const Content: React.FC<IContentProps> = ({
       initialNumToRender={INITIAL_NUM_TO_RENDER}
       showsVerticalScrollIndicator={false}
       removeClippedSubviews
-      ListHeaderComponent={headerComponent}
+      ListHeaderComponent={listHeaderComponent}
+      bounces={false}
       ListFooterComponent={footerComponent}
       contentContainerStyle={contentContainerStyleMemo}
     />