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

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Mon 16 Jun 2025 at 03:05 PM
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   StyleSheet,
   View,
@@ -84,274 +84,302 @@ type LoginWithEmailProps = {
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
 };
 
-const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
-  title = 'Login',
-  onSubmit,
-  onSignup,
-  onForgotPassword,
-  onSwitchToPhoneLogin,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  formStyle,
-  inputStyle,
-  inputContainerStyle,
-  loadingSubmitBtn,
-  topBackBtnStyle,
-  minPasswordLength = 6,
-  backgroundImage,
-  logoUri,
-  theme: overrideTheme,
-  text,
-  signupTextProps,
-  signupLinkTextProps,
-  renderLogo,
-  renderForgotPassword,
-  renderEmailHeader,
-  renderSignupPrompt,
-  renderSubmitButton,
-  renderSwitchToPhoneLogin,
-  renderTopBackBtn,
-}) => {
-  const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid, touchedFields },
-  } = useForm<FormValues>({
-    defaultValues: { email: '', password: '' },
-    mode: 'onChange',
-  });
+const LoginWithEmail: React.FC<LoginWithEmailProps> = React.memo(
+  ({
+    title = 'Login',
+    onSubmit,
+    onSignup,
+    onForgotPassword,
+    onSwitchToPhoneLogin,
+    onTopBackBtnPress,
+    containerStyle,
+    titleStyle,
+    formStyle,
+    inputStyle,
+    inputContainerStyle,
+    loadingSubmitBtn,
+    topBackBtnStyle,
+    minPasswordLength = 6,
+    backgroundImage,
+    logoUri,
+    theme: overrideTheme,
+    text,
+    signupTextProps,
+    signupLinkTextProps,
+    renderLogo,
+    renderForgotPassword,
+    renderEmailHeader,
+    renderSignupPrompt,
+    renderSubmitButton,
+    renderSwitchToPhoneLogin,
+    renderTopBackBtn,
+  }) => {
+    const { isKeyboardOpen } = useKeyboard();
+    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const {
+      control,
+      handleSubmit,
+      formState: { errors, isValid, touchedFields },
+    } = useForm<FormValues>({
+      defaultValues: { email: '', password: '' },
+      mode: 'onChange',
+    });
 
-  const handleFormSubmit = useCallback(
-    async (data: FormValues) => {
-      if (!onSubmit) return;
-      setIsLoading(true);
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error('Form submission error:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
+    const handleFormSubmit = useCallback(
+      async (data: FormValues) => {
+        if (!onSubmit) return;
+        setIsLoading(true);
+        try {
+          await onSubmit(data);
+        } catch (error) {
+          console.error('Form submission error:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [onSubmit]
+    );
 
-  const handleKeyboardDismiss = (callback?: () => void) => {
-    Keyboard.dismiss();
-    requestAnimationFrame(() => callback?.());
-  };
+    const handleKeyboardDismiss = useCallback((callback?: () => void) => {
+      Keyboard.dismiss();
+      requestAnimationFrame(() => callback?.());
+    }, []);
 
-  const shouldRender = (condition?: boolean | unknown): boolean =>
-    typeof condition === 'function' || !!condition;
+    const shouldRender = useMemo(
+      () =>
+        (condition?: boolean | unknown): boolean =>
+          typeof condition === 'function' || !!condition,
+      []
+    );
 
-  return (
-    <BackgroundLayout
-      backgroundImage={backgroundImage?.source}
-      theme={overrideTheme}
-      gradientSplitBackground={isKeyboardOpen ? 0.31 : 0.35}
-    >
-      <View style={[styles.container, containerStyle]}>
-        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderTopBackBtn ? (
-              renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {}),
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={topBackBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard>
-          <View style={styles.centerContent}>
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
+    // Memoize gradient split background
+    const gradientSplitBackground = useMemo(
+      () => (isKeyboardOpen ? 0.31 : 0.35),
+      [isKeyboardOpen]
+    );
 
-            {renderEmailHeader ? (
-              renderEmailHeader()
-            ) : (
-              <Text style={[styles.title, titleStyle]}>{title}</Text>
-            )}
+    // Memoize disabled state
+    const isDisabled = useMemo(
+      () => loadingSubmitBtn || isLoading,
+      [loadingSubmitBtn, isLoading]
+    );
 
-            <View style={[styles.form, formStyle]}>
-              <Controller
-                control={control}
-                name="email"
-                rules={{
-                  required: 'Email is required',
-                  pattern: {
-                    value: /^\S+@\S+\.\S+$/,
-                    message: 'Enter a valid email address',
-                  },
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
-                    label={text?.emailLabel || 'Email'}
-                    placeholder={text?.emailPlaceholder || 'Email'}
-                    value={value}
-                    onChangeText={(inputText) => {
-                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                      onChange(sanitized);
-                    }}
-                    onBlur={onBlur}
-                    disabled={loadingSubmitBtn || isLoading}
-                    error={!!touchedFields.email && !!errors.email}
-                    errorMessage={errors.email?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                    textContentType="emailAddress"
-                    autoCapitalize="none"
-                    keyboardType="email-address"
-                    autoCorrect={false}
-                  />
-                )}
-              />
+    return (
+      <BackgroundLayout
+        backgroundImage={backgroundImage?.source}
+        theme={overrideTheme}
+        gradientSplitBackground={gradientSplitBackground}
+      >
+        <View style={[styles.container, containerStyle]}>
+          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+            <View style={styles.topBackBtnWrapper}>
+              {renderTopBackBtn ? (
+                renderTopBackBtn({
+                  onPress: onTopBackBtnPress ?? (() => {}),
+                })
+              ) : (
+                <BackBtn
+                  theme={overrideTheme}
+                  style={topBackBtnStyle}
+                  onPress={onTopBackBtnPress}
+                />
+              )}
+            </View>
+          )}
+          <HideKeyboard>
+            <View style={styles.centerContent}>
+              {renderLogo ? (
+                renderLogo()
+              ) : logoUri ? (
+                <Logo logoUri={logoUri} />
+              ) : null}
 
-              <Controller
-                control={control}
-                name="password"
-                rules={{
-                  required: 'Password is required',
-                  minLength: {
-                    value: minPasswordLength,
-                    message: `Password must be at least ${minPasswordLength} characters`,
-                  },
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <>
+              {renderEmailHeader ? (
+                renderEmailHeader()
+              ) : (
+                <Text style={[styles.title, titleStyle]}>{title}</Text>
+              )}
+
+              <View style={[styles.form, formStyle]}>
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: 'Email is required',
+                    pattern: {
+                      value: /^\S+@\S+\.\S+$/,
+                      message: 'Enter a valid email address',
+                    },
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
                     <Input.One
-                      label={text?.passwordLabel || 'Password'}
-                      placeholder={text?.passwordPlaceholder || 'Password'}
+                      label={text?.emailLabel || 'Email'}
+                      placeholder={text?.emailPlaceholder || 'Email'}
                       value={value}
-                      secureTextEntry
                       onChangeText={(inputText) => {
                         const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
                         onChange(sanitized);
                       }}
                       onBlur={onBlur}
-                      disabled={loadingSubmitBtn || isLoading}
-                      error={!!touchedFields.password && !!errors.password}
-                      errorMessage={errors.password?.message}
+                      disabled={isDisabled}
+                      error={!!touchedFields.email && !!errors.email}
+                      errorMessage={errors.email?.message}
                       inputStyle={inputStyle}
                       containerStyle={inputContainerStyle}
-                      textContentType="none"
+                      theme={overrideTheme}
+                      textContentType="emailAddress"
                       autoCapitalize="none"
-                      spellCheck={false}
+                      keyboardType="email-address"
                       autoCorrect={false}
-                      autoComplete="off"
+                    />
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="password"
+                  rules={{
+                    required: 'Password is required',
+                    minLength: {
+                      value: minPasswordLength,
+                      message: `Password must be at least ${minPasswordLength} characters`,
+                    },
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <>
+                      <Input.One
+                        label={text?.passwordLabel || 'Password'}
+                        placeholder={text?.passwordPlaceholder || 'Password'}
+                        value={value}
+                        secureTextEntry
+                        onChangeText={(inputText) => {
+                          const sanitized = inputText.replace(
+                            /[^\w@.\-+]/g,
+                            ''
+                          );
+                          onChange(sanitized);
+                        }}
+                        onBlur={onBlur}
+                        disabled={isDisabled}
+                        error={!!touchedFields.password && !!errors.password}
+                        errorMessage={errors.password?.message}
+                        inputStyle={inputStyle}
+                        containerStyle={inputContainerStyle}
+                        textContentType="none"
+                        autoCapitalize="none"
+                        spellCheck={false}
+                        autoCorrect={false}
+                        autoComplete="off"
+                        theme={overrideTheme}
+                      />
+                      {!isKeyboardOpen &&
+                        shouldRender(
+                          renderForgotPassword || onForgotPassword
+                        ) &&
+                        (renderForgotPassword ? (
+                          renderForgotPassword()
+                        ) : (
+                          <TextButton
+                            title={text?.forgotPassword || 'Forgot password?'}
+                            onPress={() =>
+                              handleKeyboardDismiss(onForgotPassword)
+                            }
+                            color={resolvedTheme.colors.button}
+                            align="right"
+                            style={styles.forgotPasswordText}
+                          />
+                        ))}
+                    </>
+                  )}
+                />
+
+                {!isKeyboardOpen &&
+                  (renderSubmitButton ? (
+                    renderSubmitButton({
+                      onPress: handleSubmit(handleFormSubmit),
+                      disabled: loadingSubmitBtn || !isValid || isLoading,
+                      loading: loadingSubmitBtn || isLoading,
+                    })
+                  ) : (
+                    <Button.Primary
+                      title={text?.loginButton || 'Login'}
+                      onPress={handleSubmit(handleFormSubmit)}
+                      disabled={isDisabled || !isValid}
                       theme={overrideTheme}
+                      titleStyle={{
+                        fontSize: RFValue(14),
+                      }}
+                      loadingText={
+                        text?.loadingSubmitBtnText || 'Logging in...'
+                      }
+                      loading={isDisabled}
                     />
-                    {!isKeyboardOpen &&
-                      shouldRender(renderForgotPassword || onForgotPassword) &&
-                      (renderForgotPassword ? (
-                        renderForgotPassword()
-                      ) : (
-                        <TextButton
-                          title={text?.forgotPassword || 'Forgot password?'}
-                          onPress={() =>
-                            handleKeyboardDismiss(onForgotPassword)
-                          }
-                          color={resolvedTheme.colors.button}
-                          align="right"
-                          style={styles.forgotPasswordText}
-                        />
-                      ))}
-                  </>
-                )}
-              />
+                  ))}
+              </View>
 
               {!isKeyboardOpen &&
-                (renderSubmitButton ? (
-                  renderSubmitButton({
-                    onPress: handleSubmit(handleFormSubmit),
-                    disabled: loadingSubmitBtn || !isValid || isLoading,
-                    loading: loadingSubmitBtn || isLoading,
+                shouldRender(
+                  onSwitchToPhoneLogin || renderSwitchToPhoneLogin
+                ) &&
+                (renderSwitchToPhoneLogin ? (
+                  renderSwitchToPhoneLogin({
+                    onPress: () => handleKeyboardDismiss(onSwitchToPhoneLogin),
                   })
                 ) : (
-                  <Button.Primary
-                    title={text?.loginButton || 'Login'}
-                    onPress={handleSubmit(handleFormSubmit)}
-                    disabled={loadingSubmitBtn || !isValid || isLoading}
-                    theme={overrideTheme}
-                    titleStyle={{
-                      fontSize: RFValue(14),
-                    }}
-                    loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
-                    loading={loadingSubmitBtn || isLoading}
+                  <TextButton
+                    title={text?.switchToPhoneLogin || 'Login with Phone'}
+                    onPress={() => handleKeyboardDismiss(onSwitchToPhoneLogin)}
+                    color={resolvedTheme.colors.button}
+                    style={styles.switchPhoneText}
+                    underline
+                    bold
+                    align="center"
                   />
                 ))}
             </View>
 
             {!isKeyboardOpen &&
-              shouldRender(onSwitchToPhoneLogin || renderSwitchToPhoneLogin) &&
-              (renderSwitchToPhoneLogin ? (
-                renderSwitchToPhoneLogin({
-                  onPress: () => handleKeyboardDismiss(onSwitchToPhoneLogin),
-                })
-              ) : (
-                <TextButton
-                  title={text?.switchToPhoneLogin || 'Login with Phone'}
-                  onPress={() => handleKeyboardDismiss(onSwitchToPhoneLogin)}
-                  color={resolvedTheme.colors.button}
-                  style={styles.switchPhoneText}
-                  underline
-                  bold
-                  align="center"
-                />
-              ))}
-          </View>
-
-          {!isKeyboardOpen && shouldRender(onSignup || renderSignupPrompt) && (
-            <View
-              style={[
-                styles.signupContainer,
-                {
-                  bottom: getResponsiveBottomSpacing(35),
-                },
-              ]}
-            >
-              {renderSignupPrompt ? (
-                renderSignupPrompt({
-                  onPress: () => handleKeyboardDismiss(onSignup),
-                })
-              ) : (
-                <View style={styles.loginRow}>
-                  <Text
-                    style={[styles.loginPrompt, signupTextProps]}
-                    color={resolvedTheme.colors.textPrimary}
-                  >
-                    {text?.signupPrompt || `Don't have an account?`}
-                  </Text>
-                  <TextButton
-                    title={text?.signupLink || 'Sign Up'}
-                    onPress={() => handleKeyboardDismiss(onSignup)}
-                    bold
-                    underline
-                    align="center"
-                    color={resolvedTheme.colors.button}
-                    style={signupLinkTextProps}
-                  />
+              shouldRender(onSignup || renderSignupPrompt) && (
+                <View
+                  style={[
+                    styles.signupContainer,
+                    {
+                      bottom: getResponsiveBottomSpacing(35),
+                    },
+                  ]}
+                >
+                  {renderSignupPrompt ? (
+                    renderSignupPrompt({
+                      onPress: () => handleKeyboardDismiss(onSignup),
+                    })
+                  ) : (
+                    <View style={styles.loginRow}>
+                      <Text
+                        style={[styles.loginPrompt, signupTextProps]}
+                        color={resolvedTheme.colors.textPrimary}
+                      >
+                        {text?.signupPrompt || `Don't have an account?`}
+                      </Text>
+                      <TextButton
+                        title={text?.signupLink || 'Sign Up'}
+                        onPress={() => handleKeyboardDismiss(onSignup)}
+                        bold
+                        underline
+                        align="center"
+                        color={resolvedTheme.colors.button}
+                        style={signupLinkTextProps}
+                      />
+                    </View>
+                  )}
                 </View>
               )}
-            </View>
-          )}
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout>
-  );
-};
+          </HideKeyboard>
+        </View>
+      </BackgroundLayout>
+    );
+  }
+);
 
 export default LoginWithEmail;
 

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

@@ -135,6 +135,18 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
     }
   }, [onLoginWithEmail]);
 
+  // Memoize gradient split background
+  const gradientSplitBackground = useMemo(
+    () => (isKeyboardOpen ? 0.3 : 0.4),
+    [isKeyboardOpen]
+  );
+
+  // Memoize disabled state
+  const isDisabled = useMemo(
+    () => loadingSubmitBtn || isLoading,
+    [loadingSubmitBtn, isLoading]
+  );
+
   const styles = useMemo(
     () =>
       StyleSheet.create({
@@ -182,7 +194,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
       theme={overrideTheme}
-      gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
+      gradientSplitBackground={gradientSplitBackground}
     >
       <View
         style={[styles.container, containerStyle]}
@@ -235,7 +247,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                     placeholder={
                       text.phonePlaceholder || DEFAULT_TEXT.phonePlaceholder
                     }
-                    disabled={loadingSubmitBtn || isLoading}
+                    disabled={isDisabled}
                     error={!!errors.phone}
                     errorMessage={errors.phone?.message}
                     inputStyle={inputStyle}
@@ -249,20 +261,20 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
               {renderSubmitButton ? (
                 renderSubmitButton({
                   onPress: handleSubmit(handleFormSubmit),
-                  disabled: !isValid || loadingSubmitBtn || isLoading,
-                  loading: loadingSubmitBtn || isLoading,
+                  disabled: !isValid || isDisabled,
+                  loading: isDisabled,
                 })
               ) : (
                 <Button.Primary
                   title={text.loginButton || DEFAULT_TEXT.loginButton}
-                  disabled={loadingSubmitBtn || !isValid || isLoading}
+                  disabled={!isValid || isDisabled}
                   theme={overrideTheme}
                   onPress={handleSubmit(handleFormSubmit)}
                   loadingText={
                     text.loadingSubmitBtnText ||
                     DEFAULT_TEXT.loadingSubmitBtnText
                   }
-                  loading={loadingSubmitBtn || isLoading}
+                  loading={isDisabled}
                 />
               )}
             </View>

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

@@ -275,15 +275,31 @@ const OTP: React.FC<OTPProps> = ({
     }
   }, [onResendOtp, resendDisabledTime]);
 
-  const isLoading = loading || isSubmitting;
-  const isSubmitDisabled = otp.length !== otpDigitCount || isLoading;
-  const shouldRender = (condition?: boolean | unknown): boolean =>
-    typeof condition === 'function' || !!condition;
+  const isLoading = useMemo(
+    () => loading || isSubmitting,
+    [loading, isSubmitting]
+  );
+  const isSubmitDisabled = useMemo(
+    () => otp.length !== otpDigitCount || isLoading,
+    [otp.length, otpDigitCount, isLoading]
+  );
+  const shouldRender = useMemo(
+    () =>
+      (condition?: boolean | unknown): boolean =>
+        typeof condition === 'function' || !!condition,
+    []
+  );
+
+  // Memoize gradient split background
+  const gradientSplitBackground = useMemo(
+    () => (isKeyboardOpen ? 0.3 : 0.4),
+    [isKeyboardOpen]
+  );
   return (
     <BackgroundLayout
       theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
+      gradientSplitBackground={gradientSplitBackground}
     >
       <View style={[styles.container, containerStyle]}>
         {/* Top Back Button */}