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

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

@@ -1,6 +1,6 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 18 Oct 2025 at 06:23 PM
+ * @lastModified Tue 22 Oct 2025
  */
 import React, { useEffect, useRef, useState } from 'react';
 import {
@@ -12,8 +12,8 @@ import {
   Platform,
 } from 'react-native';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../theme/hook/useTheme';
-import { type AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import { type ThemeOverride } from '../../../theme/themes';
 import { Logo } from '../../Logo/Logo';
 import { Text } from '../../Text';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
@@ -21,20 +21,20 @@ import { Phone, Mail } from 'lucide-react-native';
 import { Button } from '../../Button';
 
 export interface AuthProviderProps {
-  title?: string;
+  logoUri: string;
+  title: string;
   description?: string;
   backgroundImage?: {
-    source?: string | null;
+    source: string | null;
     gradientSplitBackground?: number;
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
-  logoUri?: string;
   text?: {
     loginWithPhone?: string;
     loginWithEmail?: string;
   };
   variant?: 'one' | 'two';
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   authProvider?: {
     phone?: {
       enabled?: boolean;
@@ -60,7 +60,7 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
     email: { enabled: true },
   },
 }) => {
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { colors } = resolvedTheme;
 
   const phoneEnabled = !!authProvider.phone?.enabled;
@@ -74,6 +74,8 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
   const opacityAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
+    setActiveTab(phoneEnabled ? 'phone' : 'email');
+
     Animated.parallel([
       Animated.timing(slideAnim, {
         toValue: 0,
@@ -86,11 +88,7 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
         useNativeDriver: true,
       }),
     ]).start();
-  }, [opacityAnim, slideAnim]);
-
-  useEffect(() => {
-    setActiveTab(phoneEnabled ? 'phone' : 'email');
-  }, [phoneEnabled, emailEnabled]);
+  }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
 
   const triggerEvent = (type: 'phone' | 'email') => {
     if (type === 'phone') authProvider.phone?.onPress?.();
@@ -98,126 +96,117 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
   };
 
   const handlePress = (type: 'phone' | 'email') => {
-    if (phoneEnabled && !emailEnabled) return triggerEvent('phone');
-    if (emailEnabled && !phoneEnabled) return triggerEvent('email');
-
-    if (activeTab !== type) {
-      setActiveTab(type);
-      setTimeout(() => triggerEvent(type), 150);
-    } else {
-      triggerEvent(type);
-    }
+    if (activeTab !== type) setActiveTab(type);
+    setTimeout(() => triggerEvent(type), 100);
   };
 
+  const authMethods: {
+    key: 'phone' | 'email';
+    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,
+    },
+  ];
+
   const renderButtons = () => (
     <View style={styles.buttonContainer}>
-      {phoneEnabled && (
-        <Button.Secondary
-          containerStyle={{
-            backgroundColor:
-              activeTab === 'phone' ? colors.button : 'transparent',
-            borderWidth: 1.2,
-            borderColor: colors.button,
-          }}
-          titleStyle={{
-            color:
-              activeTab === 'phone' ? colors.buttonText : colors.textPrimary,
-          }}
-          title={text?.loginWithPhone || 'Continue with Phone'}
-          onPress={() => handlePress('phone')}
-          leftIcon={
-            <Phone
-              size={moderateScale(18)}
-              color={
-                activeTab === 'phone' ? colors.buttonText : colors.textPrimary
-              }
-            />
-          }
-        />
-      )}
-      {emailEnabled && (
-        <Button.Secondary
-          title={text?.loginWithEmail || 'Continue with Email'}
-          onPress={() => handlePress('email')}
-          containerStyle={{
-            backgroundColor:
-              activeTab === 'email' ? colors.button : 'transparent',
-            borderWidth: 1.2,
-            borderColor: colors.button,
-          }}
-          titleStyle={{
-            color:
-              activeTab === 'email' ? colors.buttonText : colors.textPrimary,
-          }}
-          leftIcon={
-            <Mail
-              size={moderateScale(18)}
-              color={
-                activeTab === 'email' ? colors.buttonText : colors.textPrimary
-              }
-            />
-          }
-        />
-      )}
+      {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),
+            })}
+          />
+        ))}
     </View>
   );
 
-  const renderToggle = () => (
-    <View
-      style={[styles.toggleWrapper, { backgroundColor: colors.surfaceVariant }]}
-    >
-      <Animated.View
+  // Toggle render without absolute
+  const renderToggle = () => {
+    const enabledMethods = authMethods.filter((m) => m.enabled);
+    return (
+      <View
         style={[
-          styles.activeHighlight,
+          styles.toggleWrapper,
           {
-            backgroundColor: colors.primary,
-            width: phoneEnabled && emailEnabled ? '50%' : '96%',
-            left:
-              phoneEnabled && emailEnabled
-                ? activeTab === 'phone'
-                  ? '2%'
-                  : '48%'
-                : '2%',
+            backgroundColor: colors.surfaceVariant,
+            borderColor: colors.border,
           },
         ]}
-      />
-      {phoneEnabled && (
-        <ToggleButton
-          active={activeTab === 'phone'}
-          icon={<Phone size={moderateScale(16)} />}
-          text={text?.loginWithPhone || 'Phone'}
-          onPress={() => handlePress('phone')}
-          colors={colors}
-        />
-      )}
-      {emailEnabled && (
-        <ToggleButton
-          active={activeTab === 'email'}
-          icon={<Mail size={moderateScale(16)} />}
-          text={text?.loginWithEmail || 'Email'}
-          onPress={() => handlePress('email')}
-          colors={colors}
-        />
-      )}
-    </View>
-  );
+      >
+        {enabledMethods.map((item) => {
+          const isActive = activeTab === item.key;
+          return (
+            <TouchableOpacity
+              key={item.key}
+              style={[
+                styles.toggleHalf,
+                { backgroundColor: isActive ? colors.primary : 'transparent' },
+              ]}
+              onPress={() => handlePress(item.key)}
+              activeOpacity={0.8}
+            >
+              <View style={styles.iconTextRow}>
+                {React.cloneElement(item.icon as any, {
+                  color: isActive ? colors.buttonText : colors.textPrimary,
+                })}
+                <Text
+                  style={[
+                    styles.toggleText,
+                    {
+                      color: isActive ? colors.buttonText : colors.textPrimary,
+                    },
+                  ]}
+                >
+                  {item.label}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
 
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={backgroundImage?.gradientSplitBackground ?? 0.35}
       resizeMode={backgroundImage?.resizeMode ?? 'cover'}
     >
       <SafeAreaView style={styles.safeArea}>
         <View style={styles.container}>
           <View style={styles.logoWrapper}>
-            <Logo
-              logoUri={
-                logoUri ||
-                'https://res.cloudinary.com/dcxtwwtl0/image/upload/v1759578007/Logo_y4uzsd.png'
-              }
-            />
+            <Logo logoUri={logoUri} />
           </View>
 
           <View style={styles.bottomSection}>
@@ -248,40 +237,6 @@ const AuthProvider: React.FC<AuthProviderProps> = ({
   );
 };
 
-const ToggleButton = ({
-  active,
-  icon,
-  text,
-  onPress,
-  colors,
-}: {
-  active: boolean;
-  icon: React.ReactNode;
-  text: string;
-  onPress: () => void;
-  colors: any;
-}) => (
-  <TouchableOpacity
-    style={styles.toggleHalf}
-    onPress={onPress}
-    activeOpacity={0.8}
-  >
-    <View style={styles.iconTextRow}>
-      {React.cloneElement(icon as any, {
-        color: active ? colors.buttonText : colors.textPrimary,
-      })}
-      <Text
-        style={[
-          styles.toggleText,
-          { color: active ? colors.buttonText : colors.textPrimary },
-        ]}
-      >
-        {text}
-      </Text>
-    </View>
-  </TouchableOpacity>
-);
-
 export default AuthProvider;
 
 const styles = StyleSheet.create({
@@ -292,7 +247,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: '100%',
     paddingHorizontal: scale(18),
-
     paddingVertical: verticalScale(20),
   },
   logoWrapper: {
@@ -309,6 +263,7 @@ const styles = StyleSheet.create({
     fontSize: moderateScale(18),
     fontWeight: '700',
     textAlign: 'center',
+    marginBottom: verticalScale(12),
   },
   description: {
     fontSize: moderateScale(14),
@@ -321,24 +276,19 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     height: verticalScale(48),
     borderRadius: 50,
+    borderWidth: scale(0.5),
+    padding: scale(4),
     overflow: 'hidden',
     alignItems: 'center',
     width: '100%',
-    position: 'relative',
   },
   toggleHalf: {
     flex: 1,
+    borderRadius: scale(50),
+    height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 2,
   },
   toggleText: { fontSize: moderateScale(14), fontWeight: '600' },
-  activeHighlight: {
-    position: 'absolute',
-    top: '7%',
-    height: '86%',
-    borderRadius: 50,
-    zIndex: 1,
-  },
   iconTextRow: { flexDirection: 'row', alignItems: 'center', gap: scale(6) },
 });

package/src/components/Auth/ForgotPassword/ForgotPassword.tsx

@@ -17,13 +17,12 @@ import { Input } from '../../Input/Input';
 import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
-import { useTheme } from '../../../theme/hook/useTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../../theme/themes';
 
 type FormValues = {
   email: string;
@@ -54,7 +53,7 @@ type ForgetPasswordProps = {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loadingSubmitBtn?: boolean;
   text?: TextConfig;
   renderLogo?: () => React.ReactNode;
@@ -103,7 +102,6 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     mode: 'onChange',
   });
 
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -134,7 +132,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={
         isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
       }
@@ -149,7 +147,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -205,7 +203,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -225,7 +223,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                 <Button.Primary
                   title={text.forgetPasswordButton || 'Continue'}
                   disabled={isSubmitDisabled || !isValid}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   loading={loadingSubmitBtn || isLoading}
                   loadingText={text.loadingSubmitBtnText || 'Please wait...'}
                   onPress={handleSubmit(handleFormSubmit)}

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

@@ -17,12 +17,12 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
@@ -53,7 +53,7 @@ type LoginWithEmailProps = {
   logoUri?: string;
   loadingSubmitBtn?: boolean;
 
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   text?: {
     emailLabel?: string;
     emailPlaceholder?: string;
@@ -113,7 +113,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
   const {
     control,
@@ -150,7 +150,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={isKeyboardOpen ? 0.31 : 0.35}
     >
       <View style={[styles.container, containerStyle]}>
@@ -162,7 +162,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -209,7 +209,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -250,7 +250,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                       spellCheck={false}
                       autoCorrect={false}
                       autoComplete="off"
-                      theme={resolvedTheme}
+                      theme={overrideTheme}
                     />
                     {!isKeyboardOpen &&
                       shouldRender(renderForgotPassword || onForgotPassword) &&
@@ -283,7 +283,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     title={text?.loginButton || 'Login'}
                     onPress={handleSubmit(handleFormSubmit)}
                     disabled={loadingSubmitBtn || !isValid || isLoading}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     titleStyle={{
                       fontSize: RFValue(14),
                     }}

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

@@ -12,13 +12,13 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import PhoneNumberInput from '../../Input/PhoneNumberInput';
 import TextButton from '../../Button/TextButton';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type PhoneField = {
@@ -49,7 +49,7 @@ type LoginWithPhoneProps = {
   };
   loadingSubmitBtn?: boolean;
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   text?: {
     phoneLabel?: string;
     phonePlaceholder?: string;
@@ -100,7 +100,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
 
   const {
@@ -181,7 +181,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
       <View
@@ -196,7 +196,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -240,7 +240,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                     errorMessage={errors.phone?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     accessibilityLabel={`Phone input${errors.phone ? ', error' : ''}`}
                   />
                 )}
@@ -256,7 +256,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 <Button.Primary
                   title={text.loginButton || DEFAULT_TEXT.loginButton}
                   disabled={loadingSubmitBtn || !isValid || isLoading}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   onPress={handleSubmit(handleFormSubmit)}
                   loadingText={
                     text.loadingSubmitBtnText ||

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

@@ -19,12 +19,12 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import BackBtn from '../../Button/BackBtn';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import Display from '../../../utils/Display';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type OTPProps = {
@@ -43,7 +43,7 @@ type OTPProps = {
   };
   loading?: boolean;
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   otpDigitCount?: number;
   keyboardType?: KeyboardTypeOptions;
   phoneNumber?: string;
@@ -123,7 +123,7 @@ const OTP: React.FC<OTPProps> = ({
   cellStyle,
   focusCellStyle,
 }) => {
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [otp, setOtp] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -252,7 +252,7 @@ const OTP: React.FC<OTPProps> = ({
     typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
-      theme={resolvedTheme}
+      theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
       gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
@@ -266,7 +266,7 @@ const OTP: React.FC<OTPProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={backBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -352,7 +352,7 @@ const OTP: React.FC<OTPProps> = ({
               ) : (
                 <Button.Primary
                   title={text.submitButton || DEFAULT_TEXT.submitButton}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   onPress={handleSubmit}
                   loadingText={text.loadingSubmitBtnText}
                   titleStyle={{ fontSize: RFValue(13) }}