Se creó el componente que representa una lista de actividades

import { useRef } from "react";

import {

  View,

  Text,

  FlatList,

  Dimensions,

  Animated,

  StyleSheet,

} from "react-native";

import { TravelHistoryActivity } from "../../domain/entities/travel_details";

import { TravelDetailsTile } from "./travel_details_tile";

const HORIZONTAL_SPACING = 20;

const VERTICAL_SPACING = 10;

const ITEM_HEIGHT = 200;

const FULL_SIZE = ITEM_HEIGHT + VERTICAL_SPACING;

const ITEM_WIDTH = Dimensions.get("window").width - HORIZONTAL_SPACING * 2;

interface TravelActivityListProps {

  activityList: TravelHistoryActivity[];

}

export const TravelActivityList = ({

  activityList,

}: TravelActivityListProps) => {

  const scrollRef = useRef(new Animated.Value(0)).current;

  return (

    <View style={styles.detailsContainer}>

      <Text style={styles.activitiesText}>Actividades</Text>

      <FlatList

        data={[...activityList, ...activityList, ...activityList]}

        style={{ paddingVertical: VERTICAL_SPACING }}

        ListFooterComponent={<View style={{ height: VERTICAL_SPACING }} />}

        keyExtractor={(item, index) => index.toString()}

        onScroll={Animated.event(

          [{ nativeEvent: { contentOffset: { y: scrollRef } } }],

          { useNativeDriver: false }

        )}

        renderItem={({ item, index }) => {

          const widthRange = [FULL_SIZE * index, FULL_SIZE * (index + 1.5)];

          const width = scrollRef.interpolate({

            inputRange: widthRange,

            outputRange: [ITEM_WIDTH, 0],

            extrapolate: "clamp",

          });

          const opacityRange = [FULL_SIZE * index, FULL_SIZE * (index + 1)];

          const opacity = scrollRef.interpolate({

            inputRange: opacityRange,

            outputRange: [1, 0],

            extrapolate: "clamp",

          });

          return (

            <TravelDetailsTile item={item} width={width} opacity={opacity} />

          );

        }}

      />

    </View>

  );

};

const styles = StyleSheet.create({

  detailsContainer: {

    flex: 7,

  },

  activitiesText: {

    textAlign: "center",

    paddingVertical: 10,

    fontSize: 20,

    fontWeight: "bold",

    borderBottomColor: "gray",

    borderBottomWidth: 1,

    marginHorizontal: 30,

  },

});