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

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>
   );

package/src/components/Logo/Logo.tsx

@@ -7,7 +7,7 @@ import { Image, View, type StyleProp, type ImageStyle, type ViewStyle } from 're
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import type { AppTheme } from '../../theme/themes';
 
 interface ILogoProps {
@@ -71,6 +71,7 @@ export const Logo: React.FC<ILogoProps> = ({
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           speed={1000}
+          borderRadius={4}
         >
           <SkeletonPlaceholder.Item
             alignSelf="center"

package/src/components/Search/One.tsx

@@ -5,11 +5,11 @@
 
 import React, { memo, useCallback, useMemo } from 'react';
 import { View, StyleSheet, Platform, FlatList, Keyboard, type ListRenderItem } from 'react-native';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import InputTwo from '../Input/InputTwo';
 import { LucideSearch, XCircle } from 'lucide-react-native';
 import { Text } from '../Text';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { scale, verticalScale } from 'react-native-size-matters';
 import HideKeyboard from '../Keyboard/HideKeyboard';
 import SearchCard, { type SearchCardSkeletonConfig } from './components/SearchCard';
 import { useDebounce } from '../../hooks/useDebounce';
@@ -19,6 +19,7 @@ import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
 import RecentSearchesSection from './components/RecentSearchesSection';
 import Cards from '../Content/Card';
 import type { RecommendedCardStyles } from '../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Types
 export type ISearchItem = IContentData;
@@ -190,7 +191,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
         />
       </View>
 
-      <HideKeyboard>
+      <HideKeyboard keyboardVerticalOffset={scale(10)}>
         <FlatList
           data={isLoading ? skeletonItems : results}
           keyExtractor={(item, idx) => item?._id || `item-${idx}`}
@@ -218,10 +219,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(16)
   },
   recommendedTitle: {
-    fontSize: moderateScale(16)
+    fontSize: RFValue(13)
   },
   emptyText: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(12),
     textAlign: 'center',
     marginTop: verticalScale(20)
   }

package/src/components/Search/components/RecentSearchesSection.tsx

@@ -10,6 +10,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   recentSearches: string[];
@@ -74,7 +75,7 @@ const RecentSearchesSection: React.FC<Props> = ({ recentSearches, isLoading, onP
               accessibilityLabel={`Search for ${item}`}
               activeOpacity={0.7}
             >
-              <RotateCcw size={scale(16)} color={textPrimary} style={styles.pillIcon} />
+              <RotateCcw size={scale(15)} color={textPrimary} style={styles.pillIcon} />
               <Text style={[styles.pillText, { color: textPrimary }]} numberOfLines={1} ellipsizeMode="tail">
                 {item}
               </Text>
@@ -92,7 +93,7 @@ export default memo(RecentSearchesSection);
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: scale(12),
+    paddingVertical: scale(10),
     backgroundColor: 'transparent'
   },
   headerRow: {
@@ -102,12 +103,12 @@ const styles = StyleSheet.create({
     marginBottom: scale(12)
   },
   recentSearchText: {
-    fontSize: scale(14),
-    fontWeight: '700',
+    fontSize: RFValue(12),
+    fontWeight: '600',
     letterSpacing: 0.2
   },
   clearAllText: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     fontWeight: '500',
     textDecorationLine: 'underline'
   },
@@ -124,15 +125,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: scale(5),
-    paddingHorizontal: scale(11),
+    paddingHorizontal: scale(10),
     borderWidth: scale(0.5),
-    paddingVertical: scale(6),
+    paddingVertical: scale(5),
     marginRight: scale(6.5),
     marginBottom: scale(6),
     maxWidth: scale(150)
   },
   pillText: {
-    fontSize: scale(12),
+    fontSize: RFValue(10),
     fontWeight: '500',
     flexShrink: 1
   },
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
     marginBottom: scale(6)
   },
   noResultsText: {
-    fontSize: scale(12),
+    fontSize: RFValue(11),
     fontStyle: 'italic',
     opacity: 0.7
   }

package/src/components/Search/components/SearchCard.tsx

@@ -9,11 +9,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
 
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { Text } from '../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 /**
  * Configuration for SearchCard skeleton rendering.
@@ -170,13 +171,13 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   title: {
-    fontSize: moderateScale(14),
-    fontWeight: '700',
+    fontSize: RFValue(10),
+    fontWeight: '600',
     lineHeight: moderateScale(20),
     marginTop: verticalScale(2)
   },
   description: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(9),
     fontWeight: '400',
     lineHeight: moderateScale(16),
     marginLeft: scale(1),
@@ -184,7 +185,7 @@ const styles = StyleSheet.create({
     flexShrink: 1
   },
   categoryTextLine: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(9),
     textTransform: 'capitalize',
     fontWeight: '500',
     marginLeft: scale(1),

package/src/components/Settings/AppSettings.tsx

@@ -6,7 +6,7 @@
 import React, { useState, isValidElement, cloneElement, type FC, type ReactElement } from 'react';
 import { View, ScrollView, StyleSheet, Switch, TouchableOpacity, type ViewStyle, type TextStyle } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import DeviceInfo from 'react-native-device-info';
 import AppHeader from '../Headers/AppHeader';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -14,6 +14,7 @@ import UserSection, { type UserInfo, type UserInfoTextStyle } from '../User/comp
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // ✅ Types
 interface ToggleMenuItem {
@@ -206,7 +207,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
           />
         ))}
       <ScrollView
-        contentContainerStyle={[styles.scrollContent, { paddingBottom: verticalScale(40) + insets.bottom }]}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: verticalScale(60) + insets.bottom }]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       >
@@ -241,13 +242,13 @@ export const AppSettings: FC<AppSettingsProps> = ({
 
 // ✅ Styles
 const styles = StyleSheet.create({
-  container: { flex: 1 } as ViewStyle,
+  container: { flex: 1 },
   scrollContent: {
     paddingHorizontal: scale(12)
   },
   menuList: {
     marginBottom: verticalScale(16)
-  } as ViewStyle,
+  },
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -257,31 +258,31 @@ const styles = StyleSheet.create({
     borderRadius: moderateScale(8),
     marginBottom: verticalScale(10),
     position: 'relative'
-  } as ViewStyle,
+  },
   menuIcon: {
     marginRight: scale(10),
     alignItems: 'center',
     justifyContent: 'center'
-  } as ViewStyle,
+  },
   menuLabel: {
     flex: 1,
-    fontSize: moderateScale(14),
+    fontSize: RFValue(12),
     fontWeight: '500'
-  } as TextStyle,
+  },
   menuItemContent: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center'
-  } as ViewStyle,
+  },
   switchStyle: {
     transform: [{ scaleX: 1 }, { scaleY: 1 }]
-  } as ViewStyle,
+  },
   versionContainer: {
     alignItems: 'center',
     justifyContent: 'center'
-  } as ViewStyle,
+  },
   versionText: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(10),
     opacity: 0.6
-  } as TextStyle
+  }
 });

package/src/components/Subscription/SubOne.tsx

@@ -6,15 +6,16 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { scale, verticalScale } from 'react-native-size-matters';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { Text } from '../Text';
 import AppHeader from '../Headers/AppHeader';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import Display from '../../utils/Display';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type Plan = {
   id: string;
@@ -215,7 +216,7 @@ const styles = StyleSheet.create({
   container: { flex: 1 },
   content: { flex: 1, paddingTop: verticalScale(16) },
   heading: {
-    fontSize: moderateScale(22),
+    fontSize: RFValue(21),
     fontWeight: '700',
     textAlign: 'center',
     marginBottom: verticalScale(12),
@@ -223,13 +224,13 @@ const styles = StyleSheet.create({
   },
   subText: {
     textAlign: 'center',
-    fontSize: moderateScale(13),
+    fontSize: RFValue(12),
     fontWeight: '400',
     marginBottom: verticalScale(12),
     marginHorizontal: scale(16)
   },
   errorMessage: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     fontWeight: '600',
     textAlign: 'center',
     marginVertical: verticalScale(12)
@@ -253,22 +254,22 @@ const styles = StyleSheet.create({
     elevation: 5
   },
   cardTitle: {
-    fontSize: moderateScale(18),
+    fontSize: RFValue(17),
     fontWeight: '700',
     marginBottom: verticalScale(8)
   },
   price: {
-    fontSize: moderateScale(44),
+    fontSize: RFValue(43),
     fontWeight: 'bold',
     marginBottom: verticalScale(4)
   },
   per: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     textTransform: 'capitalize',
     marginBottom: verticalScale(6)
   },
   platforms: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     textTransform: 'capitalize',
     textAlign: 'center',
     marginBottom: verticalScale(8)
@@ -280,7 +281,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(16)
   },
   benefit: {
-    fontSize: moderateScale(13)
+    fontSize: RFValue(12)
   },
   subscribeButton: {
     paddingVertical: verticalScale(10),
@@ -290,18 +291,18 @@ const styles = StyleSheet.create({
     marginTop: verticalScale(15)
   },
   subscribeText: {
-    fontSize: moderateScale(15),
+    fontSize: RFValue(14),
     fontWeight: '700'
   },
   info: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(11),
     textAlign: 'center',
     fontWeight: '400',
     marginVertical: verticalScale(8),
     marginHorizontal: scale(16)
   },
   cancelText: {
-    fontSize: moderateScale(12),
+    fontSize: RFValue(11),
     textAlign: 'center',
     fontWeight: '400',
     marginBottom: verticalScale(16),
@@ -314,7 +315,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(16)
   },
   extraContentTextText: {
-    fontSize: moderateScale(11),
+    fontSize: RFValue(10),
     marginHorizontal: scale(16),
     fontWeight: '400',
     textAlign: 'center'
@@ -329,7 +330,7 @@ const styles = StyleSheet.create({
     zIndex: 10
   },
   popularText: {
-    fontSize: moderateScale(13),
+    fontSize: RFValue(12),
     textTransform: 'uppercase',
     fontWeight: '700'
   }

package/src/components/TabBar/One.tsx

@@ -7,9 +7,10 @@ import React, { useState } from 'react';
 import { View, Pressable, Platform, StyleSheet } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/';
+import { useTheme } from '../../theme/hook/useTheme';
 import { Text } from '../Text';
 import type { AppTheme, ITheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type ITab = {
   key: string;
@@ -117,10 +118,12 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
       screenOptions={{
         headerShown: false,
         tabBarShowLabel: false,
+        tabBarHideOnKeyboard: true,
+
         tabBarStyle: {
           position: 'absolute',
           bottom: 0,
-          height: Platform.OS === 'ios' ? scale(95) : scale(80),
+          height: scale(80),
           backgroundColor: appliedTheme.colors.background + '80',
           borderTopColor: appliedTheme.colors.border,
           borderTopWidth: 0.5,
@@ -193,7 +196,7 @@ const styles = StyleSheet.create({
   },
   label: {
     marginTop: scale(4),
-    fontSize: scale(11),
+    fontSize: RFValue(10),
     textAlign: 'center'
   }
 });