@zezosoft/zezo-ott-react-native-ui-kit 1.0.8 → 1.0.9

package/lib/typescript/src/utils/Spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/utils/Spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,GACrC,cAAa,MAAW,KACvB,MAIF,CAAC;AAGF,eAAO,MAAM,oBAAoB,iBARlB,MAAM,KAClB,MAO2D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zezosoft/zezo-ott-react-native-ui-kit",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A professional React Native UI component library built for OTT applications.",
   "main": "./lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -85,6 +85,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
     "lottie-react-native": "^7.3.4",
+    "moment": "^2.30.1",
     "prettier": "^3.0.3",
     "react": "19.0.0",
     "react-native": "0.79.6",
@@ -97,6 +98,7 @@
     "react-native-markdown-display": "^7.0.2",
     "react-native-mmkv": "^3.3.0",
     "react-native-modal": "^14.0.0-rc.1",
+    "react-native-navigation-mode": "^1.2.3",
     "react-native-reanimated": "^4.1.0",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-super-grid": "^6.0.2",
@@ -110,9 +112,10 @@
   "peerDependencies": {
     "@react-native-community/blur": "^4.4.0",
     "@react-native-masked-view/masked-view": "^0.3.0",
-    "@react-navigation/bottom-tabs": "^7.4.0",
-    "@react-navigation/native": "^7.1.0",
-    "lottie-react-native": "^7.0.0",
+    "@react-navigation/bottom-tabs": "*",
+    "@react-navigation/native": "*",
+    "lottie-react-native": "*",
+    "moment": "*",
     "react": "*",
     "react-native": "*",
     "react-native-device-info": "^14.0.0",
@@ -121,6 +124,7 @@
     "react-native-gesture-handler": "^2.0.0",
     "react-native-linear-gradient": "^2.8.0",
     "react-native-mmkv": "*",
+    "react-native-navigation-mode": "*",
     "react-native-nitro-modules": "^0.29.0",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
@@ -129,7 +133,7 @@
     "react-native-svg": "*",
     "react-native-video": "*",
     "react-native-vision-camera": "*",
-    "react-native-worklets": "^0.5.0"
+    "react-native-worklets": "*"
   },
   "dependencies": {
     "color": "^5.0.0",

package/src/components/Account/Account.tsx

@@ -133,7 +133,7 @@ export const Account: React.FC<AccountProps> = ({
       <ScrollView
         contentContainerStyle={[
           styles.content,
-          { paddingBottom: insets.bottom + verticalScale(40) },
+          { paddingBottom: verticalScale(100) + insets.bottom },
         ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"

package/src/components/Auth/AuthProvider/AuthProvider.tsx

@@ -2,14 +2,13 @@
  * @author Naresh Dhamu
  * @lastModified Tue 22 Oct 2025
  */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   View,
   StyleSheet,
   SafeAreaView,
   TouchableOpacity,
   Animated,
-  Platform,
 } from 'react-native';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
@@ -19,6 +18,7 @@ import { Text } from '../../Text';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Phone, Mail } from 'lucide-react-native';
 import { Button } from '../../Button';
+import { default as SkeletonPlaceholder } from 'react-native-skeleton-placeholder';
 
 export interface AuthProviderProps {
   logoUri: string;
@@ -35,6 +35,7 @@ export interface AuthProviderProps {
   };
   variant?: 'one' | 'two';
   theme?: ThemeOverride;
+  isLoading?: boolean;
   authProvider?: {
     phone?: {
       enabled?: boolean;
@@ -55,6 +56,7 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
   text,
   variant = 'one',
   theme: overrideTheme,
+  isLoading = false,
   authProvider = {
     phone: { enabled: true },
     email: { enabled: true },
@@ -105,46 +107,70 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
     label: string;
     icon: React.ReactNode;
     enabled: boolean;
-  }[] = [
-    {
-      key: 'phone',
-      label: text?.loginWithPhone || 'Phone',
-      icon: <Phone size={moderateScale(16)} />,
-      enabled: phoneEnabled,
-    },
-    {
-      key: 'email',
-      label: text?.loginWithEmail || 'Email',
-      icon: <Mail size={moderateScale(16)} />,
-      enabled: emailEnabled,
-    },
-  ];
+  }[] = useMemo(
+    () => [
+      {
+        key: 'phone',
+        label: text?.loginWithPhone || 'Phone',
+        icon: <Phone size={moderateScale(16)} />,
+        enabled: phoneEnabled,
+      },
+      {
+        key: 'email',
+        label: text?.loginWithEmail || 'Email',
+        icon: <Mail size={moderateScale(16)} />,
+        enabled: emailEnabled,
+      },
+    ],
+    [text?.loginWithPhone, text?.loginWithEmail, phoneEnabled, emailEnabled]
+  );
 
   const renderButtons = () => (
     <View style={styles.buttonContainer}>
       {authMethods
         .filter((item) => item.enabled)
         .map((item) => (
-          <Button.Secondary
-            key={item.key}
-            containerStyle={{
-              backgroundColor:
-                activeTab === item.key ? colors.button : 'transparent',
-              borderWidth: 1.2,
-              borderColor: colors.button,
-            }}
-            titleStyle={{
-              color:
-                activeTab === item.key ? colors.buttonText : colors.textPrimary,
-            }}
-            title={`Continue with ${item.label}`}
-            onPress={() => handlePress(item.key)}
-            leftIcon={React.cloneElement(item.icon as any, {
-              color:
-                activeTab === item.key ? colors.buttonText : colors.textPrimary,
-              size: moderateScale(18),
-            })}
-          />
+          <React.Fragment key={item.key}>
+            {isLoading ? (
+              <SkeletonPlaceholder
+                backgroundColor={colors.skeletonBaseColor}
+                highlightColor={colors.skeletonHighlightColor}
+                borderRadius={moderateScale(8)}
+              >
+                <View
+                  style={{
+                    width: '100%',
+                    height: verticalScale(48),
+                    borderRadius: moderateScale(8),
+                  }}
+                />
+              </SkeletonPlaceholder>
+            ) : (
+              <Button.Secondary
+                containerStyle={{
+                  backgroundColor:
+                    activeTab === item.key ? colors.button : 'transparent',
+                  borderWidth: 1.2,
+                  borderColor: colors.button,
+                }}
+                titleStyle={{
+                  color:
+                    activeTab === item.key
+                      ? colors.buttonText
+                      : colors.textPrimary,
+                }}
+                title={`Continue with ${item.label}`}
+                onPress={() => handlePress(item.key)}
+                leftIcon={React.cloneElement(item.icon as any, {
+                  color:
+                    activeTab === item.key
+                      ? colors.buttonText
+                      : colors.textPrimary,
+                  size: moderateScale(18),
+                })}
+              />
+            )}
+          </React.Fragment>
         ))}
     </View>
   );
@@ -152,6 +178,25 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
   // Toggle render without absolute
   const renderToggle = () => {
     const enabledMethods = authMethods.filter((m) => m.enabled);
+
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={colors.skeletonBaseColor}
+          highlightColor={colors.skeletonHighlightColor}
+          borderRadius={50}
+        >
+          <View
+            style={{
+              width: '100%',
+              height: verticalScale(48),
+              borderRadius: 50,
+            }}
+          />
+        </SkeletonPlaceholder>
+      );
+    }
+
     return (
       <View
         style={[
@@ -257,7 +302,7 @@ const styles = StyleSheet.create({
   bottomSection: {
     width: '100%',
     alignItems: 'center',
-    paddingBottom: verticalScale(Platform.OS === 'ios' ? 40 : 30),
+    paddingBottom: verticalScale(30),
   },
   title: {
     fontSize: moderateScale(18),

package/src/components/Auth/Login/LoginWithEmail.tsx

@@ -24,6 +24,7 @@ import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
 import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { getResponsiveBottomSpacing } from '../../../utils/Spacing';
 
 type FormValues = {
   email: string;
@@ -313,7 +314,14 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
           </View>
 
           {!isKeyboardOpen && shouldRender(onSignup || renderSignupPrompt) && (
-            <View style={styles.signupContainer}>
+            <View
+              style={[
+                styles.signupContainer,
+                {
+                  bottom: getResponsiveBottomSpacing(35),
+                },
+              ]}
+            >
               {renderSignupPrompt ? (
                 renderSignupPrompt({
                   onPress: () => handleKeyboardDismiss(onSignup),
@@ -388,7 +396,6 @@ const styles = StyleSheet.create({
   },
   signupContainer: {
     position: 'absolute',
-    bottom: verticalScale(30),
     left: 0,
     right: 0,
     alignItems: 'center',

package/src/components/Auth/OTP/OTP.tsx

@@ -47,6 +47,8 @@ type OTPProps = {
   otpDigitCount?: number;
   keyboardType?: KeyboardTypeOptions;
   phoneNumber?: string;
+  enableAutoFill?: boolean;
+  autoSubmitOnFill?: boolean;
   text?: {
     otpLabel?: string;
     otpPlaceholder?: string;
@@ -110,6 +112,8 @@ const OTP: React.FC<OTPProps> = ({
   otpDigitCount = 4,
   keyboardType = 'number-pad',
   phoneNumber,
+  enableAutoFill = true,
+  autoSubmitOnFill = true,
   text = DEFAULT_TEXT,
   onResendOtp,
   renderResendButton,
@@ -239,6 +243,31 @@ const OTP: React.FC<OTPProps> = ({
     }
   }, [onSubmit, otp, otpDigitCount]);
 
+  // Auto-submit when OTP is auto-filled and complete
+  useEffect(() => {
+    if (
+      autoSubmitOnFill &&
+      otp.length === otpDigitCount &&
+      !isSubmitting &&
+      !loading &&
+      onSubmit
+    ) {
+      const timer = setTimeout(() => {
+        handleSubmit();
+      }, 300); // Small delay to ensure OTP is fully set
+      return () => clearTimeout(timer);
+    }
+    return;
+  }, [
+    otp,
+    otpDigitCount,
+    autoSubmitOnFill,
+    isSubmitting,
+    loading,
+    onSubmit,
+    handleSubmit,
+  ]);
+
   const handleResendOtp = useCallback(() => {
     if (onResendOtp) {
       onResendOtp();
@@ -325,7 +354,14 @@ const OTP: React.FC<OTPProps> = ({
                   cellCount={otpDigitCount}
                   rootStyle={styles.codeFieldRoot}
                   keyboardType={keyboardType}
-                  textContentType="oneTimeCode"
+                  textContentType={enableAutoFill ? 'oneTimeCode' : 'none'}
+                  autoComplete={
+                    enableAutoFill
+                      ? Platform.OS === 'android'
+                        ? 'sms-otp'
+                        : 'off'
+                      : 'off'
+                  }
                   renderCell={({ index, symbol, isFocused }) => (
                     <Text
                       key={index}

package/src/components/Auth/SignUp/SignUp.tsx

@@ -25,6 +25,7 @@ import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
 import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { getResponsiveBottomSpacing } from '../../../utils/Spacing';
 
 type FormValues = {
   username: string;
@@ -349,7 +350,14 @@ const Signup: React.FC<SignupProps> = ({
             (renderLoginPrompt ? (
               renderLoginPrompt()
             ) : (
-              <View style={styles.loginContainerWrapper}>
+              <View
+                style={[
+                  styles.loginContainerWrapper,
+                  {
+                    bottom: getResponsiveBottomSpacing(35),
+                  },
+                ]}
+              >
                 <View style={styles.loginContainer}>
                   <View style={styles.loginRow}>
                     <Text
@@ -415,7 +423,6 @@ const styles = StyleSheet.create({
   },
   loginContainerWrapper: {
     position: 'absolute',
-    bottom: verticalScale(30),
     left: 0,
     right: 0,
     alignItems: 'center',

package/src/components/BlurView/BlurView.tsx

@@ -0,0 +1,199 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 05:00 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+
+/**
+ * BlurView Props - Same as @react-native-community/blur
+ */
+export interface BlurViewProps {
+  /** Style of the BlurView container */
+  style?: StyleProp<ViewStyle>;
+
+  /** The blur type (tint) - exactly matches community lib */
+  blurType?:
+    | 'dark'
+    | 'light'
+    | 'xlight'
+    | 'extraDark'
+    | 'regular'
+    | 'prominent'
+    | 'chromeMaterial'
+    | 'material'
+    | 'thickMaterial'
+    | 'thinMaterial'
+    | 'ultraThinMaterial'
+    | 'chromeMaterialDark'
+    | 'materialDark'
+    | 'thickMaterialDark'
+    | 'thinMaterialDark'
+    | 'ultraThinMaterialDark'
+    | 'chromeMaterialLight'
+    | 'materialLight'
+    | 'thickMaterialLight'
+    | 'thinMaterialLight'
+    | 'ultraThinMaterialLight';
+
+  /** The blur intensity amount (0-100) - exactly matches community lib */
+  blurAmount?: number;
+
+  /** Fallback color for reduced transparency - exactly matches community lib */
+  reducedTransparencyFallbackColor?: string;
+
+  /** iOS only: Overlay color - exactly matches community lib */
+  overlayColor?: string;
+
+  /** Android only: Downsample factor (higher = more blur but lower quality) */
+  downsampleFactor?: number;
+
+  /** Android only: Blur radius */
+  blurRadius?: number;
+
+  /** Child components */
+  children?: React.ReactNode;
+}
+
+/**
+ * Custom BlurView - 100% Compatible with @react-native-community/blur
+ *
+ * ✅ Same API as @react-native-community/blur
+ * ✅ Works on iOS, Android, and Web
+ * ✅ Drop-in replacement - just change the import
+ * 🚫 Simulates blur (no live backdrop) using semi-transparent layers
+ *
+ * @example
+ * ```tsx
+ * <BlurView
+ *   style={styles.blur}
+ *   blurType="light"
+ *   blurAmount={10}
+ *   reducedTransparencyFallbackColor="white"
+ * />
+ * ```
+ */
+const BlurView: React.FC<BlurViewProps> = ({
+  style,
+  blurType = 'light',
+  blurAmount = 100,
+  reducedTransparencyFallbackColor,
+  overlayColor,
+  children,
+}) => {
+  // Clamp blur amount to 0-100 range (same as community lib)
+  const intensity = Math.max(0, Math.min(100, blurAmount));
+
+  // Get tint style based on blur type
+  const tintStyle = getBlurTintStyle(
+    blurType,
+    intensity,
+    reducedTransparencyFallbackColor,
+    overlayColor
+  );
+
+  // Platform-specific rendering
+  return (
+    <View style={[styles.container, style]}>
+      {/* Background blur layer */}
+      <View style={[StyleSheet.absoluteFillObject, tintStyle]} />
+
+      {/* Content layer */}
+      <View pointerEvents="box-none" style={styles.content}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * Get blur tint style based on blurType
+ * Matches the exact behavior of @react-native-community/blur
+ */
+function getBlurTintStyle(
+  blurType: string,
+  intensity: number,
+  fallbackColor?: string,
+  overlayColor?: string
+): ViewStyle {
+  // If overlayColor is provided, use it (iOS behavior)
+  if (overlayColor) {
+    return { backgroundColor: overlayColor };
+  }
+
+  // Calculate opacity based on intensity (0-100)
+  // Higher intensity = more opaque = stronger blur effect
+  const opacity = Math.min(0.95, intensity / 100);
+  const lightOpacity = opacity * 0.7;
+  const darkOpacity = opacity * 0.8;
+
+  // Match exact blur types from @react-native-community/blur
+  switch (blurType) {
+    // Dark blur types
+    case 'dark':
+      return { backgroundColor: `rgba(0, 0, 0, ${darkOpacity})` };
+    case 'extraDark':
+      return {
+        backgroundColor: `rgba(0, 0, 0, ${Math.min(0.98, darkOpacity * 1.2)})`,
+      };
+    case 'materialDark':
+    case 'thickMaterialDark':
+    case 'chromeMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity})` };
+    case 'thinMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.7})` };
+    case 'ultraThinMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.5})` };
+
+    // Light blur types
+    case 'light':
+      return {
+        backgroundColor:
+          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
+      };
+    case 'xlight':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.6})` };
+    case 'materialLight':
+    case 'chromeMaterialLight':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity})` };
+    case 'thickMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
+    case 'thinMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
+    case 'ultraThinMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
+
+    // Regular/prominent types
+    case 'regular':
+    case 'prominent':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.8})` };
+    case 'material':
+    case 'chromeMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
+    case 'thickMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 1.1})` };
+    case 'thinMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
+    case 'ultraThinMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
+
+    // Default
+    default:
+      return {
+        backgroundColor:
+          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+  },
+});
+
+export default BlurView;

package/src/components/BlurView/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 05:00 PM
+ */
+
+export { default as BlurView, default } from './BlurView';
+export type { BlurViewProps } from './BlurView';

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

@@ -234,7 +234,9 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             ref={flatListRef}
             data={data}
             horizontal
-            keyExtractor={(item, index) => `${item._id}-${index}`}
+            keyExtractor={(item, index) =>
+              item._id || `item-${item.slug || item.name || index}`
+            }
             renderItem={renderItem}
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.listContent}

package/src/components/Content/Content.tsx

@@ -12,7 +12,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import { scale } from 'react-native-size-matters';
+import { scale, verticalScale } from 'react-native-size-matters';
 import Animated, {
   type AnimatedStyle,
   type SharedValue,
@@ -26,6 +26,7 @@ import type { IHistoryItem } from './Card/NowWatching/NowWatching';
 import type { ThemeOverride } from '../../theme/themes';
 import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
 import { useInternalTheme } from '../../theme/hook';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export interface ICustomComponentsForContent {
   type: string;
@@ -150,6 +151,7 @@ export const Content: React.FC<IContentProps> = ({
   isLoading,
   noContentFallbackProps,
 }) => {
+  const insets = useSafeAreaInsets();
   const sectionData = useMemo<IGetSectionData[]>(
     () => contentData?.sectionData ?? [],
     [contentData?.sectionData]
@@ -247,9 +249,8 @@ export const Content: React.FC<IContentProps> = ({
       }
       onEndReachedThreshold={0.7}
       contentContainerStyle={[
-        {
-          paddingBottom: scale(100),
-        },
+        { paddingBottom: verticalScale(100) + insets.bottom },
+
         contentContainerStyle,
       ]}
     />

package/src/components/ContentView/ContentView.tsx

@@ -33,6 +33,7 @@ export const ContentView = ({
   recommendedContentCardStyles,
   history,
   episodeCardMode,
+  pricingAndExpiryInfo,
 }: ComponentProps) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const seekTime = history?.currentTime || 0;
@@ -95,7 +96,13 @@ export const ContentView = ({
             isLoading={isLoading}
             style={genreTagsStyles}
           />
-          <MiniInfo content={content} theme={theme} isLoading={isLoading} />
+          <MiniInfo
+            content={content}
+            theme={theme}
+            isLoading={isLoading}
+            {...pricingAndExpiryInfo}
+          />
+
           <AboutSection
             theme={appliedTheme}
             description={content?.description}