@zezosoft/zezo-ott-react-native-ui-kit 1.0.0 → 1.0.2

package/lib/typescript/src/types/content/content-view.types.d.ts

@@ -9,6 +9,7 @@ import type { IContentData } from '../../types';
 import type { IGetSectionData, ISectionItem } from '../../types/sections';
 import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
 import type { IHistoryItem } from '../../components/User/WatchHistory/WatchHistory';
+import type React from 'react';
 export type ViewStyleProp = StyleProp<ViewStyle>;
 export type TextStyleProp = StyleProp<TextStyle>;
 export type FastImageStyleProp = StyleProp<FastImageStyle>;
@@ -87,11 +88,12 @@ export type ContentViewEvents = {
 };
 export type MenuAction = {
     label: string;
-    icon: React.ComponentType<{
+    icon?: (props: {
         size?: number;
         color?: string;
-    }>;
+    }) => React.ReactNode;
     onPress: () => void;
+    isLoading?: boolean;
 };
 export type RenderButtons = Partial<{
     back: () => React.ReactNode;
@@ -110,7 +112,9 @@ export type HeroBannerProps = {
     title: IContentData['name'];
     theme: ITheme;
     isLoading?: boolean;
-    onPressPlay?: () => void;
+    onPressPlay?: ({ is_trailer }: {
+        is_trailer: boolean;
+    }) => void;
     onBackPress?: () => void;
     style?: ViewStyleProp;
     renderButtons?: RenderButtons;

package/lib/typescript/src/types/content/content-view.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-view.types.d.ts","sourceRoot":"","sources":["../../../../../src/types/content/content-view.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"content-view.types.d.ts","sourceRoot":"","sources":["../../../../../src/types/content/content-view.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zezosoft/zezo-ott-react-native-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A professional React Native UI component library built for OTT applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -52,10 +52,11 @@
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-navigation/bottom-tabs": "^7.4.1",
     "@react-navigation/native": "^7.1.13",
+    "color": "^5.0.0",
     "crypto-js": "^4.2.0",
     "libphonenumber-js": "^1.12.9",
     "lodash": "^4.17.21",
-    "lottie-react-native": "^7.2.3",
+    "lottie-react-native": "^7.0.0",
     "lucide-react-native": "^0.515.0",
     "react-hook-form": "^7.57.0",
     "react-native-animated-dots-carousel": "^2.0.1",

package/src/components/Account/Account.tsx

@@ -6,7 +6,7 @@
 import React, { cloneElement, isValidElement, memo, type ReactElement } from 'react';
 import { View, StyleSheet, ScrollView, TouchableOpacity, type TextStyle } from 'react-native';
 import { ChevronRight, Trash2 } from 'lucide-react-native';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import AppHeader from '../Headers/AppHeader';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -15,6 +15,7 @@ import TextButton from '../Button/TextButton';
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { AppTheme, ITheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type CardItem = {
   type: 'card';
@@ -226,7 +227,7 @@ const styles = StyleSheet.create({
     marginBottom: verticalScale(16)
   },
   sectionTitle: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(11),
     fontWeight: '500',
     marginBottom: verticalScale(8),
     textTransform: 'uppercase'
@@ -238,12 +239,12 @@ const styles = StyleSheet.create({
     marginBottom: verticalScale(12)
   },
   cardTitle: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(12),
     fontWeight: '600',
     marginBottom: verticalScale(4)
   },
   cardSub: {
-    fontSize: moderateScale(12)
+    fontSize: RFValue(10)
   },
 
   row: {
@@ -267,7 +268,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   rowText: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(12),
     fontWeight: '500'
   },
 
@@ -283,6 +284,6 @@ const styles = StyleSheet.create({
     gap: scale(1)
   },
   helpText: {
-    fontSize: moderateScale(12)
+    fontSize: RFValue(10)
   }
 });

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

@@ -10,12 +10,13 @@ import { Input } from '../../Input/Input';
 import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
-import { useTheme } from '../../../theme';
+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';
 
 type FormValues = {
   email: string;
@@ -31,7 +32,7 @@ type TextConfig = {
 
 type ForgetPasswordProps = {
   title?: string;
-  onSubmit?: (values: FormValues) => Promise<void>;
+  onSubmit?: ({ email }: { email: string }) => Promise<void> | void;
   onTopBackBtnPress?: () => void;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
@@ -39,11 +40,15 @@ type ForgetPasswordProps = {
   inputStyle?: TextStyle;
   inputContainerStyle?: ViewStyle;
   topBackBtnStyle?: ViewStyle;
-  backgroundImage?: string;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
   logoUri?: string;
   theme?: AppTheme;
   loadingSubmitBtn?: boolean;
-  gradientEnabled?: boolean;
   text?: TextConfig;
   renderLogo?: () => React.ReactNode;
   renderForgetPasswordHeader?: () => React.ReactNode;
@@ -65,8 +70,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   loadingSubmitBtn = false,
   backgroundImage,
   logoUri,
-  theme,
-  gradientEnabled = true,
+  theme: overrideTheme,
   text = {
     emailLabel: 'Email',
     emailPlaceholder: 'Enter your email',
@@ -88,7 +92,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     mode: 'onChange'
   });
 
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -117,20 +121,24 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
 
   return (
     <BackgroundLayout
-      gradientEnabled={gradientEnabled}
-      backgroundImage={backgroundImage}
-      gradientSplit={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
     >
-      <HideKeyboard>
-        <View style={[styles.container, containerStyle]}>
-          {/* Top Back Button */}
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
-            (renderTopBackBtn ? (
-              renderTopBackBtn({ onPress: onTopBackBtnPress ?? (() => {}) })
+      <View style={[styles.container, containerStyle]}>
+        {/* Top Back Button */}
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
+              renderTopBackBtn({
+                onPress: onTopBackBtnPress ?? (() => {})
+              })
             ) : (
-              <BackBtn theme={appliedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
-            ))}
-
+              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
           <View style={styles.centerContent}>
             {/* Logo */}
             {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
@@ -171,7 +179,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -191,7 +199,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                 <Button.Primary
                   title={text.forgetPasswordButton || 'Continue'}
                   disabled={isSubmitDisabled || !isValid}
-                  theme={appliedTheme}
+                  theme={resolvedTheme}
                   loading={loadingSubmitBtn || isLoading}
                   loadingText={text.loadingSubmitBtnText || 'Please wait...'}
                   onPress={handleSubmit(handleFormSubmit)}
@@ -200,16 +208,20 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
             </View>
 
             {/* Bottom Info Text */}
-            {!isKeyboardOpen && renderBottomInfoText ? (
-              renderBottomInfoText()
-            ) : text.bottomInfoText ? (
-              <Text style={styles.bottomInfo} accessibilityRole="text" testID="bottom-info-text">
-                {text.bottomInfoText}
-              </Text>
-            ) : null}
+            {!isKeyboardOpen && (
+              <>
+                {renderBottomInfoText ? (
+                  renderBottomInfoText()
+                ) : text.bottomInfoText ? (
+                  <Text style={styles.bottomInfo} accessibilityRole="text" testID="bottom-info-text">
+                    {text.bottomInfoText}
+                  </Text>
+                ) : null}
+              </>
+            )}
           </View>
-        </View>
-      </HideKeyboard>
+        </HideKeyboard>
+      </View>
     </BackgroundLayout>
   );
 };
@@ -226,14 +238,21 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  topBackBtnWrapper: {
+    position: 'absolute',
+    top: verticalScale(6),
+    left: 0,
+    zIndex: 10
+  },
   centerContent: {
+    flex: 1,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
     gap: verticalScale(16)
   },
   title: {
-    fontSize: scale(24),
+    fontSize: RFValue(23),
     fontWeight: '700',
     marginTop: verticalScale(12),
     marginBottom: verticalScale(20),
@@ -246,7 +265,7 @@ const styles = StyleSheet.create({
   },
   bottomInfo: {
     marginTop: verticalScale(15),
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     fontWeight: '500',
     textAlign: 'center',
     opacity: 0.7

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

@@ -11,12 +11,13 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 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 { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
   email: string;
@@ -37,12 +38,16 @@ type LoginWithEmailProps = {
   topBackBtnStyle?: ViewStyle;
   inputContainerStyle?: ViewStyle;
   minPasswordLength?: number;
-  backgroundImage?: string;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
   logoUri?: string;
   loadingSubmitBtn?: boolean;
 
   theme?: AppTheme;
-  gradientEnabled?: boolean;
   text?: {
     emailLabel?: string;
     emailPlaceholder?: string;
@@ -83,8 +88,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   minPasswordLength = 6,
   backgroundImage,
   logoUri,
-  theme,
-  gradientEnabled,
+  theme: overrideTheme,
   text,
   signupTextProps,
   signupLinkTextProps,
@@ -97,7 +101,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   renderTopBackBtn
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
   const {
     control,
@@ -132,20 +136,23 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
 
   return (
     <BackgroundLayout
-      gradientEnabled={gradientEnabled}
-      backgroundImage={backgroundImage}
-      gradientSplit={isKeyboardOpen ? 0.31 : 0.35}
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={isKeyboardOpen ? 0.31 : 0.35}
     >
-      <HideKeyboard keyboardVerticalOffset={verticalScale(-150)}>
-        <View style={[styles.container, containerStyle]}>
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
-            (renderTopBackBtn ? (
+      <View style={[styles.container, containerStyle]}>
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
               renderTopBackBtn({
                 onPress: onTopBackBtnPress ?? (() => {})
               })
             ) : (
-              <BackBtn theme={appliedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
-            ))}
+              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
           <View style={styles.centerContent}>
             {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
 
@@ -177,7 +184,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -213,10 +220,12 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                       errorMessage={errors.password?.message}
                       inputStyle={inputStyle}
                       containerStyle={inputContainerStyle}
-                      textContentType="password"
+                      textContentType="none"
                       autoCapitalize="none"
+                      spellCheck={false}
                       autoCorrect={false}
-                      theme={appliedTheme}
+                      autoComplete="off"
+                      theme={resolvedTheme}
                     />
                     {!isKeyboardOpen &&
                       shouldRender(renderForgotPassword || onForgotPassword) &&
@@ -226,7 +235,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                         <TextButton
                           title={text?.forgotPassword || 'Forgot password?'}
                           onPress={() => handleKeyboardDismiss(onForgotPassword)}
-                          color={appliedTheme.colors.button}
+                          color={resolvedTheme.colors.button}
                           align="right"
                           style={styles.forgotPasswordText}
                         />
@@ -247,7 +256,10 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     title={text?.loginButton || 'Login'}
                     onPress={handleSubmit(handleFormSubmit)}
                     disabled={loadingSubmitBtn || !isValid || isLoading}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
+                    titleStyle={{
+                      fontSize: RFValue(14)
+                    }}
                     loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
                     loading={loadingSubmitBtn || isLoading}
                   />
@@ -264,7 +276,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                 <TextButton
                   title={text?.switchToPhoneLogin || 'Login with Phone'}
                   onPress={() => handleKeyboardDismiss(onSwitchToPhoneLogin)}
-                  color={appliedTheme.colors.button}
+                  color={resolvedTheme.colors.button}
                   style={styles.switchPhoneText}
                   underline
                   bold
@@ -281,7 +293,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                 })
               ) : (
                 <View style={styles.loginRow}>
-                  <Text style={[styles.loginPrompt, signupTextProps]} color={appliedTheme.colors.textPrimary}>
+                  <Text style={[styles.loginPrompt, signupTextProps]} color={resolvedTheme.colors.textPrimary}>
                     {text?.signupPrompt || `Don't have an account?`}
                   </Text>
                   <TextButton
@@ -290,15 +302,15 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     bold
                     underline
                     align="center"
-                    color={appliedTheme.colors.button}
+                    color={resolvedTheme.colors.button}
                     style={signupLinkTextProps}
                   />
                 </View>
               )}
             </View>
           )}
-        </View>
-      </HideKeyboard>
+        </HideKeyboard>
+      </View>
     </BackgroundLayout>
   );
 };
@@ -313,13 +325,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  topBackBtnWrapper: {
+    position: 'absolute',
+    top: verticalScale(6),
+    left: 0,
+    zIndex: 10
+  },
   centerContent: {
+    flex: 1,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
   },
   title: {
-    fontSize: scale(22),
+    fontSize: RFValue(21),
     fontWeight: '700',
     marginTop: verticalScale(5),
     marginBottom: verticalScale(20)

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

@@ -12,13 +12,14 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 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 { RFValue } from 'react-native-responsive-fontsize';
 
 type PhoneField = {
   fullNumber: string;
@@ -40,11 +41,15 @@ type LoginWithPhoneProps = {
   inputStyle?: TextStyle;
   inputContainerStyle?: ViewStyle;
   topBackBtnStyle?: ViewStyle;
-  backgroundImage?: string;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
   loadingSubmitBtn?: boolean;
   logoUri?: string;
   theme?: AppTheme;
-  gradientEnabled?: boolean;
   text?: {
     phoneLabel?: string;
     phonePlaceholder?: string;
@@ -81,8 +86,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   backgroundImage,
   loadingSubmitBtn,
   logoUri,
-  theme,
-  gradientEnabled = true,
+  theme: overrideTheme,
   text = DEFAULT_TEXT,
   renderLogo,
   renderPhoneHeader,
@@ -92,7 +96,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   renderTopBackBtn
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
 
   const {
@@ -101,7 +105,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
     formState: { errors, isValid }
   } = useForm<FormValues>({
     defaultValues: {
-      phone: { fullNumber: '', countryCode: '+91', formattedNumber: '' }
+      phone: { fullNumber: '', countryCode: '91', formattedNumber: '' }
     },
     mode: 'onChange'
   });
@@ -137,18 +141,25 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
           justifyContent: 'center',
           alignItems: 'center'
         },
+        topBackBtnWrapper: {
+          position: 'absolute',
+          top: verticalScale(6),
+          left: 0,
+          zIndex: 10
+        },
         centerContent: {
+          flex: 1,
           width: '100%',
           alignItems: 'center',
           justifyContent: 'center',
           maxWidth: scale(400)
         },
         title: {
-          fontSize: scale(22),
+          fontSize: RFValue(21),
           fontWeight: '700',
           marginTop: verticalScale(8),
           marginBottom: verticalScale(24),
-          color: appliedTheme.colors.textPrimary
+          color: resolvedTheme.colors.textPrimary
         },
         form: {
           width: '100%',
@@ -159,25 +170,28 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
           marginTop: verticalScale(10)
         }
       }),
-    [appliedTheme]
+    [resolvedTheme]
   );
   const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
-      gradientEnabled={gradientEnabled}
-      backgroundImage={backgroundImage}
-      gradientSplit={isKeyboardOpen ? 0.3 : 0.4}
+      backgroundImage={backgroundImage?.source}
+      theme={resolvedTheme}
+      gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
-      <HideKeyboard keyboardVerticalOffset={verticalScale(-80)}>
-        <View style={[styles.container, containerStyle]} testID="login-with-phone">
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
-            (renderTopBackBtn ? (
+      <View style={[styles.container, containerStyle]} testID="login-with-phone">
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
               renderTopBackBtn({
                 onPress: onTopBackBtnPress ?? (() => {})
               })
             ) : (
-              <BackBtn theme={appliedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
-            ))}
+              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
           <View style={styles.centerContent}>
             {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
 
@@ -201,7 +215,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                     errorMessage={errors.phone?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                     accessibilityLabel={`Phone input${errors.phone ? ', error' : ''}`}
                   />
                 )}
@@ -217,7 +231,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 <Button.Primary
                   title={text.loginButton || DEFAULT_TEXT.loginButton}
                   disabled={loadingSubmitBtn || !isValid || isLoading}
-                  theme={appliedTheme}
+                  theme={resolvedTheme}
                   onPress={handleSubmit(handleFormSubmit)}
                   loadingText={text.loadingSubmitBtnText || DEFAULT_TEXT.loadingSubmitBtnText}
                   loading={loadingSubmitBtn || isLoading}
@@ -232,7 +246,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 <TextButton
                   title={text.loginWithEmailButton || DEFAULT_TEXT.loginWithEmailButton}
                   onPress={handleEmailLogin}
-                  color={appliedTheme.colors.button}
+                  color={resolvedTheme.colors.button}
                   style={styles.switchEmailText}
                   underline
                   bold
@@ -240,8 +254,8 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 />
               ))}
           </View>
-        </View>
-      </HideKeyboard>
+        </HideKeyboard>
+      </View>
     </BackgroundLayout>
   );
 };