Se creó la página que muestra un punto de actividad

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

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

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

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

import { ScrollView } from "react-native-gesture-handler";

import { AudioPlayer } from "../../components/audio_player/audio_player";

interface ActivityPointScreenProps {

  stateId: number;

  townId: number;

  activityId: number;

  id: number;

}

export const ActivityPointScreen = ({

  stateId,

  townId,

  activityId,

  id,

}: ActivityPointScreenProps) => {

  const { data, requestStatus } = useGetActivityPoint({

    activityId,

    townId,

    stateId,

    placeNumber: id,

  });

  if (requestStatus === ApiRequestStatus.LOADING) {

    return <FullPageLoader />;

  }

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

    return null;

  }

  return (

    <View style={styles.container}>

      <View style={styles.placeContainer}>

        <Text style={styles.title}>{data.name}</Text>

        <View style={{ height: 30 }} />

        <Image

          source={{ uri: data.imageUrl }}

          style={styles.image}

          resizeMode="contain"

        />

        <ScrollView>

          <Text style={styles.contentText} >{data.content.content}</Text>

        </ScrollView>

      </View>

      <AudioPlayer

        audioUrl={data.content.speakUrl}

        title={data.name}

        description={data.content.content}

      />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    gap: 15,

    justifyContent: "space-between",

  },

  placeContainer: {

    flex: 1,

    gap: 20,

    padding: 20,

  },

  title: {

    fontSize: 24,

    fontWeight: "bold",

    textAlign: "center",

  },

  contentText: {

    fontSize: 16,

  },

  image: {

    height: 300,

    width: "100%",

  },

});