@zezosoft/zezo-ott-react-native-ui-kit 1.3.6 → 1.3.8

package/src/components/Auth/One/SplashScreen/components/SplashImage/SplashImage.tsx

@@ -1,92 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useState, useMemo } from 'react';
-import FastImage, { type ImageStyle } from 'react-native-fast-image';
-import { ActivityIndicator, View, StyleSheet } from 'react-native';
-import Display from '../../../../../../utils/Display';
-import { useTheme } from '../../../../../../theme';
-import type { ThemeOverride } from '../../../../../../theme/themes';
-import { resolveUri } from '../../utils/splashUtils';
-
-type SplashImageProps = {
-  source: string;
-  width: number;
-  height: number;
-  fullscreen: boolean;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
-  backgroundColor?: string;
-  theme?: ThemeOverride;
-};
-
-const SplashImage: React.FC<SplashImageProps> = ({
-  fullscreen,
-  height,
-  resizeMode = 'contain',
-  source,
-  width,
-  theme: themeOverride,
-}) => {
-  const { theme } = useTheme(themeOverride);
-
-  // Track which source the loading flag belongs to.
-  // When source changes, update isLoading in the same render (no useEffect,
-  // no extra paint) using React's supported "setState during render" pattern.
-  const [trackedSource, setTrackedSource] = useState(source);
-  const [isLoading, setIsLoading] = useState(!!source);
-
-  if (trackedSource !== source) {
-    setTrackedSource(source);
-    setIsLoading(!!source);
-  }
-
-  const resolvedUri = resolveUri(source);
-  const imageSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
-
-  const imageStyle = useMemo(() => {
-    if (fullscreen) return styles.fullscreenImage;
-    return { width, height };
-  }, [fullscreen, width, height]);
-
-  if (!source) return null;
-
-  return (
-    <View style={styles.container}>
-      {isLoading && (
-        <ActivityIndicator
-          size="large"
-          style={styles.loader}
-          color={theme.colors.primary}
-        />
-      )}
-      <FastImage
-        source={imageSource}
-        onLoadEnd={() => setIsLoading(false)}
-        onError={() => setIsLoading(false)}
-        style={imageStyle as ImageStyle}
-        resizeMode={resizeMode}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: Display.fullWidth,
-    height: Display.fullHeight,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loader: {
-    position: 'absolute',
-  },
-  fullscreenImage: {
-    width: Display.fullWidth,
-    height: Display.fullHeight,
-  },
-});
-
-export default React.memo(SplashImage);

package/src/components/Auth/One/SplashScreen/components/SplashLottie/SplashLottie.tsx

@@ -1,129 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useEffect, useState } from 'react';
-import LottieView from 'lottie-react-native';
-import { StyleSheet } from 'react-native';
-import RNFS from 'react-native-fs';
-import Display from '../../../../../../utils/Display';
-import { isLocalJson, resolveUri, toFsPath } from '../../utils/splashUtils';
-
-type ResizeMode = 'cover' | 'contain' | 'center';
-
-interface IProps {
-  source: string;
-  width: number;
-  height: number;
-  fullscreen: boolean;
-  resizeMode?: ResizeMode;
-  onAnimationFinish?: () => void;
-}
-
-const onFailure = (err: any) =>
-  console.error('[SplashLottie] Animation failed to load:', err);
-
-const jsonCache = new Map<string, object>();
-
-const SplashLottie: React.FC<IProps> = ({
-  fullscreen,
-  height,
-  source,
-  resizeMode = 'contain',
-  width,
-  onAnimationFinish,
-}) => {
-  /**
-   * Synchronous resolution for all non-JSON sources:
-   *   - remote http(s) URL  → { uri: source }
-   *   - local .lottie file  → { uri: 'file://...' }
-   *   - local .json file    → null (async state below handles it)
-   *   - unknown             → { uri: source }
-   *
-   * This avoids an extra render for the common cases (remote URL / .lottie).
-   */
-  const syncSource = useMemo((): { uri: string } | null => {
-    if (!source || isLocalJson(source)) return null;
-    return { uri: resolveUri(source) };
-  }, [source]);
-
-  // Only used for local .json files — requires async RNFS read
-  const [prevSource, setPrevSource] = useState(source);
-  const [jsonSource, setJsonSource] = useState<object | null>(() => {
-    return isLocalJson(source) ? jsonCache.get(source) || null : null;
-  });
-
-  if (prevSource !== source) {
-    setPrevSource(source);
-    setJsonSource(isLocalJson(source) ? jsonCache.get(source) || null : null);
-  }
-
-  useEffect(() => {
-    if (!isLocalJson(source)) {
-      setJsonSource(null);
-      return;
-    }
-
-    if (jsonCache.has(source)) {
-      return;
-    }
-
-    let cancelled = false;
-    const fsPath = toFsPath(source);
-    const fileUri = resolveUri(source);
-
-    (async () => {
-      try {
-        if (!(await RNFS.exists(fsPath))) {
-          if (!cancelled) setJsonSource({ uri: fileUri });
-          return;
-        }
-        const parsed = JSON.parse(await RNFS.readFile(fsPath, 'utf8'));
-        jsonCache.set(source, parsed);
-        if (!cancelled) setJsonSource(parsed);
-      } catch {
-        if (!cancelled) setJsonSource({ uri: fileUri });
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [source]);
-
-  const lottieSource = isLocalJson(source) ? jsonSource : syncSource;
-
-  const lottieStyle = useMemo(
-    () => ({
-      ...styles.base,
-      width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height,
-      ...(fullscreen ? styles.fullscreen : {}),
-    }),
-    [fullscreen, width, height]
-  );
-
-  if (!source || !lottieSource) return null;
-
-  return (
-    <LottieView
-      source={lottieSource as React.ComponentProps<typeof LottieView>['source']}
-      autoPlay
-      loop={false}
-      onAnimationFinish={onAnimationFinish}
-      style={lottieStyle}
-      resizeMode={resizeMode}
-      onAnimationFailure={onFailure}
-      hardwareAccelerationAndroid
-      cacheComposition
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  base: { alignSelf: 'center' },
-  fullscreen: { flex: 1 },
-});
-
-export default React.memo(SplashLottie);

package/src/components/Auth/One/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,172 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useMemo, useCallback, useRef, useEffect } from 'react';
-import { StyleSheet, Animated, useWindowDimensions, View } from 'react-native';
-import Video, {
-  type OnLoadData,
-  type OnVideoErrorData,
-  type BufferConfig,
-} from 'react-native-video';
-import Display from '../../../../../../utils/Display';
-import { resolveUri } from '../../utils/splashUtils';
-
-interface IProps {
-  width?: number;
-  height?: number;
-  source: string;
-  fullscreen?: boolean;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
-  backgroundColor?: string;
-  onEnd?: () => void;
-  onLoadStart?: () => void;
-  onLoaded?: (data: OnLoadData) => void;
-  onError?: (error: string) => void;
-}
-
-const BUFFER_CONFIG: BufferConfig = {
-  minBufferMs: 2000,
-  maxBufferMs: 10000,
-  bufferForPlaybackMs: 1000,
-  bufferForPlaybackAfterRebufferMs: 2000,
-};
-
-const CONTROLS_HIDDEN = {
-  hideForward: true,
-  hideDuration: true,
-  hideFullscreen: true,
-  hidePlayPause: true,
-  hideNavigationBarOnFullScreenMode: true,
-  hideNotificationBarOnFullScreenMode: true,
-  hideNext: true,
-  hidePosition: true,
-  hidePrevious: true,
-  hideRewind: true,
-  hideSeekBar: true,
-  hideSettingButton: true,
-};
-
-const SplashVideo: React.FC<IProps> = ({
-  fullscreen = true,
-  width,
-  height,
-  source,
-  resizeMode = 'cover',
-  backgroundColor = '#000000',
-  onEnd,
-  onLoadStart,
-  onLoaded,
-  onError,
-}) => {
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-
-  const animateIn = useCallback(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 300,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  const videoStyle = useMemo(() => {
-    if (fullscreen) return styles.fullscreenVideo;
-    return {
-      width: width ?? windowWidth ?? Display.fullWidth,
-      height: height ?? windowHeight ?? Display.fullHeight,
-    };
-  }, [fullscreen, width, height, windowWidth, windowHeight]);
-
-  const wrapperStyle = useMemo(
-    () =>
-      fullscreen
-        ? [StyleSheet.absoluteFill, { opacity: fadeAnim }]
-        : [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
-    [fullscreen, videoStyle, fadeAnim]
-  );
-  const resolvedUri = useMemo(() => resolveUri(source), [source]);
-  const videoSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
-  const handleLoadStart = useCallback(() => {
-    fadeAnim.setValue(0);
-    onLoadStart?.();
-  }, [fadeAnim, onLoadStart]);
-
-  const handleLoad = useCallback(
-    (data: OnLoadData) => {
-      onLoaded?.(data);
-    },
-    [onLoaded]
-  );
-
-  const handleReadyForDisplay = useCallback(() => {
-    animateIn();
-  }, [animateIn]);
-
-  const handleError = useCallback(
-    (err: OnVideoErrorData | any) => {
-      const msg =
-        err?.error?.message ||
-        err?.message ||
-        JSON.stringify(err) ||
-        'Unknown video error';
-      console.warn('[SplashVideo] Error:', msg);
-      onError?.(msg);
-      animateIn();
-    },
-    [onError, animateIn]
-  );
-
-  useEffect(() => {
-    return () => fadeAnim.stopAnimation();
-  }, [fadeAnim]);
-
-  if (!resolvedUri) return null;
-
-  return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <Animated.View style={wrapperStyle}>
-        <Video
-          source={videoSource}
-          style={styles.video}
-          resizeMode={resizeMode}
-          paused={false}
-          onLoadStart={handleLoadStart}
-          onLoad={handleLoad}
-          onReadyForDisplay={handleReadyForDisplay}
-          onError={handleError}
-          onEnd={onEnd}
-          controlsStyles={CONTROLS_HIDDEN}
-          shutterColor={backgroundColor}
-          ignoreSilentSwitch="obey"
-          playInBackground={false}
-          playWhenInactive={false}
-          allowsExternalPlayback={false}
-          bufferConfig={BUFFER_CONFIG}
-          controls={false}
-          repeat={false}
-        />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    alignSelf: 'stretch',
-  },
-  video: {
-    width: '100%',
-    height: '100%',
-  },
-  fullscreenVideo: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default React.memo(SplashVideo);

package/src/components/Auth/One/SplashScreen/utils/splashUtils.ts

@@ -1,23 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-export const resolveUri = (src: string): string => {
-  if (!src) return '';
-  if (/^(https?|file):\/\//.test(src)) return src;
-  return `file://${src}`;
-};
-
-export const toFsPath = (src: string): string => {
-  const resolved = resolveUri(src);
-  return resolved.startsWith('file://') ? resolved.slice(7) : resolved;
-};
-
-export const isLocalJson = (src: string): boolean => {
-  if (!src) return false;
-  const resolved = resolveUri(src);
-  return (
-    resolved.startsWith('file://') && resolved.toLowerCase().endsWith('.json')
-  );
-};

package/src/components/Auth/One/index.ts

@@ -1,24 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import ForgotPassword from './ForgotPassword/ForgotPassword';
-import LoginWithEmail from './Login/LoginWithEmail';
-import LoginWithPhone from './Login/LoginWithPhone';
-import OTP from './OTP/OTP';
-import QrLogin from './QrLogin/QrLogin';
-import SignUp from './SignUp/SignUp';
-import { SplashScreen } from './SplashScreen/SplashScreen';
-
-const AuthOne = {
-  LoginWithEmail,
-  LoginWithPhone,
-  SignUp,
-  OTP,
-  ForgotPassword,
-  SplashScreen,
-  QrLogin,
-};
-
-export default AuthOne;

package/src/components/Auth/Two/AuthHeader/AuthHeader.tsx

@@ -1,130 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React from 'react';
-import {
-  View,
-  Pressable,
-  StyleSheet,
-  type ViewStyle,
-  type StyleProp,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { verticalScale } from 'react-native-size-matters';
-
-import type { ThemeOverride } from '../../../../theme';
-import { useTheme } from '../../../../theme';
-import { Text } from '../../../Text';
-import Logo from '../../../Logo/Logo';
-import TextButton from '../../../Button/TextButton';
-
-type Props = {
-  logoUri?: string;
-  onLogoPress?: () => void;
-  rightTitle?: string;
-  onRightPress?: () => void;
-  rightComponent?: React.ReactNode;
-  containerStyle?: StyleProp<ViewStyle>;
-  theme?: ThemeOverride;
-  headerTitle?: string;
-};
-
-const AuthHeader: React.FC<Props> = ({
-  logoUri,
-  onLogoPress,
-  rightTitle,
-  onRightPress,
-  rightComponent,
-  containerStyle,
-  theme: overrideTheme,
-  headerTitle,
-}) => {
-  const insets = useSafeAreaInsets();
-  const { theme } = useTheme(overrideTheme);
-
-  return (
-    <View
-      style={[styles.container, { marginTop: insets.top - 7 }, containerStyle]}
-    >
-      <View style={styles.row}>
-        {/* Left — logo or title */}
-        <View style={styles.left}>
-          {logoUri && (
-            <Pressable
-              onPress={onLogoPress}
-              style={styles.logoWrapper}
-              disabled={!onLogoPress}
-            >
-              <Logo
-                logoUri={logoUri}
-                resizeMode="contain"
-                width={120}
-                height={35}
-                containerStyle={styles.logoContainer}
-              />
-            </Pressable>
-          )}
-          {headerTitle && (
-            <Text
-              style={[styles.headerTitle, { color: theme.colors.textPrimary }]}
-            >
-              {headerTitle}
-            </Text>
-          )}
-        </View>
-
-        {/* Right — custom component or text button */}
-        <View style={styles.right}>
-          {rightComponent ? (
-            rightComponent
-          ) : rightTitle && onRightPress ? (
-            <TextButton
-              title={rightTitle}
-              onPress={onRightPress}
-              color={theme.colors.textPrimary}
-            />
-          ) : null}
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(AuthHeader);
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    zIndex: 100,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingTop: verticalScale(8),
-  },
-  left: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-  logoWrapper: {
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-  right: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-  },
-  headerTitle: {
-    fontSize: RFValue(18),
-    fontWeight: '700',
-    marginTop: verticalScale(4),
-  },
-  logoContainer: {
-    alignItems: 'flex-start',
-  },
-});