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

package/src/components/Auth/{SplashScreen → One/SplashScreen}/components/SplashVideo/SplashVideo.tsx

@@ -4,13 +4,13 @@
  */
 
 import React, { useMemo, useCallback, useRef, useEffect } from 'react';
-import { StyleSheet, Animated } from 'react-native';
+import { StyleSheet, Animated, useWindowDimensions } from 'react-native';
 import Video, {
   type OnLoadData,
   type OnVideoErrorData,
 } from 'react-native-video';
-import Display from '../../../../../utils/Display';
-import { View } from '../../../../View';
+import Display from '../../../../../../utils/Display';
+import { View } from '../../../../../View';
 
 interface IProps {
   width?: number;
@@ -25,9 +25,9 @@ interface IProps {
 }
 
 const SplashVideo: React.FC<IProps> = ({
-  fullscreen = false,
-  width = Display.fullWidth,
-  height = Display.fullHeight,
+  fullscreen = true,
+  width,
+  height,
   source,
   resizeMode = 'cover',
   onEnd,
@@ -36,14 +36,25 @@ const SplashVideo: React.FC<IProps> = ({
   onError,
 }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  /** 🎨 Compute video dimensions */
-  const videoStyle = useMemo(
-    () => ({
-      width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height,
-    }),
-    [fullscreen, width, height]
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  /** 🎨 Compute video dimensions – fullscreen uses 100% for all devices; otherwise use window dimensions */
+  const videoStyle = useMemo(() => {
+    if (fullscreen) {
+      return { width: '100%' as const, height: '100%' as const };
+    }
+    const w = width ?? windowWidth ?? Display.fullWidth;
+    const h = height ?? windowHeight ?? Display.fullHeight;
+    return { width: w, height: h };
+  }, [fullscreen, width, height, windowWidth, windowHeight]);
+
+  /** 🎨 Fullscreen wrapper fills container so video covers entire screen on any device */
+  const wrapperStyle = useMemo(
+    () =>
+      fullscreen
+        ? [StyleSheet.absoluteFillObject, { opacity: fadeAnim }]
+        : [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
+    [fullscreen, videoStyle, fadeAnim]
   );
 
   /** 🌀 Fade-in animation */
@@ -118,20 +129,14 @@ const SplashVideo: React.FC<IProps> = ({
     []
   );
 
-  // Memoize animated view style
-  const animatedViewStyle = useMemo(
-    () => [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
-    [videoStyle, fadeAnim]
-  );
-
   /** 🧱 Render */
   return (
     <View style={styles.container}>
-      {/* Video Layer */}
-      <Animated.View style={animatedViewStyle}>
+      {/* Video Layer – fills container for fullscreen on all devices */}
+      <Animated.View style={wrapperStyle}>
         <Video
           source={videoSource}
-          style={videoStyle}
+          style={styles.video}
           resizeMode={resizeMode}
           paused={false}
           onLoadStart={handleLoadStart}
@@ -155,9 +160,14 @@ const SplashVideo: React.FC<IProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    width: '100%',
+    height: '100%',
     position: 'relative',
-    justifyContent: 'center',
-    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  video: {
+    width: '100%',
+    height: '100%',
   },
 });
 

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

@@ -0,0 +1,24 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 11:11 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,108 @@
+import React from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type ViewStyle,
+  Text,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ThemeOverride } from '../../../../theme';
+import { useInternalTheme } from '../../../../theme/hook';
+import Logo from '../../../Logo/Logo';
+import TextButton from '../../../Button/TextButton';
+
+type Props = {
+  logoUri?: string;
+  onLogoPress?: () => void;
+  rightTitle?: string;
+  onRightPress?: () => void;
+  rightComponent?: React.ReactNode;
+  containerStyle?: ViewStyle;
+  theme?: ThemeOverride;
+  headerTitle?: string;
+};
+
+const AuthHeader: React.FC<Props> = ({
+  logoUri,
+  onLogoPress,
+  rightTitle,
+  onRightPress,
+  rightComponent,
+  containerStyle,
+  theme: overrideTheme,
+  headerTitle,
+}) => {
+  const insets = useSafeAreaInsets();
+  const { theme } = useInternalTheme(overrideTheme);
+
+  return (
+    <View
+      style={[styles.container, { paddingTop: insets.top }, containerStyle]}
+    >
+      <View style={styles.row}>
+        <View style={styles.left}>
+          {logoUri && (
+            <Pressable onPress={onLogoPress} style={styles.logoWrapper}>
+              <Logo logoUri={logoUri} resizeMode="contain" />
+            </Pressable>
+          )}
+          {headerTitle && (
+            <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
+              {headerTitle}
+            </Text>
+          )}
+        </View>
+
+        <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: {
+    marginTop: verticalScale(0),
+    width: '100%',
+    zIndex: 100,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingTop: verticalScale(8),
+  },
+  left: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  logoWrapper: {
+    width: scale(100),
+    height: scale(10),
+    transform: [{ scale: 0.6 }],
+  },
+  right: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginTop: verticalScale(8),
+    textAlign: 'left',
+  },
+});

package/src/components/Auth/{ForgotPassword → Two/ForgotPassword}/ForgotPassword.tsx

@@ -6,23 +6,24 @@ import React, { useCallback, useMemo, useState } from 'react';
 import {
   StyleSheet,
   View,
-  Platform,
   Alert,
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { Input } from '../../Input/Input';
-import { Button } from '../../Button';
-import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import { Logo } from '../../Logo/Logo';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import BackBtn from '../../Button/BackBtn';
-import { Text } from '../../Text';
+import { Input } from '../../../Input/Input';
+import { Button } from '../../../Button';
+import { Logo } from '../../../Logo/Logo';
+import { useKeyboard } from '../../../../hooks/useKeyboard';
+import HideKeyboard from '../../../Keyboard/HideKeyboard';
+import BackBtn from '../../../Button/BackBtn';
+import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
-import type { ThemeOverride } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { Mail } from 'lucide-react-native';
+import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
+import { useInternalTheme } from '../../../../theme/hook';
 
 type FormValues = {
   email: string;
@@ -38,10 +39,12 @@ type TextConfig = {
 
 type ForgetPasswordProps = {
   title?: string;
+  subtitle?: string;
   onSubmit?: ({ email }: { email: string }) => Promise<void> | void;
   onTopBackBtnPress?: () => void;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
   formStyle?: ViewStyle;
   inputStyle?: TextStyle;
   inputContainerStyle?: ViewStyle;
@@ -69,16 +72,18 @@ type ForgetPasswordProps = {
 
 const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   title = 'Forgot Password',
+  subtitle = 'Enter your email account to reset password',
   onSubmit,
   onTopBackBtnPress,
   containerStyle,
   titleStyle,
+  subtitleStyle,
   formStyle,
   inputStyle,
   inputContainerStyle,
   topBackBtnStyle,
   loadingSubmitBtn = false,
-  backgroundImage,
+  // backgroundImage,
   logoUri,
   theme: overrideTheme,
   text = {
@@ -104,6 +109,8 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
 
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = useState(false);
+  const { theme } = useInternalTheme(overrideTheme);
+  const textPrimaryColor = theme.colors.textPrimary;
 
   const handleFormSubmit = useCallback(
     async (data: FormValues) => {
@@ -133,19 +140,14 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   );
 
   // Memoize gradient split background
-  const gradientSplitBackground = useMemo(
-    () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
-    [isKeyboardOpen]
-  );
+  // const gradientSplitBackground = useMemo(
+  //   () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
+  //   [isKeyboardOpen]
+  // );
 
   return (
-    <BackgroundLayout
-      backgroundImage={backgroundImage?.source}
-      theme={overrideTheme}
-      gradientSplitBackground={gradientSplitBackground}
-    >
+    <BackgroundLayoutOne>
       <View style={[styles.container, containerStyle]}>
-        {/* Top Back Button */}
         {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
           <View style={styles.topBackBtnWrapper}>
             {renderTopBackBtn ? (
@@ -163,24 +165,38 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {/* Logo */}
             {renderLogo ? (
               renderLogo()
             ) : logoUri ? (
               <Logo logoUri={logoUri} />
             ) : null}
 
-            {/* Title */}
             {renderForgetPasswordHeader ? (
               renderForgetPasswordHeader()
             ) : (
-              <Text
-                style={[styles.title, titleStyle]}
-                accessibilityRole="header"
-                testID="title"
-              >
-                {title}
-              </Text>
+              <>
+                <Text
+                  style={[
+                    styles.title,
+                    { color: textPrimaryColor },
+                    titleStyle,
+                  ]}
+                >
+                  {title}
+                </Text>
+
+                {subtitle ? (
+                  <Text
+                    style={[
+                      styles.subtitle,
+                      { color: textPrimaryColor },
+                      subtitleStyle,
+                    ]}
+                  >
+                    {subtitle}
+                  </Text>
+                ) : null}
+              </>
             )}
 
             {/* Form */}
@@ -196,7 +212,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                   },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
+                  <Input.Three
                     placeholder={text.emailPlaceholder || 'Enter your email'}
                     label={text.emailLabel || 'Email'}
                     value={value}
@@ -216,6 +232,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                     keyboardType="email-address"
                     autoCorrect={false}
                     testID="email-input"
+                    leftIcon={<Mail size={25} />}
                   />
                 )}
               />
@@ -245,7 +262,10 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                   renderBottomInfoText()
                 ) : text.bottomInfoText ? (
                   <Text
-                    style={styles.bottomInfo}
+                    style={[
+                      styles.bottomInfo,
+                      { color: theme.colors.textSecondary },
+                    ]}
                     accessibilityRole="text"
                     testID="bottom-info-text"
                   >
@@ -257,7 +277,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
           </View>
         </HideKeyboard>
       </View>
-    </BackgroundLayout>
+    </BackgroundLayoutOne>
   );
 };
 
@@ -284,15 +304,22 @@ const styles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: verticalScale(16),
+    gap: verticalScale(6),
+    marginBottom: verticalScale(100),
   },
   title: {
     fontSize: RFValue(23),
     fontWeight: '700',
+    textAlign: 'center',
     marginTop: verticalScale(12),
-    marginBottom: verticalScale(20),
+  },
+  subtitle: {
+    fontSize: RFValue(13),
+    fontWeight: '400',
     textAlign: 'center',
+    marginBottom: verticalScale(80),
   },
+
   form: {
     width: '100%',
     gap: verticalScale(14),

package/src/components/Auth/Two/Login/AuthLoginShell.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../../Text';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
+import AuthHeader from '../AuthHeader/AuthHeader';
+
+type Props = {
+  activeTab: 'phone' | 'email';
+  onPhonePress?: () => void;
+  onEmailPress?: () => void;
+  onSignup?: () => void;
+  logoUri?: string;
+  title?: string;
+  description?: string;
+  bottomTitle?: string;
+  children: React.ReactNode;
+  theme?: ThemeOverride;
+};
+
+const AuthLoginShell: React.FC<Props> = ({
+  activeTab,
+  onPhonePress,
+  onEmailPress,
+  onSignup,
+  logoUri,
+  title,
+  description,
+  bottomTitle,
+  children,
+  theme: overrideTheme,
+}) => {
+  const { theme } = useInternalTheme(overrideTheme);
+
+  return (
+    <View style={styles.wrapper}>
+      {/* ✅ Reusable Auth Header */}
+      <AuthHeader
+        logoUri={logoUri}
+        rightTitle="Sign Up"
+        onRightPress={onSignup}
+        theme={overrideTheme}
+      />
+
+      {/* ===== Title ===== */}
+      <View style={styles.titleBlock}>
+        {title && (
+          <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text style={[styles.subtitle, { color: theme.colors.textPrimary }]}>
+            {description}
+          </Text>
+        )}
+      </View>
+
+      {/* ===== Tabs ===== */}
+      <View style={styles.tabRow}>
+        <Pressable style={styles.tab} onPress={onPhonePress}>
+          <Text
+            style={[
+              styles.tabText,
+              {
+                color: theme.colors.textPrimary,
+                opacity: activeTab === 'phone' ? 1 : 0.6,
+              },
+            ]}
+          >
+            Phone number
+          </Text>
+
+          {activeTab === 'phone' && (
+            <View
+              style={[
+                styles.activeLine,
+                { backgroundColor: theme.colors.button },
+              ]}
+            />
+          )}
+        </Pressable>
+
+        <Pressable style={styles.tab} onPress={onEmailPress}>
+          <Text
+            style={[
+              styles.tabText,
+              {
+                color: theme.colors.textPrimary,
+                opacity: activeTab === 'email' ? 1 : 0.6,
+              },
+            ]}
+          >
+            Email address
+          </Text>
+
+          {activeTab === 'email' && (
+            <View
+              style={[
+                styles.activeLine,
+                { backgroundColor: theme.colors.button },
+              ]}
+            />
+          )}
+        </Pressable>
+      </View>
+
+      {/* ===== Content ===== */}
+      <View style={styles.center}>{children}</View>
+
+      {/* ===== Bottom Text ===== */}
+      {bottomTitle && (
+        <Text style={[styles.disclaimer, { color: theme.colors.textPrimary }]}>
+          {bottomTitle}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default AuthLoginShell;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+  },
+  titleBlock: {
+    alignItems: 'center',
+    marginBottom: verticalScale(28),
+    marginTop: verticalScale(110), // ⬅ header ke liye thoda space
+  },
+  title: {
+    fontSize: RFValue(22),
+    fontWeight: '700',
+    marginBottom: verticalScale(6),
+  },
+  subtitle: {
+    fontSize: RFValue(12),
+    textAlign: 'center',
+  },
+  tabRow: {
+    flexDirection: 'row',
+    width: '100%',
+    marginBottom: verticalScale(20),
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: verticalScale(30),
+  },
+  tabText: {
+    fontSize: RFValue(14.5),
+    fontWeight: '600',
+  },
+  activeLine: {
+    marginTop: verticalScale(6),
+    height: 2,
+    width: '70%',
+  },
+  center: {
+    width: '100%',
+    flexGrow: 1,
+  },
+  disclaimer: {
+    marginBottom: verticalScale(45),
+    fontSize: RFValue(12.5),
+    textAlign: 'center',
+  },
+});