trips accordion btn

src/screens/InAppScreens/TravelsScreen/Components/TripItem/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import moment from 'moment';
 
@@ -11,9 +11,11 @@ import { styles } from './styles';
 
 import CalendarIcon from 'assets/icons/travels-screens/calendar.svg';
 import EditIcon from 'assets/icons/travels-screens/pen-to-square.svg';
+import ArrowIcon from 'assets/icons/chevron-left.svg';
 
 const TripItem = ({ item }: { item: TripsData }) => {
   const navigation = useNavigation();
+  const [showAllRegions, setShowAllRegions] = useState(false);
 
   const formatDate = (dateString: string) => {
     const date = moment(dateString);
@@ -29,6 +31,12 @@ const TripItem = ({ item }: { item: TripsData }) => {
     );
   };
 
+  const MAX_VISIBLE_REGIONS = 3;
+  const totalRegions = item.regions?.length || 0;
+  const visibleRegions = showAllRegions
+    ? item.regions
+    : item.regions?.slice(0, MAX_VISIBLE_REGIONS);
+
   return (
     <View style={styles.tripItemContainer}>
       <View style={styles.tripHeaderContainer}>
@@ -59,13 +67,8 @@ const TripItem = ({ item }: { item: TripsData }) => {
       )}
 
       <Text style={styles.visitedRegionsTitle}>Visited regions</Text>
-      <ScrollView
-        style={styles.regionsScrollView}
-        showsVerticalScrollIndicator={false}
-        horizontal={false}
-        nestedScrollEnabled={true}
-      >
-        {item.regions?.map((region, index) => {
+      <View style={styles.regionsContainer}>
+        {visibleRegions?.map((region, index) => {
           if (!region.id || !region.region_name) return null;
           const [name, ...rest] = region.region_name?.split(/ – | - /);
           const subname = rest?.join(' - ');
@@ -86,7 +89,23 @@ const TripItem = ({ item }: { item: TripsData }) => {
             </View>
           );
         })}
-      </ScrollView>
+      </View>
+
+      {totalRegions > MAX_VISIBLE_REGIONS && (
+        <TouchableOpacity
+          style={styles.showMoreButton}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          onPress={() => setShowAllRegions(!showAllRegions)}
+        >
+          <ArrowIcon
+            fill={Colors.DARK_BLUE}
+            style={[styles.headerIcon, showAllRegions ? styles.rotate : null]}
+          />
+          <Text style={styles.showMoreText}>
+            {showAllRegions ? 'Show less' : `Show more (${totalRegions - MAX_VISIBLE_REGIONS})`}
+          </Text>
+        </TouchableOpacity>
+      )}
     </View>
   );
 };

src/screens/InAppScreens/TravelsScreen/Components/TripItem/styles.tsx

@@ -66,8 +66,7 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     marginBottom: 8
   },
-  regionsScrollView: {
-    maxHeight: 200,
+  regionsContainer: {
     paddingHorizontal: 8
   },
   regionItem: {
@@ -96,5 +95,23 @@ export const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '500',
     color: Colors.DARK_BLUE
+  },
+  showMoreButton: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 10,
+    paddingVertical: 12
+  },
+  showMoreText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: Colors.DARK_BLUE
+  },
+  headerIcon: {
+    transform: [{ rotate: '-90deg' }]
+  },
+  rotate: {
+    transform: [{ rotate: '90deg' }]
   }
 });