Place.tsx

import React, { useEffect, useState } from "react";
import { Container,
	ContainerDown,
	ContainerPlaceName,
	ContainerPlaceAdress,
	ContainerPlacePrice,
	ContainerText,
	HighlitedImage,
	ContainerPlaceText,
	ContainerPlaceSizeCapacity,
	ContainerPlaceHeader } from './styles';
import { TouchableOpacity, Alert } from "react-native";
import { MaterialIcons } from '@expo/vector-icons';
import { colors } from '../../config/Theme';
import { PlaceProps } from "../../interfaces/PlaceProps/PlaceProps.interface";
import Badge from '../../components/Badge/Badge';
import Loading from '../../components/Loading/Loading';

import PlacesService from '../../services/PlacesService';

export default function Place ({ spaceId, title, address, capacity, size, price, onPress }: PlaceProps) {
	const [imageURL, setImageURL] = useState([] as string[]);
	const [favorite, setFavorite] = useState(false);
	const [loading, setLoading] = useState(true);

	async function setUpImages() {
		const results = await PlacesService.retrieveThumbnailsItems(spaceId)

		if (results?.items?.length) {
			const [first, ...rest] = results.items;

			const firstUrl = await first.getDownloadURL();

			setImageURL(imageURL => [firstUrl, ...imageURL]);
			setLoading(false);

			const urls: string[] = await Promise.all(rest.map((item, i) => rest[i].getDownloadURL()))
			setImageURL(imageURL => [...imageURL, ...urls]);
		}
	}

	useEffect(() => {
		setUpImages()
	}, [])

	return (
		<TouchableOpacity onPress={() => onPress(imageURL)}>
			<Container>

				<ContainerDown>
					{loading ?
					<Loading /> :
					<HighlitedImage
						source={{ uri: imageURL[0] }}
					/>}
				</ContainerDown>

				<ContainerText>

					<ContainerPlaceHeader>
						<ContainerPlaceName>{title}</ContainerPlaceName>
						<ContainerPlaceAdress>{address}</ContainerPlaceAdress>
					</ContainerPlaceHeader>

					<ContainerPlaceSizeCapacity>
						<Badge name="people" text="pessoas" number={capacity} size={12} />
						<Badge name="crop" text="m²" number={size} size={12} />
					</ContainerPlaceSizeCapacity>

					<ContainerPlacePrice>
						<ContainerPlaceText>{price}</ContainerPlaceText>
						<TouchableOpacity onPress={() => setFavorite(!favorite)}>
							<MaterialIcons name={favorite ? "favorite" : "favorite-border"} size={36} color={colors.primary} />
						</TouchableOpacity>
					</ContainerPlacePrice>

				</ContainerText>

			</Container>
		</TouchableOpacity>

	);
}