popup layout fix

src/components/RegionPopup/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Text, TouchableOpacity, View, Image, Animated } from 'react-native';
+import { Text, TouchableOpacity, View, Image, Animated, Dimensions } from 'react-native';
 import MarkIcon from 'assets/icons/mark.svg';
 import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
@@ -80,6 +80,8 @@ const RegionPopup: React.FC<RegionPopupProps> = ({
   const renderDurationIcon = (condition: 0 | 1) =>
     condition ? <CheckSvg fill={Colors.DARK_BLUE} /> : <CheckRegularSvg />;
 
+  const isSmallScreen = Dimensions.get('window').width < 383;
+
   return (
     <Animated.View style={[styles.popupContainer, { opacity: fadeAnim }]}>
       <TouchableOpacity
@@ -143,15 +145,24 @@ const RegionPopup: React.FC<RegionPopupProps> = ({
               <View style={styles.durationContainer}>
                 <View style={styles.durationItem}>
                   {renderDurationIcon(userData.slow11)}
-                  <Text style={styles.visitDuration}>11+ days</Text>
+                  <View style={[styles.slowText, isSmallScreen ? { flexDirection: 'column' } : {}]}>
+                    <Text style={styles.visitDuration}>11+ </Text>
+                    <Text style={styles.visitDuration}>days</Text>
+                  </View>
                 </View>
                 <View style={styles.durationItem}>
                   {renderDurationIcon(userData.slow31)}
-                  <Text style={styles.visitDuration}>31+ days</Text>
+                  <View style={[styles.slowText, isSmallScreen ? { flexDirection: 'column' } : {}]}>
+                    <Text style={styles.visitDuration}>31+ </Text>
+                    <Text style={styles.visitDuration}>days</Text>
+                  </View>
                 </View>
                 <View style={styles.durationItem}>
                   {renderDurationIcon(userData.slow101)}
-                  <Text style={styles.visitDuration}>101+ days</Text>
+                  <View style={[styles.slowText, isSmallScreen ? { flexDirection: 'column' } : {}]}>
+                    <Text style={styles.visitDuration}>101+ </Text>
+                    <Text style={styles.visitDuration}>days</Text>
+                  </View>
                 </View>
               </View>
             )}

src/components/RegionPopup/style.tsx

@@ -13,8 +13,7 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
-    // height: 152,
-    marginHorizontal: 24,
+    marginHorizontal: '5%',
     shadowColor: 'rgba(33, 37, 41, 0.12)',
     shadowOffset: { width: 0, height: 4 },
     shadowRadius: 8,
@@ -164,5 +163,10 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontWeight: '600',
     fontSize: getFontSize(10)
+  },
+  slowText: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });