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

package/src/components/ContentView/components/AboutSection.tsx

@@ -17,6 +17,7 @@ import { Text } from '../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   theme: ITheme;
@@ -118,20 +119,20 @@ const styles = StyleSheet.create({
     marginTop: verticalScale(7)
   },
   title: {
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     fontWeight: 'bold',
     marginBottom: scale(6)
   },
   body: {
-    fontSize: scale(11.5),
+    fontSize: RFValue(10),
     lineHeight: scale(16),
-    textAlign: 'justify'
+    textAlign: 'auto'
   },
   scrollExpanded: {
     maxHeight: verticalScale(250)
   },
   toggleText: {
-    fontSize: scale(11),
+    fontSize: RFValue(9.5),
     fontWeight: '600',
     marginTop: scale(4)
   }

package/src/components/ContentView/components/CastCard.tsx

@@ -19,6 +19,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { ITheme } from '../../../theme/themes';
 import type { IContentCast } from '../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type StyleProps = {
   container?: StyleProp<ViewStyle>;
@@ -42,7 +43,7 @@ type Props = {
   style?: StyleProps;
 };
 
-const IMAGE_SIZE = scale(80);
+const IMAGE_SIZE = scale(70);
 const PLACEHOLDER_COUNT = 6;
 
 export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onItemPress, style = {} }: Props) => {
@@ -160,7 +161,7 @@ const styles = StyleSheet.create({
     marginVertical: scale(10)
   },
   heading: {
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     fontWeight: 'bold',
     marginBottom: scale(8),
     paddingHorizontal: scale(12)
@@ -180,12 +181,12 @@ const styles = StyleSheet.create({
     marginBottom: scale(6)
   },
   name: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     fontWeight: '500',
     textAlign: 'center'
   },
   role: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     textAlign: 'center',
     marginTop: scale(2)
   },

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -13,6 +13,7 @@ import Display from '../../../utils/Display';
 import type { IContentEpisodes, IContentSeasons } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -26,9 +27,9 @@ const TAB_MARGIN_RIGHT = scale(6);
 const CONTAINER_PADDING_HORIZONTAL = scale(8);
 const CONTAINER_GAP = verticalScale(8);
 const TEXT_PADDING = scale(6);
-const TITLE_FONT_SIZE = scale(12);
-const SUBTITLE_FONT_SIZE = scale(10);
-const SUBTITLE_LINE_HEIGHT = scale(14);
+const TITLE_FONT_SIZE = RFValue(11);
+const SUBTITLE_FONT_SIZE = RFValue(9);
+const SUBTITLE_LINE_HEIGHT = RFValue(13);
 
 // Types
 interface IOnPressParams {
@@ -39,6 +40,7 @@ interface IOnPressParams {
 
 interface EpisodeCardItemProps {
   season_id: string;
+  season_number: number;
   episode: IContentEpisodes;
   onPress: (e: IOnPressParams) => void;
   theme: ITheme;
@@ -55,9 +57,27 @@ interface EpisodeCardProps {
   mode?: 'horizontal' | 'vertical';
 }
 
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  });
+};
+
 // Memoized EpisodeCardItem
 const EpisodeCardItem = memo(
-  ({ season_id, episode, onPress, theme, style, thumbnailHeight, isLoading = false }: EpisodeCardItemProps) => {
+  ({
+    season_id,
+    season_number,
+    episode,
+    onPress,
+    theme,
+    style,
+    thumbnailHeight,
+    isLoading = false
+  }: EpisodeCardItemProps) => {
     const handlePress = useCallback(() => {
       if (!isLoading) {
         onPress?.({ season_id, episode_id: episode._id, episode_number: episode.number });
@@ -174,6 +194,10 @@ const EpisodeCardItem = memo(
             <Text numberOfLines={1} color={theme.colors.textPrimary} style={styles.title}>
               {episode.name || `Episode ${episode.number}`}
             </Text>
+            <Text color={theme.colors.onSurface} style={{ fontSize: RFValue(9), marginTop: verticalScale(2) }}>
+              {`S${String(season_number).padStart(2, '0')} | E${String(episode.number).padStart(2, '0')} | `}
+              {episode.createdAt && formatDate(episode.createdAt)}
+            </Text>
             {!!episode.description && (
               <Text numberOfLines={isVerticalMode ? 4 : 2} color={theme.colors.textSecondary} style={styles.subtitle}>
                 {episode.description}
@@ -246,6 +270,7 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
           theme={theme}
           season_id={selectedSeason._id}
           episode={item}
+          season_number={selectedSeason.season_number}
           onPress={onPress}
           style={{ width: cardWidth }}
           thumbnailHeight={thumbnailHeight}
@@ -259,6 +284,7 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
       <EpisodeCardItem
         theme={theme}
         season_id=""
+        season_number={0}
         episode={{
           _id: '',
           number: 0,

package/src/components/ContentView/components/GenreTags.tsx

@@ -10,6 +10,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   genres?: IContentData['genres'];
@@ -81,7 +82,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start'
   },
   tagText: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     maxWidth: scale(110)
   },
   skeletonTag: {

package/src/components/ContentView/components/HeroBanner.tsx

@@ -15,6 +15,7 @@ import { TrailerButton } from './TrailerButton';
 import BackBtn from '../../Button/BackBtn';
 import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -75,7 +76,7 @@ export const HeroBanner = ({
         },
         errorText: {
           color: theme.colors.textSecondary,
-          fontSize: scale(16),
+          fontSize: RFValue(15),
           textAlign: 'center'
         },
         imageContainer: {

package/src/components/ContentView/components/Title.tsx

@@ -10,6 +10,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   title: IContentData['name'];
@@ -102,19 +103,19 @@ const styles = StyleSheet.create({
     maxWidth: '100%'
   },
   title: {
-    fontSize: scale(18),
+    fontSize: RFValue(17),
     fontWeight: 'bold',
     flexShrink: 1,
     maxWidth: '60%'
   },
   subTitle: {
-    fontSize: scale(18),
+    fontSize: RFValue(17),
     marginLeft: scale(4),
     flexShrink: 1,
     maxWidth: '40%'
   },
   rating: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     marginTop: scale(4)
   }
 });

package/src/components/ContentView/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './ContentView';
+export { default as MoreContentList } from './MoreContentList';

package/src/components/Headers/AppHeader.tsx

@@ -3,12 +3,13 @@
  * @lastModified Sat 21 Jun 2025 at 02:52 PM
  */
 import React from 'react';
-import { View, Pressable, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
-import { useTheme } from '../../theme';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type AppHeaderProps = {
   title: string;
@@ -37,17 +38,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
     <View style={[styles.header, { backgroundColor: appliedTheme.colors.background }, style]}>
       {/* Left icon */}
       {onBackPress && (
-        <Pressable
-          onPress={onBackPress}
-          android_ripple={{
-            color: appliedTheme.colors.surfaceDisabled,
-            borderless: false,
-            radius: scale(20)
-          }}
-          style={styles.iconButton}
-        >
+        <TouchableOpacity onPress={onBackPress} activeOpacity={0.7} style={styles.iconButton}>
           <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
-        </Pressable>
+        </TouchableOpacity>
       )}
 
       {/* Title */}
@@ -55,10 +48,10 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         <Text
           numberOfLines={1}
           style={[
-            styles.title,
             { color: appliedTheme.colors.onBackground },
-            !onBackPress && { fontSize: moderateScale(20) },
-            titleStyle
+            !onBackPress && { ...titleStyle },
+            titleStyle,
+            styles.title
           ]}
         >
           {title}
@@ -67,17 +60,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
 
       {/* Right icon */}
       {rightIcon ? (
-        <Pressable
-          onPress={onRightPress}
-          android_ripple={{
-            color: appliedTheme.colors.surfaceDisabled,
-            borderless: false,
-            radius: scale(20)
-          }}
-          style={styles.iconButton}
-        >
+        <TouchableOpacity onPress={onRightPress} activeOpacity={0.7} style={styles.iconButton}>
           {rightIcon}
-        </Pressable>
+        </TouchableOpacity>
       ) : (
         <View style={styles.iconButton} />
       )}
@@ -89,21 +74,21 @@ export default AppHeader;
 
 const styles = StyleSheet.create({
   header: {
-    height: verticalScale(56),
+    height: verticalScale(40),
     paddingHorizontal: scale(12),
+    paddingBottom: verticalScale(4),
     flexDirection: 'row',
     alignItems: 'center'
   },
   iconButton: {
-    width: scale(40),
-    height: scale(40),
-    borderRadius: scale(20),
+    width: scale(42),
+    height: scale(42),
+    borderRadius: scale(21),
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
     backgroundColor: 'transparent'
   },
-
   titleWrapper: {
     flex: 1,
     justifyContent: 'center'
@@ -113,10 +98,11 @@ const styles = StyleSheet.create({
   },
   leftAligned: {
     alignItems: 'flex-start',
-    paddingLeft: scale(4)
+    paddingLeft: scale(2)
   },
   title: {
-    fontSize: moderateScale(18),
-    fontWeight: 'bold'
+    fontSize: RFValue(14),
+    textTransform: 'capitalize',
+    fontWeight: '500'
   }
 });

package/src/components/Headers/One.tsx

@@ -8,7 +8,7 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import { Menu as DefaultMenuIcon, Search as DefaultSearchIcon } from 'lucide-react-native';
 
 export interface HeaderOneProps {

package/src/components/Headers/Three.tsx

@@ -7,21 +7,22 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderThreeProps {
   logoUri: string;
   category?: React.ReactNode;
   theme?: AppTheme;
+  isLoading?: boolean;
 }
 
-const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme }) => {
+const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme, isLoading }) => {
   const { theme: appliedTheme } = useTheme(theme);
   return (
     <View style={[styles.headerContainer, { backgroundColor: appliedTheme.colors.background }]}>
       <View style={styles.leftContainer}>
         <View style={styles.logo}>
-          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} />
+          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} isLoading={isLoading} />
         </View>
         {category || null}
       </View>

package/src/components/Headers/Two.tsx

@@ -8,16 +8,17 @@ import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import DefaultIcons from '../Icons/NewIndex';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderTwoProps {
   theme?: AppTheme;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
+  isLoading?: boolean;
 }
 
-const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress }) => {
+const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress, isLoading }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const Menu = MenuIcon || DefaultIcons.MenuBar;
@@ -35,7 +36,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuP
         <Menu width={scale(28)} height={scale(28)} />
       </Pressable>
       <View style={styles.logo}>
-        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} />
+        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} isLoading={isLoading} />
       </View>
       <View style={styles.placeholder} />
     </View>

package/src/components/Input/InputOne.tsx

@@ -15,8 +15,9 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
   containerStyle?: ViewStyle;
@@ -95,6 +96,7 @@ const InputOne: React.FC<InputOneProps> = ({
           editable={!disabled}
           placeholderTextColor={placeholderTextColor || (disabled ? textDisabled : textSecondary)}
           secureTextEntry={inputSecure}
+          textContentType={isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'}
           style={[
             styles.input,
             {
@@ -135,7 +137,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(4)
   },
   label: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     fontWeight: '500',
     backgroundColor: 'transparent'
   },
@@ -149,11 +151,11 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     width: '100%',
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     minHeight: verticalScale(30)
   },
   errorText: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     marginTop: verticalScale(4),
     marginLeft: scale(8)
   }

package/src/components/Input/InputTwo.tsx

@@ -16,8 +16,9 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
   containerStyle?: ViewStyle;
@@ -158,7 +159,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(4)
   },
   label: {
-    fontSize: scale(12),
+    fontSize: RFValue(11),
     fontWeight: '500',
     backgroundColor: 'transparent'
   },
@@ -176,12 +177,12 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     minHeight: verticalScale(30),
     padding: 0
   },
   errorText: {
-    fontSize: scale(12),
+    fontSize: RFValue(11),
     marginTop: verticalScale(4),
     marginLeft: scale(8)
   }

package/src/components/Input/PhoneNumberInput.tsx

@@ -20,8 +20,9 @@ import { getExampleNumber } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import debounce from 'lodash.debounce';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface PhoneNumberInputProps extends Pick<AccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> {
   value: string;
@@ -99,7 +100,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode ? `+${inputCallingCode}` : ''
+          countryCode: inputCallingCode
         });
         return;
       }
@@ -109,7 +110,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: inputCallingCode ? `+${inputCallingCode}` : ''
+          countryCode: inputCallingCode
         });
         return;
       }
@@ -119,7 +120,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: `+${inputCallingCode}`
+          countryCode: inputCallingCode
         });
         return;
       }
@@ -129,7 +130,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: `+${inputCallingCode}`
+          countryCode: inputCallingCode
         });
         return;
       }
@@ -142,14 +143,14 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
         onChangeText({
           fullNumber: e164,
           formattedNumber: formattedText,
-          countryCode: `+${inputCallingCode}`
+          countryCode: inputCallingCode
         });
       } else {
         setInputError('Please enter a valid phone number');
         onChangeText({
           fullNumber: '',
           formattedNumber: formattedText,
-          countryCode: `+${inputCallingCode}`
+          countryCode: inputCallingCode
         });
       }
     },
@@ -329,7 +330,7 @@ const styles = StyleSheet.create({
     borderRadius: scale(4)
   },
   label: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     fontWeight: '500',
     letterSpacing: 0.3
   },
@@ -359,12 +360,12 @@ const styles = StyleSheet.create({
   },
   textInput: {
     flex: 1,
-    fontSize: scale(18),
+    fontSize: RFValue(16),
     padding: 0,
     fontWeight: '400'
   },
   codeTextStyle: {
-    fontSize: scale(18),
+    fontSize: RFValue(16),
     fontWeight: '500'
   },
   countryPickerButtonStyle: {
@@ -373,7 +374,7 @@ const styles = StyleSheet.create({
     marginLeft: scale(-4)
   },
   errorText: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     marginTop: verticalScale(8),
     marginLeft: scale(12),
     fontWeight: '400',

package/src/components/Keyboard/HideKeyboard.tsx

@@ -1,17 +1,19 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 16 Jun 2025 at 12:35 PM
+ * @lastModified Fri 08 Aug 2025 at 08:14 AM
  */
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   TouchableWithoutFeedback,
   Keyboard,
   KeyboardAvoidingView,
-  Platform,
   StyleSheet,
+  Animated,
+  Platform,
+  StatusBar,
   type ViewStyle
 } from 'react-native';
-import { verticalScale } from 'react-native-size-matters';
+import { scale } from 'react-native-size-matters';
 
 interface HideKeyboardProps {
   children: React.ReactNode;
@@ -23,24 +25,48 @@ interface HideKeyboardProps {
 const HideKeyboard: React.FC<HideKeyboardProps> = ({
   children,
   containerStyle,
-  behavior = Platform.OS === 'ios' ? 'padding' : 'padding',
-  keyboardVerticalOffset = Platform.OS === 'ios' ? verticalScale(-90) : verticalScale(-40)
+  behavior = 'padding',
+  keyboardVerticalOffset = scale(-160)
 }) => {
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+
+  // Platform-based offset
+  const offset = keyboardVerticalOffset ?? (Platform.OS === 'ios' ? 0 : (StatusBar.currentHeight ?? 0));
+
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSub = Keyboard.addListener(showEvent, () => {
+      Animated.timing(fadeAnim, {
+        toValue: 0.98,
+        duration: 250,
+        useNativeDriver: true
+      }).start();
+    });
+
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true
+      }).start();
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [fadeAnim]);
+
   return (
     <KeyboardAvoidingView
       style={[styles.keyboardAvoidingView, containerStyle]}
       behavior={behavior}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      enabled={true}
+      keyboardVerticalOffset={offset}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <KeyboardAvoidingView
-          style={[styles.keyboardAvoidingView, containerStyle]}
-          behavior={behavior}
-          keyboardVerticalOffset={keyboardVerticalOffset}
-        >
-          {children}
-        </KeyboardAvoidingView>
+        <Animated.View style={{ flex: 1, transform: [{ scale: fadeAnim }] }}>{children}</Animated.View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );