Se creó un componente que representa la información de una actividad realizada.

import { Animated, Image, View, Text, StyleSheet } from "react-native";

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

import { AntDesign } from "@expo/vector-icons";

interface TravelDetailsTileProps {

  item: TravelHistoryActivity;

  width: Animated.AnimatedInterpolation<string | number>;

  opacity: Animated.AnimatedInterpolation<string | number>,

}

export const TravelDetailsTile = ({ item, width, opacity }: TravelDetailsTileProps) => {

  return (

    <Animated.View style={{ ...styles.activityContainer, width, opacity }}>

      <Image

        source={{ uri: item.imageUri }}

        style={{ flex: 1, height: "100%", borderTopLeftRadius: 2, borderBottomLeftRadius: 2}}

      />

      <View style={styles.activityContentContainer}>

        <Text numberOfLines={1} style={styles.activityTitle}>{item.name}</Text>

        <Text numberOfLines={1}>{item.startDate.toDateString()} - {item.endDate.toDateString()}</Text>

        <Text numberOfLines={1}>{item.description}</Text>

        <View style={styles.ratingContainer}>

            <Text style={styles.ratingText} numberOfLines={1}>{item.rating.toFixed(1)}</Text>

            <AntDesign name="star" size={20} color="gold" />

        </View>

      </View>

    </Animated.View>

  );

};

const styles = StyleSheet.create({

  activityContainer: {

    height: 200,

    padding: 10,

    alignSelf: "center",

    overflow: "hidden",

    flexDirection: "row",

    backgroundColor: "white",

    elevation: 5,

    marginBottom: 10,

    gap: 10,

    borderRadius: 12,

  },

  activityContentContainer: {

    flex: 1,

    flexDirection: "column",

    gap: 10,

  },

  activityTitle: {

    fontSize: 18,

    fontWeight: "bold",

  },

  ratingContainer: {

    position: "absolute",

    right: 10,

    bottom: 10,

    flexDirection: "row",

    alignItems: "center",

    gap: 5,

  },

  ratingText: {

    fontSize: 16,

  },

});