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

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

@@ -0,0 +1,92 @@
+/**
+ * @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

@@ -0,0 +1,129 @@
+/**
+ * @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

@@ -0,0 +1,172 @@
+/**
+ * @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

@@ -0,0 +1,23 @@
+/**
+ * @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

@@ -0,0 +1,24 @@
+/**
+ * @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

@@ -0,0 +1,130 @@
+/**
+ * @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',
+  },
+});