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

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

@@ -2,7 +2,13 @@
  * @author Naresh Dhamu
  * @lastModified Tue 22 Oct 2025
  */
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import {
   View,
   StyleSheet,
@@ -48,239 +54,309 @@ export interface AuthProviderProps {
   };
 }
 
-const AuthProvider: React.FC<AuthProviderProps> = ({
-  title = 'Your Favourite OTT Platform',
-  description,
-  backgroundImage,
-  logoUri,
-  text,
-  variant = 'one',
-  theme: overrideTheme,
-  isLoading = false,
-  authProvider = {
-    phone: { enabled: true },
-    email: { enabled: true },
-  },
-}) => {
-  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-  const { colors } = resolvedTheme;
+const AuthProvider: React.FC<AuthProviderProps> = React.memo(
+  ({
+    title = 'Your Favourite OTT Platform',
+    description,
+    backgroundImage,
+    logoUri,
+    text,
+    variant = 'one',
+    theme: overrideTheme,
+    isLoading = false,
+    authProvider = {
+      phone: { enabled: true },
+      email: { enabled: true },
+    },
+  }) => {
+    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
+    const { colors } = resolvedTheme;
 
-  const phoneEnabled = !!authProvider.phone?.enabled;
-  const emailEnabled = !!authProvider.email?.enabled;
+    const phoneEnabled = !!authProvider.phone?.enabled;
+    const emailEnabled = !!authProvider.email?.enabled;
 
-  const [activeTab, setActiveTab] = useState<'phone' | 'email'>(
-    phoneEnabled ? 'phone' : 'email'
-  );
+    const [activeTab, setActiveTab] = useState<'phone' | 'email'>(
+      phoneEnabled ? 'phone' : 'email'
+    );
 
-  const slideAnim = useRef(new Animated.Value(80)).current;
-  const opacityAnim = useRef(new Animated.Value(0)).current;
+    const slideAnim = useRef(new Animated.Value(80)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
 
-  useEffect(() => {
-    setActiveTab(phoneEnabled ? 'phone' : 'email');
+    useEffect(() => {
+      setActiveTab(phoneEnabled ? 'phone' : 'email');
 
-    Animated.parallel([
-      Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 600,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacityAnim, {
-        toValue: 1,
-        duration: 600,
-        useNativeDriver: true,
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
+
+    const triggerEvent = useCallback(
+      (type: 'phone' | 'email') => {
+        if (type === 'phone') authProvider.phone?.onPress?.();
+        else authProvider.email?.onPress?.();
+      },
+      [authProvider.phone, authProvider.email]
+    );
+
+    const handlePress = useCallback(
+      (type: 'phone' | 'email') => {
+        if (activeTab !== type) setActiveTab(type);
+        setTimeout(() => triggerEvent(type), 100);
+      },
+      [activeTab, triggerEvent]
+    );
+
+    const authMethods: {
+      key: 'phone' | 'email';
+      label: string;
+      icon: React.ReactNode;
+      enabled: boolean;
+    }[] = 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]
+    );
+
+    // Memoize enabled methods filter
+    const enabledMethods = useMemo(
+      () => authMethods.filter((item) => item.enabled),
+      [authMethods]
+    );
+
+    // Memoize skeleton style
+    const skeletonStyle = useMemo(
+      () =>
+        StyleSheet.create({
+          skeleton: {
+            width: '100%' as const,
+            height: verticalScale(48),
+            borderRadius: moderateScale(8),
+          },
+        }).skeleton,
+      []
+    );
+
+    // Memoize toggle skeleton style
+    const toggleSkeletonStyle = useMemo(
+      () =>
+        StyleSheet.create({
+          toggleSkeleton: {
+            width: '100%' as const,
+            height: verticalScale(48),
+            borderRadius: 50,
+          },
+        }).toggleSkeleton,
+      []
+    );
+
+    // Memoize animated view style
+    const animatedViewStyle = useMemo(
+      () => ({
+        transform: [{ translateY: slideAnim }],
+        opacity: opacityAnim,
+        width: '100%' as const,
       }),
-    ]).start();
-  }, [phoneEnabled, emailEnabled, slideAnim, opacityAnim]);
+      [slideAnim, opacityAnim]
+    );
 
-  const triggerEvent = (type: 'phone' | 'email') => {
-    if (type === 'phone') authProvider.phone?.onPress?.();
-    else authProvider.email?.onPress?.();
-  };
+    // Memoize title style
+    const titleStyleMemo = useMemo(
+      () => [styles.title, { color: colors.textPrimary }],
+      [colors.textPrimary]
+    );
 
-  const handlePress = (type: 'phone' | 'email') => {
-    if (activeTab !== type) setActiveTab(type);
-    setTimeout(() => triggerEvent(type), 100);
-  };
+    // Memoize description style
+    const descriptionStyleMemo = useMemo(
+      () => [styles.description, { color: colors.textSecondary }],
+      [colors.textSecondary]
+    );
 
-  const authMethods: {
-    key: 'phone' | 'email';
-    label: string;
-    icon: React.ReactNode;
-    enabled: boolean;
-  }[] = 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]
-  );
+    // Memoize toggle wrapper style
+    const toggleWrapperStyleMemo = useMemo(
+      () => [
+        styles.toggleWrapper,
+        {
+          backgroundColor: colors.surfaceVariant,
+          borderColor: colors.border,
+        },
+      ],
+      [colors.surfaceVariant, colors.border]
+    );
 
-  const renderButtons = () => (
-    <View style={styles.buttonContainer}>
-      {authMethods
-        .filter((item) => item.enabled)
-        .map((item) => (
-          <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),
+    const renderButtons = useCallback(
+      () => (
+        <View style={styles.buttonContainer}>
+          {enabledMethods.map((item) => (
+            <React.Fragment key={item.key}>
+              {isLoading ? (
+                <SkeletonPlaceholder
+                  backgroundColor={colors.skeletonBaseColor}
+                  highlightColor={colors.skeletonHighlightColor}
+                  borderRadius={moderateScale(8)}
+                >
+                  <View style={skeletonStyle} />
+                </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),
+                  })}
                 />
-              </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>
-  );
+              )}
+            </React.Fragment>
+          ))}
+        </View>
+      ),
+      [
+        enabledMethods,
+        isLoading,
+        colors.skeletonBaseColor,
+        colors.skeletonHighlightColor,
+        colors.button,
+        colors.buttonText,
+        colors.textPrimary,
+        skeletonStyle,
+        activeTab,
+        handlePress,
+      ]
+    );
 
-  // Toggle render without absolute
-  const renderToggle = () => {
-    const enabledMethods = authMethods.filter((m) => m.enabled);
+    // Toggle render without absolute
+    const renderToggle = useCallback(() => {
+      if (isLoading) {
+        return (
+          <SkeletonPlaceholder
+            backgroundColor={colors.skeletonBaseColor}
+            highlightColor={colors.skeletonHighlightColor}
+            borderRadius={50}
+          >
+            <View style={toggleSkeletonStyle} />
+          </SkeletonPlaceholder>
+        );
+      }
 
-    if (isLoading) {
       return (
-        <SkeletonPlaceholder
-          backgroundColor={colors.skeletonBaseColor}
-          highlightColor={colors.skeletonHighlightColor}
-          borderRadius={50}
-        >
-          <View
-            style={{
-              width: '100%',
-              height: verticalScale(48),
-              borderRadius: 50,
-            }}
-          />
-        </SkeletonPlaceholder>
+        <View style={toggleWrapperStyleMemo}>
+          {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>
       );
-    }
+    }, [
+      isLoading,
+      enabledMethods,
+      activeTab,
+      colors,
+      handlePress,
+      toggleSkeletonStyle,
+      toggleWrapperStyleMemo,
+    ]);
 
     return (
-      <View
-        style={[
-          styles.toggleWrapper,
-          {
-            backgroundColor: colors.surfaceVariant,
-            borderColor: colors.border,
-          },
-        ]}
+      <BackgroundLayout
+        backgroundImage={backgroundImage?.source}
+        theme={overrideTheme}
+        gradientSplitBackground={
+          backgroundImage?.gradientSplitBackground ?? 0.35
+        }
+        resizeMode={backgroundImage?.resizeMode ?? 'cover'}
       >
-        {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>
-    );
-  };
+        <SafeAreaView style={styles.safeArea}>
+          <View style={styles.container}>
+            <View style={styles.logoWrapper}>
+              <Logo logoUri={logoUri} />
+            </View>
 
-  return (
-    <BackgroundLayout
-      backgroundImage={backgroundImage?.source}
-      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} />
-          </View>
-
-          <View style={styles.bottomSection}>
-            <Text style={[styles.title, { color: colors.textPrimary }]}>
-              {title}
-            </Text>
-            <Text
-              style={[styles.description, { color: colors.textSecondary }]}
-              numberOfLines={2}
-              adjustsFontSizeToFit
-            >
-              {description}
-            </Text>
+            <View style={styles.bottomSection}>
+              <Text style={titleStyleMemo}>{title}</Text>
+              <Text
+                style={descriptionStyleMemo}
+                numberOfLines={2}
+                adjustsFontSizeToFit
+              >
+                {description}
+              </Text>
 
-            <Animated.View
-              style={{
-                transform: [{ translateY: slideAnim }],
-                opacity: opacityAnim,
-                width: '100%',
-              }}
-            >
-              {variant === 'one' ? renderButtons() : renderToggle()}
-            </Animated.View>
+              <Animated.View style={animatedViewStyle}>
+                {variant === 'one' ? renderButtons() : renderToggle()}
+              </Animated.View>
+            </View>
           </View>
-        </View>
-      </SafeAreaView>
-    </BackgroundLayout>
-  );
-};
+        </SafeAreaView>
+      </BackgroundLayout>
+    );
+  }
+);
 
 export default AuthProvider;
 

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

@@ -127,15 +127,22 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     []
   );
 
-  const isSubmitDisabled = loadingSubmitBtn || isLoading;
+  const isSubmitDisabled = useMemo(
+    () => loadingSubmitBtn || isLoading,
+    [loadingSubmitBtn, isLoading]
+  );
+
+  // Memoize gradient split background
+  const gradientSplitBackground = useMemo(
+    () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
+    [isKeyboardOpen]
+  );
 
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
       theme={overrideTheme}
-      gradientSplitBackground={
-        isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
-      }
+      gradientSplitBackground={gradientSplitBackground}
     >
       <View style={[styles.container, containerStyle]}>
         {/* Top Back Button */}