Se creó la pagina donde se muestran las actividades que estan disponibles en un pueblo

import {

  View,

  Text,

  FlatList,

  Button,

  StyleSheet,

  Touchable,

  TouchableOpacity,

} from "react-native";

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

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

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

import { ActivityTile } from "../../components/activity_tile/activity_tile";

import { LIGTHT_THEME } from "../../constants/theme";

import { router } from "expo-router";

interface TownActivitiesPageProps {

  townId: number;

  stateId: number;

}

export const TownActivitiesPage = ({ townId, stateId }: TownActivitiesPageProps) => {

  const { activities, requestStatus } = useGetActivities(townId);

  if (requestStatus === ApiRequestStatus.LOADING) {

    return <FullPageLoader />;

  }

  const handleViewActivity = (activityId: number) =>{

    router.push(`/state/${stateId}/activity?townId=${townId}&activityId=${activityId}`);

  }

  return (

    <View style={styles.container}>

      <FlatList

        data={activities}

        style={styles.activities_container}

        renderItem={({ item }) => <ActivityTile onPress={handleViewActivity} activity={item} />}

        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}

        ListFooterComponent={() => <View style={{ height: 70 }} />}

        keyExtractor={(item) => item.id.toString()}

      />

      <TouchableOpacity

        style={styles.generate_route_button}

        activeOpacity={0.8}

      >

        <Text style={styles.generate_router_button_text}>Generate Route</Text>

      </TouchableOpacity>

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    padding: 10,

  },

  activities_container: {

    flex: 1,

    width: "100%",

  },

  generate_route_button: {

    position: "absolute",

    justifyContent: "center",

    alignItems: "center",

    backgroundColor: LIGTHT_THEME.color.primary,

    borderRadius: 25,

    bottom: 10,

    width: 200,

    height: 50,

  },

  generate_router_button_text: {

    color: LIGTHT_THEME.color.white,

  },

});