Se creó un tile para cada actividad de cada estado

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

import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";

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

interface ActivityTileProps {

  activity: ActivityInfoEntity;

  onPress?: (id: number) => void;

}

export const ActivityTile = ({ activity, onPress }: ActivityTileProps) => {

  return (

    <TouchableOpacity onPress={() => {

      onPress && onPress(activity.id);

    }} activeOpacity={0.7} style={styles.container}>

      <View>

        <Image

          source={{ uri: activity.imageUri }}

          style={{ width: "100%", height: 200 }}

        />

      </View>

      <View style={styles.info_container}>

        <Text style={styles.activity_name} >{activity.name}</Text>

        <Text>{activity.location}</Text>

      </View>

    </TouchableOpacity>

  );

};

const styles = StyleSheet.create({

  container: {

    height: 300,

    width: "100%",

    backgroundColor: LIGTHT_THEME.color.white,

    elevation: 5,

    borderWidth: 1,

    borderRadius: 10,

    overflow: "hidden",

  },

  info_container: {

    padding: 10,

    gap: 5,

  },

  activity_name: {

    fontSize: 18,

    fontWeight: "bold",

  },

});