Se creó una pantalla que representa los detalles de un viaje

import {

  View,

  Text,

  StyleSheet,

  Image,

  Dimensions,

} from "react-native";

import { useGetTravelDetails } from "../../hooks/useGetTravelDetails";

import { ApiRequestStatus } from "../../constants/api_request_states";

import { FullPageLoader } from "../../common/components/full_page_loader";

import { TravelActivityList } from "../../travel_history/components/activity_list";

interface TravelDetailsPageProps {

  id: number;

}

export const TravelDetailsPage = ({ id }: TravelDetailsPageProps) => {

  const { data, requestStatus } = useGetTravelDetails({ id });

  if (requestStatus === ApiRequestStatus.LOADING) {

    return <FullPageLoader />;

  }

  if (requestStatus === ApiRequestStatus.ERROR || !data) {

    return (

      <View style={styles.container}>

        <Text>Failed to load travel details</Text>

      </View>

    );

  }

  return (

    <View style={styles.container}>

      <View style={styles.imageContainer}>

        <Image

          source={{ uri: data.travel.imageUri }}

          style={styles.image}

          resizeMode="cover"

        />

        <View style={styles.imageTextContainer}>

          <Text style={styles.destinationText}>{data.travel.destination}</Text>

          <Text>

            {data.travel.startDate.toDateString()} -{" "}

            {data.travel.endDate.toDateString()}

          </Text>

          <Text>{`Numero de actividades: ${data.activityList.length}`}</Text>

        </View>

      </View>

      <TravelActivityList activityList={data.activityList} />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  imageContainer: {

    flex: 3,

    backgroundColor: "black",

    justifyContent: "center",

    alignItems: "center",

  },

  image: {

    position: "absolute",

    width: "100%",

    height: "100%",

    opacity: 0.8,

  },

  imageTextContainer: {

    height: "80%",

    width: "80%",

    backgroundColor: "rgba(255, 255, 255, 0.8)",

    borderRadius: 10,

    padding: 20,

    gap: 10,

  },

  destinationText: {

    fontSize: 30,

    fontWeight: "bold",

  },

});