small changes

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

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { View, Text, Image, TouchableOpacity, Platform } from 'react-native';
+import { View, Text, Image, TouchableOpacity, Linking, Dimensions, FlatList } from 'react-native';
 import ImageView from 'better-react-native-image-viewing';
 import { styles } from './styles';
 import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
@@ -12,16 +12,41 @@ import { API_HOST } from 'src/constants';
 import { StoreType, storage } from 'src/storage';
 import { ButtonVariants } from 'src/types/components';
 import formatNumber from '../../TravelsScreen/utils/formatNumber';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 import ChevronLeft from 'assets/icons/chevron-left.svg';
 import MapSvg from 'assets/icons/travels-screens/map-location.svg';
 import AddImgSvg from 'assets/icons/travels-screens/add-img.svg';
 import ShareIcon from 'assets/icons/share.svg';
 
+const testData = [
+  {
+    id: 1,
+    title: 'Attachment 1',
+    url: ''
+  },
+  {
+    id: 2,
+    title: 'Attachment 2',
+    url: ''
+  },
+  {
+    id: 3,
+    title: 'Attachment 3',
+    url: ''
+  },
+  {
+    id: 4,
+    title: 'Attachment 4',
+    url: ''
+  }
+];
+
 const EventsScreen = () => {
   const token = (storage.get('token', StoreType.STRING) as string) ?? null;
   const navigation = useNavigation();
   const [isLoading, setIsLoading] = useState(true);
+  const fileWidth = Dimensions.get('window').width / 5;
 
   return (
     <View style={styles.container}>
@@ -227,6 +252,43 @@ const EventsScreen = () => {
 
           <View style={{ gap: 16 }}>
             <Text style={styles.travelSeriesTitle}>Attachments</Text>
+            <FlatList
+              data={testData}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{ gap: 4 }}
+                  onPress={() => {
+                    // Linking.openURL(item.url);
+                  }}
+                >
+                  <View
+                    style={{
+                      backgroundColor: Colors.FILL_LIGHT,
+                      borderRadius: 8,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      height: fileWidth,
+                      width: fileWidth
+                    }}
+                  >
+                    <MaterialCommunityIcons name="file" size={36} color={Colors.DARK_BLUE} />
+                  </View>
+                  <Text style={{ fontSize: 12, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                    {item.title}
+                  </Text>
+                </TouchableOpacity>
+              )}
+              style={{ flex: 1 }}
+              contentContainerStyle={{
+                flex: 1,
+                gap: 8
+              }}
+              keyExtractor={(item) => item.id.toString()}
+              numColumns={4}
+              columnWrapperStyle={{ justifyContent: 'space-between' }}
+              showsVerticalScrollIndicator={false}
+              scrollEnabled={false}
+            />
           </View>
         </View>
       </ScrollView>