Viktoriia 12 時間 前
コミット
3ff8bf8209
2 ファイル変更17 行追加6 行削除
  1. 16 5
      src/components/TabBarButton/index.tsx
  2. 1 1
      src/types/navigation.ts

+ 16 - 5
src/components/TabBarButton/index.tsx

@@ -1,4 +1,4 @@
-import { Text, View, TouchableWithoutFeedback } from 'react-native';
+import { Text, View, TouchableWithoutFeedback, Dimensions } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 
 import { NAVIGATION_PAGES } from '../../types';
@@ -57,6 +57,9 @@ const TabBarButton = ({
   const unreadMessagesCount = useMessagesStore((state) => state.unreadMessagesCount);
   const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
 
+  const isSmallScreen = Dimensions.get('window').width < 383;
+  const iconSize = isSmallScreen ? 23 : 24;
+
   const route = useRoute();
 
   const focused = useNavigationState((state) => {
@@ -80,7 +83,9 @@ const TabBarButton = ({
     >
       <View style={styles.buttonStyle}>
         <View style={{ alignItems: 'center' }}>
-          {IconComponent && <IconComponent width={24} height={24} fill={currentColor} />}
+          {IconComponent && (
+            <IconComponent width={iconSize} height={iconSize} fill={currentColor} />
+          )}
           {label === NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB && isNotificationActive > 0 && (
             <MessagesDot messagesCount={isNotificationActive} />
           )}
@@ -91,7 +96,7 @@ const TabBarButton = ({
             <View
               style={{
                 backgroundColor: '#0f9113',
-                paddingHorizontal: 4,
+                paddingHorizontal: isSmallScreen ? 3 : 4,
                 paddingVertical: 1,
                 position: 'absolute',
                 top: -2,
@@ -102,7 +107,7 @@ const TabBarButton = ({
               <Text
                 style={{
                   color: Colors.WHITE,
-                  fontSize: 7,
+                  fontSize: isSmallScreen ? 6 : 7,
                   fontFamily: 'montserrat-700'
                 }}
               >
@@ -110,7 +115,13 @@ const TabBarButton = ({
               </Text>
             </View>
           )}
-          <Text style={[styles.labelStyle, { color: currentColor }]}>{label}</Text>
+          <Text
+            style={[styles.labelStyle, { color: currentColor, fontSize: isSmallScreen ? 8.5 : 10 }]}
+            adjustsFontSizeToFit={true}
+            minimumFontScale={0.8}
+          >
+            {label}
+          </Text>
         </View>
         <WarningModal
           type={'unauthorized'}

+ 1 - 1
src/types/navigation.ts

@@ -43,7 +43,7 @@ export enum NAVIGATION_PAGES {
   ADD_PHOTO = 'inAppAddPhoto',
   TRIPS = 'inAppTrips',
   TRIPS_2025 = 'inAppTrips2025',
-  IN_APP_TRIPS_TAB = 'Trips 2025',
+  IN_APP_TRIPS_TAB = "Trips'25",
   ADD_TRIP = 'inAppAddTrip',
   ADD_TRIP_2025 = 'inAppAddTrip2025',
   ADD_REGIONS = 'inAppAddRegions',