small ui fix trips2025

src/screens/InAppScreens/TravelsScreen/Trips2025Screen/index.tsx

@@ -67,7 +67,10 @@ const TripsScreen = ({ route }: { route: any }) => {
     }
   }, [tripsData]);
 
-  const renderItem = useCallback(({ item }: { item: TripsData }) => <TripItem item={item} isNew={true} />, []);
+  const renderItem = useCallback(
+    ({ item }: { item: TripsData }) => <TripItem item={item} isNew={true} />,
+    []
+  );
 
   const onAddNewTripPress = useCallback(() => {
     navigation.navigate(NAVIGATION_PAGES.ADD_TRIP_2025 as never);
@@ -87,52 +90,6 @@ const TripsScreen = ({ route }: { route: any }) => {
         </TouchableOpacity>
       </View>
 
-      <View
-        style={{
-          paddingHorizontal: 16,
-          paddingVertical: 16,
-          marginVertical: 8,
-          backgroundColor: Colors.FILL_LIGHT,
-          borderRadius: 8
-        }}
-      >
-        <Text
-          style={{
-            fontSize: 14,
-            fontFamily: 'montserrat-700',
-            color: Colors.DARK_BLUE,
-            paddingBottom: 6
-          }}
-        >
-          Annual statistic:
-        </Text>
-
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          X days travelled in total
-        </Text>
-
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          X countries visited
-        </Text>
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          X regions visited
-        </Text>
-
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          X days spent in Y country
-        </Text>
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          X days spent in Y region
-        </Text>
-
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          Countries by time spent ()
-        </Text>
-        <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-          Regions by time spent ()
-        </Text>
-      </View>
-
       {trips.length === 0 ? (
         <View style={styles.noTripsContainer}>
           <View style={styles.noTripsIcon}>
@@ -148,6 +105,53 @@ const TripsScreen = ({ route }: { route: any }) => {
           style={styles.tripsList}
           contentContainerStyle={styles.tripsListContentContainer}
           showsVerticalScrollIndicator={false}
+          ListHeaderComponent={
+            <View
+              style={{
+                paddingHorizontal: 16,
+                paddingVertical: 16,
+                marginVertical: 8,
+                backgroundColor: Colors.FILL_LIGHT,
+                borderRadius: 8
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 14,
+                  fontFamily: 'montserrat-700',
+                  color: Colors.DARK_BLUE,
+                  paddingBottom: 6
+                }}
+              >
+                Annual statistics:
+              </Text>
+
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                X days travelled in total
+              </Text>
+
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                X countries visited
+              </Text>
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                X regions visited
+              </Text>
+
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                X days spent in Y country
+              </Text>
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                X days spent in Y region
+              </Text>
+
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                Countries by time spent ()
+              </Text>
+              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                Regions by time spent ()
+              </Text>
+            </View>
+          }
         />
       )}