@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.5

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

@@ -130,6 +130,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
     ({ item, index }: ListRenderItemInfo<IContentData>) => {
       return (
         <TouchableOpacity
+          key={item._id}
           style={[styles.item, itemStyle]}
           onPress={() => handleItemPress(item)}
           activeOpacity={0.8}
@@ -138,6 +139,8 @@ const MovieCard: React.FC<MovieCardProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              key={item._id}
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}
@@ -233,7 +236,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
         ref={flatListRef}
         data={data}
         horizontal
-        keyExtractor={(item, index) => `${item._id}-${index}`}
+        keyExtractor={(item, index) => (item._id ? item._id : `item-${index}`)}
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.listContent}
@@ -273,6 +276,9 @@ const getStyles = (
       borderRadius: radius,
       backgroundColor: theme.colors.surfaceVariant,
     },
+    imageWrapper: {
+      position: 'relative',
+    },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8),

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

@@ -229,6 +229,7 @@ const RotateCarousel: React.FC<Props> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

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

@@ -33,6 +33,7 @@ import type {
   MoreFetchData,
 } from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../components/RentOrBuyIcon';
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
@@ -123,6 +124,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
         onPress={() => handleItemPress(item)}
         activeOpacity={0.8}
       >
+        <RentOrBuyIcon content_offering_type={item.content_offering_type} />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}

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

@@ -230,6 +230,7 @@ const MovieCardThree: React.FC<Props> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

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

@@ -132,6 +132,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
             style={styles.imageOverlay}
           >
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               isLoading={isLoading}
               borderRadius={borderRadius}

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

@@ -144,6 +144,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

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

@@ -1,29 +1,30 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import type {
-  ImageStyle as FastImageStyle,
-  ImageStyle,
-  ResizeMode,
+import FastImage, {
+  type ResizeMode,
+  type ImageStyle,
 } from 'react-native-fast-image';
-import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '../../../../types';
+import RentOrBuyIcon from './RentOrBuyIcon';
 
 export type CardPosterProps = {
+  content_offering_type?: IContentData['content_offering_type'];
   posterUri: string;
   theme: ITheme;
   isLoading?: boolean;
   borderRadius?: number;
   posterWrapperStyle?: StyleProp<ViewStyle>;
-  imageStyle?: FastImageStyle;
+  imageStyle?: ImageStyle;
   resizeMode?: ResizeMode;
 };
 
 const CardPoster: React.FC<CardPosterProps> = ({
+  content_offering_type,
   posterUri,
   theme,
   isLoading = false,
@@ -37,7 +38,6 @@ const CardPoster: React.FC<CardPosterProps> = ({
 
   const hasValidPoster = useMemo(() => {
     if (!posterUri || typeof posterUri !== 'string') return false;
-
     const cleaned = posterUri.trim();
     return (
       (cleaned.startsWith('http://') || cleaned.startsWith('https://')) &&
@@ -75,21 +75,21 @@ const CardPoster: React.FC<CardPosterProps> = ({
     <View
       style={[
         styles.posterWrapper,
-        styles.defaultPosterWrapper,
-        {
-          borderRadius,
-          backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow,
-        },
+        { borderRadius, backgroundColor: theme.colors.background },
         posterWrapperStyle,
       ]}
     >
+      {!showSkeleton && content_offering_type && (
+        <RentOrBuyIcon
+          key={posterUri}
+          content_offering_type={content_offering_type}
+        />
+      )}
       {showSkeleton && (
         <View style={[styles.skeletonWrapper, { borderRadius }]}>
           <SkeletonPlaceholder
             backgroundColor={theme.colors.skeletonBaseColor}
             highlightColor={theme.colors.skeletonHighlightColor}
-            speed={1000}
           >
             <SkeletonPlaceholder.Item
               style={[styles.skeleton, { borderRadius }]}
@@ -97,7 +97,6 @@ const CardPoster: React.FC<CardPosterProps> = ({
           </SkeletonPlaceholder>
         </View>
       )}
-
       {hasValidPoster && (
         <FastImage
           source={{
@@ -112,24 +111,16 @@ const CardPoster: React.FC<CardPosterProps> = ({
           ]}
           resizeMode={resizeMode}
           onLoadStart={() => {
-            if (hasValidPoster) {
-              setImageLoading(true);
-              setImageError(false);
-            } else {
-              setImageLoading(false);
-              setImageError(true);
-            }
-          }}
-          onLoad={() => {
-            setImageLoading(false);
+            setImageLoading(true);
+            setImageError(false);
           }}
+          onLoad={() => setImageLoading(false)}
           onError={() => {
             setImageLoading(false);
             setImageError(true);
           }}
         />
       )}
-
       {!showSkeleton && (!hasValidPoster || imageError) && (
         <View
           style={[
@@ -144,9 +135,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
           <View
             style={[
               styles.fallback,
-              {
-                backgroundColor: theme.colors.errorContainer,
-              },
+              { backgroundColor: theme.colors.errorContainer },
             ]}
           >
             <ImageOff size={scale(18)} color={theme.colors.error} />
@@ -169,30 +158,16 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     position: 'relative',
   },
-  defaultPosterWrapper: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
-  },
   skeletonWrapper: {
     position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
     aspectRatio: 2 / 3,
-    overflow: 'hidden',
-  },
-  skeleton: {
-    width: '100%',
-    aspectRatio: 2 / 3,
-  },
-  visible: {
-    opacity: 1,
-  },
-  hidden: {
-    opacity: 0,
   },
+  skeleton: { width: '100%', aspectRatio: 2 / 3 },
+  visible: { opacity: 1 },
+  hidden: { opacity: 0 },
   fallbackWrapper: {
     position: 'absolute',
     top: 0,
@@ -212,8 +187,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  fallbackText: {
-    marginTop: scale(4),
-    fontSize: RFValue(9),
-  },
+  fallbackText: { marginTop: scale(4), fontSize: 10 },
 });

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { scale } from 'react-native-size-matters';
+import type { IContentData } from '../../../../types';
+import type { ITheme } from '../../../../theme/themes';
+
+interface RentOrBuyIconProps {
+  theme?: ITheme;
+  content_offering_type: IContentData['content_offering_type'];
+  position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  style?: StyleProp<ViewStyle>;
+  size?: number;
+}
+
+const PremiumIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
+  <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
+    <Path
+      transform="translate(507,81)"
+      d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
+      fill={fillColor}
+    />
+    <Path
+      transform="translate(785,818)"
+      d="M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z"
+      fill={fillColor}
+    />
+  </Svg>
+);
+
+const BuyOrRentIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
+  <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
+    <Path
+      fill={fillColor}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
+    />
+  </Svg>
+);
+
+const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
+  theme,
+  content_offering_type,
+  style,
+  position = 'topLeft',
+  size = 22,
+}) => {
+  if (!content_offering_type) return null;
+
+  const typeUpper = content_offering_type.toUpperCase();
+  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
+
+  const fillColor = theme?.colors.primary || '#CA091E';
+
+  const positionStyle: ViewStyle = (() => {
+    switch (position) {
+      case 'topLeft':
+        return { top: 6, left: 6 };
+      case 'topRight':
+        return { top: 6, right: 6 };
+      case 'bottomLeft':
+        return { bottom: 6, left: 6 };
+      case 'bottomRight':
+        return { bottom: 6, right: 6 };
+      default:
+        return { top: 6, left: 6 };
+    }
+  })();
+
+  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: size, height: size },
+        style || positionStyle,
+      ]}
+    >
+      <View style={styles.iconWrapper}>
+        <IconComponent fillColor={fillColor} />
+      </View>
+    </View>
+  );
+};
+
+export default RentOrBuyIcon;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+  iconWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: scale(3),
+    borderRadius: 40,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    overflow: 'hidden',
+    elevation: 3,
+  },
+});

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

@@ -31,7 +31,7 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   thumbnailUri = '',
   theme,
   isLoading = false,
-  borderRadius = scale(6),
+  borderRadius = 0,
   wrapperStyle,
   imageStyle,
   resizeMode = FastImage.resizeMode.cover,
@@ -149,7 +149,6 @@ const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     aspectRatio: 16 / 9,
-    borderWidth: scale(1),
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/components/ContentView/ContentView.tsx

@@ -46,6 +46,7 @@ export const ContentView = ({
         title={content?.name}
         theme={appliedTheme}
         isLoading={isLoading}
+        content_offering_type={content?.content_offering_type}
         onPressPlay={({ is_trailer }) =>
           events?.onPlay?.({
             id: content._id,

package/src/components/ContentView/MoreContentList.tsx

@@ -83,6 +83,7 @@ const MoreContentList: React.FC<Props> = ({
           activeOpacity={0.7}
         >
           <CardPoster
+            content_offering_type={item.content_offering_type}
             posterUri={item.poster}
             borderRadius={5}
             isLoading={false}

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -14,6 +14,7 @@ import type { IContentEpisodes, IContentSeasons } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -200,19 +201,13 @@ const EpisodeCardItem = memo(
       >
         <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
           <View style={thumbnailStyle}>
-            <FastImage
-              source={{
-                uri: episode.thumbnail,
-                priority: FastImage.priority.high,
-              }}
-              style={styles.thumbnail}
-              resizeMode={FastImage.resizeMode.cover}
-              fallback
+            <RentOrBuyIcon
+              content_offering_type={episode.content_offering_type}
             />
             <ThumbnailCard
               thumbnailUri={episode.thumbnail}
               theme={theme}
-              wrapperStyle={styles.thumbnail}
+              // wrapperStyle={styles.thumbnail}
               resizeMode={FastImage.resizeMode.cover}
             />
           </View>

package/src/components/ContentView/components/HeroBanner.tsx

@@ -16,6 +16,7 @@ import BackBtn from '../../Button/BackBtn';
 import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -33,6 +34,7 @@ export const HeroBanner = ({
   renderButtons,
   renderSkeletons,
   menuActions,
+  content_offering_type,
 }: HeroBannerProps) => {
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
@@ -56,6 +58,12 @@ export const HeroBanner = ({
           position: 'relative',
           backgroundColor: theme.colors.backgroundDisabled,
         },
+        rentOrBuyIcon: {
+          position: 'absolute',
+          bottom: verticalScale(20),
+          zIndex: 4,
+          left: scale(10),
+        },
         centeredContent: {
           ...StyleSheet.absoluteFillObject,
           justifyContent: 'center',
@@ -189,6 +197,14 @@ export const HeroBanner = ({
       {/* Background Image */}
       {!isLoading && (
         <View style={styles.imageContainer}>
+          {content_offering_type && (
+            <RentOrBuyIcon
+              size={30}
+              style={styles.rentOrBuyIcon}
+              content_offering_type={content_offering_type}
+            />
+          )}
+
           <FastImage
             style={StyleSheet.absoluteFillObject}
             source={{

package/src/components/Headers/AppHeader.tsx

@@ -81,7 +81,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
       </View>
 
       {/* Right icon */}
-      {rightIcon ? (
+      {rightIcon && onRightPress ? (
         <TouchableOpacity
           onPress={onRightPress}
           activeOpacity={0.7}

package/src/components/Headers/One.tsx

@@ -38,7 +38,7 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
 
   const iconColor = appliedTheme.colors?.onSurface;
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.backdrop;
+  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
 
   const MemoMenuIcon = useMemo(
     () => <MenuIcon width={scale(28)} height={scale(28)} color={iconColor} />,

package/src/components/Headers/Two.tsx

@@ -27,7 +27,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
   const { theme: appliedTheme } = useTheme(theme);
 
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.backdrop;
+  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
 
   return (
     <View style={styles.headerContainer}>

package/src/components/Logo/Logo.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
+import { useSplashCache } from '../../hooks/useSplashCache';
 import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
 
@@ -44,16 +44,14 @@ export const Logo: React.FC<ILogoProps> = ({
   const { theme: appliedTheme } = useTheme(theme);
 
   const {
-    data: { localPathLogo },
+    data: { logoPath },
     isLoading: isSplashLoading,
-  } = useInitSplashCacheSync({
+  } = useSplashCache({
     logoUrl: logoUri,
   });
-  const finalSource = localPathLogo
+  const finalSource = logoPath
     ? {
-        uri: localPathLogo.startsWith('file://')
-          ? localPathLogo
-          : `file://${localPathLogo}`,
+        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
       }
     : logoUri
       ? { uri: logoUri }

package/src/components/Reels/ReelsSeries/Model/Episodes.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import { Lock, ChartNoAxesColumnIncreasing } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ISeriesEpisode, ISeriesItem } from '../types';
+
+const { height, width } = Dimensions.get('window');
+const NUM_COLUMNS = 6;
+
+interface EpisodesProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  currentReel: number;
+  onEpisodeSelect?: (index: number) => void;
+  totalReels?: number;
+}
+
+const Episodes: React.FC<EpisodesProps> = ({
+  data,
+  currentReel,
+  onEpisodeSelect,
+  totalReels = 0,
+}) => {
+  const totalBoxes = Math.max(data.episodes?.length || 0, totalReels);
+  const EpisodeData = Array.from({ length: totalBoxes }, (_, i) => i + 1);
+
+  const renderItem = ({ item }: { item: number }) => {
+    const isAvailable = item <= (data.episodes.length ?? 0);
+    const isActive = item === currentReel + 1;
+
+    return (
+      <TouchableOpacity
+        key={`episode-${item}`}
+        onPress={() => isAvailable && onEpisodeSelect?.(item - 1)}
+        activeOpacity={0.8}
+      >
+        <View
+          style={[
+            styles.box,
+            {
+              backgroundColor: isActive
+                ? 'rgba(60,60,60,1)'
+                : 'rgba(34,34,34,1)',
+            },
+          ]}
+        >
+          <Text style={[styles.number, { color: 'white' }]}>{item}</Text>
+
+          {!isAvailable && (
+            <View
+              style={[
+                styles.lockContainer,
+                { backgroundColor: 'rgba(76,76,76,1)' },
+              ]}
+            >
+              <Lock color={'white'} size={moderateScale(11)} />
+            </View>
+          )}
+
+          {isActive && (
+            <ChartNoAxesColumnIncreasing
+              color={'white'}
+              size={moderateScale(16)}
+              style={styles.activeIcon}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <FlatList
+      data={EpisodeData}
+      numColumns={NUM_COLUMNS}
+      keyExtractor={(item) => `episode-${item}`}
+      renderItem={renderItem}
+      contentContainerStyle={[{ paddingBottom: verticalScale(20) }]}
+      showsVerticalScrollIndicator={false}
+      scrollEnabled={true} // important for modal
+      removeClippedSubviews={true} // improves performance
+      windowSize={10} // virtualized window
+      initialNumToRender={NUM_COLUMNS * 2}
+      nestedScrollEnabled={true} // Allows scroll inside modal
+    />
+  );
+};
+
+export default Episodes;
+
+const styles = StyleSheet.create({
+  box: {
+    width:
+      (width - moderateScale(8) * 2 - moderateScale(6) * NUM_COLUMNS) /
+      NUM_COLUMNS,
+    height: (height * 0.52) / 8,
+    borderRadius: moderateScale(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: moderateScale(2.5),
+    marginHorizontal: moderateScale(2.5),
+    position: 'relative',
+  },
+  number: {
+    fontSize: RFValue(15),
+    fontWeight: '600',
+  },
+  lockContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: moderateScale(18),
+    height: moderateScale(18),
+    borderRadius: moderateScale(7),
+    borderTopLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  activeIcon: {
+    position: 'absolute',
+    bottom: verticalScale(6),
+    left: moderateScale(6),
+  },
+});