Criação do card do produto

Iremos agora criar o card do produto que vamos ter na home. Aqui nós vamos também criar algumas coisas temporárias para que a gente possa visualizar como ficará no final.
Dentro de components vamos criar uma pasta chamada “ProductCard” dentro de “common”.
Dentro de “ProductCard” vamos criar um “index.tsx” e um “styled.ts”

Vamos começar montando o container onde vamos envolver tudo. (Dentro de “styled.ts”

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  margin: 10px auto;
  flex-direction: row;
`;

Com o container criado vamos criar a base da imagem e em seguida o container das informações, que fica ao lado das imagens

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  margin: 10px auto;
  flex-direction: row;
`;

export const ProductImage = styled.Image`
  width: 120px;
	min-height: 140px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
`;

export const ProductInfoContainer = styled.View`
  flex: 1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  padding: 10px;
	justify-content: space-between;
`;

Podemos já usar e ter algum retorno visual da imagem.

import React from "react";
import { Container, ProductImage, ProductInfoContainer } from "./styled";

const ProductCard = () => {
  return (
    <Container>
      <ProductImage
        source={{
          uri: "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
        }}
      />
      <ProductInfoContainer></ProductInfoContainer>
    </Container>
  );
};

export default ProductCard;

Agora precisamos visualizar o que criamos. Vamos importar isso em “Home”, e por enquanto teremos apenas 1 para visualizar.

import React from "react";
import { Container } from "./styled";

import Header from "../../components/common/Header";
import NavBar from "../../components/common/NavBar";
import ProductCard from "../../components/home/ProductCard";

const Home = () => {
  return (
    <Container>
      <Header />
      <ProductCard />
      <NavBar />
    </Container>
  );
};

export default Home;

Podemos começar a criar os textos no styled.ts para poder preencher

export const ProductPrice = styled.Text`
  font-size: 12px;
  color: ${({ theme }) => theme.colors.secondaryText};
  margin-bottom: 10px;
`;

export const ProductTitle = styled.Text`
  font-size: 14px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

Vamos usar eles e ter algum retorno visual de agora sobre esses textos

import React from "react";
import {
  Container,
  ProductImage,
  ProductInfoContainer,
  ProductPrice,
  ProductTitle,
} from "./styled";

const ProductCard = () => {
  return (
    <Container>
      <ProductImage
        source={{
          uri: "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
        }}
      />
      <ProductInfoContainer>
        <ProductPrice>R$ 2.600</ProductPrice>
        <ProductTitle numberOfLines={2}>Playstation 4 seminovo</ProductTitle>
      </ProductInfoContainer>
    </Container>
  );
};

export default ProductCard;

Vamos colocar informações agora do usuário com mais algumas coisas, como o botão do like e tempo do produto.

export const InfoLikeContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
`;

export const SellerInfoContainer = styled.View``;

export const PublishedText = styled.Text`
  font-size: 10px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

export const SellerName = styled.Text`
  font-size: 14px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
`;

export const LikeButton = styled.TouchableOpacity``;

export const LikeImage = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 30px;
`;

Agora vamos usar e completar o que precisamos com as informações adicionais.

import React from "react";
import { Alert } from "react-native";
import {
  Container,
  InfoLikeContainer,
  LikeButton,
  LikeImage,
  ProductImage,
  ProductInfoContainer,
  ProductPrice,
  ProductTitle,
  PublishedText,
  SellerInfoContainer,
  SellerName,
} from "./styled";

const likeImage = require("../../../../assets/icons/like.png");

const ProductCard = () => {
  return (
    <Container>
      <ProductImage
        source={{
          uri: "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
        }}
      />
      <ProductInfoContainer>
        <ProductPrice>R$ 2.600</ProductPrice>
        <ProductTitle numberOfLines={2}>Playstation 4 seminovo</ProductTitle>
        <InfoLikeContainer>
          <SellerInfoContainer>
            <PublishedText>Publicado em 20/08/22 por:</PublishedText>
            <SellerName>Lucas Queiroga</SellerName>
          </SellerInfoContainer>
          <LikeButton
            onPress={() => {
              Alert.alert("Liked");
            }}
            activeOpacity={0.85}
          >
            <LikeImage source={likeImage} />
          </LikeButton>
        </InfoLikeContainer>
      </ProductInfoContainer>
    </Container>
  );
};

export default ProductCard;

Agora que temos tudo pronto, podemos usar o flatlist para renderizar as informações de forma dinâmica. Nós iremos usar um data dentro do arquivo, para facilitar.

const DATA = [
  {
    _id: "1",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "2600",
    name: "Playstation 4 Pro, seminovo",
    publishedData: "14/02/23",
    SellerName: "Lucas Queiroga",
    liked: false,
  },
  {
    _id: "2",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "3600",
    name: "Playstation 4 Pro, seminovo",
    publishedData: "14/02/23",
    SellerName: "Lucas Queiroga",
    liked: true,
  },
  {
    _id: "3",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "3600",
    name: "Playstation 4 Pro, seminovo",
    publishedData: "14/02/23",
    SellerName: "Lucas Queiroga",
    liked: false,
  },
  {
    _id: "4",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "3600",
    name: "Playstation 4 Pro, seminovo",
    publishedData: "14/02/23",
    SellerName: "Lucas Queiroga",
    liked: true,
  },
  {
    _id: "5",
    productImage:
      "<https://http2.mlstatic.com/D_NQ_NP_715237-MLA45308505060_032021-O.jpg>",
    price: "3600",
    name: "Playstation 4 Pro, seminovo",
    publishedData: "14/02/23",
    SellerName: "Lucas Queiroga",
    liked: false,
  },
];

Vamos criar o Item o renderItem, que serão usados no flatlist. Como estamos usando o typescript, não iremos usar o flatlist dentro do styled, pois ele da erro de tipagem que no momento da gravação da aula não teve atualização para resolver.

import React from "react";
import { useNavigation } from "@react-navigation/native";
import { Alert, FlatList, ListRenderItem } from "react-native";
import { PropsStack } from "../../../routes";
import {
  Container,
  InfoLikeContainer,
  LikeButton,
  LikeImage,
  ProductImage,
  ProductInfoContainer,
  ProductPrice,
  ProductTitle,
  PublishedText,
  SellerInfoContainer,
  SellerName,
} from "./styled";

const likeImage = require("../../../../assets/icons/like.png");
const likedImage = require("../../../../assets/icons/liked.png");

export interface ProductType {
  _id: string;
  productImage: string;
  price: string;
  name: string;
  publishedData: string;
  SellerName: string;
  liked: boolean;
}

const Data = [
];

const ProductCard = () => {
  const navigation = useNavigation<PropsStack>();

  const handleNavProduct = () => {
    navigation.navigate("Home");
  };

  const Item = ({ data }: { data: ItemProps }) => (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        handleNavProduct();
      }}
    >
      <ProductImage source={{ uri: data.productImage }} />
      <ProductInfoContainer>
        <ProductPrice>R$ {data.price}</ProductPrice>
        <ProductTitle numberOfLines={2}>{data.name}</ProductTitle>
        <InfoLikeContainer>
          <SellerInfoContainer>
            <PublishedText>
              Publicado em {data.publishedData} por:
            </PublishedText>
            <SellerName>{data.SellerName}</SellerName>
          </SellerInfoContainer>
          <LikeButton
            onPress={() => {
              Alert.alert("Liked");
            }}
            activeOpacity={0.85}
          >
            {!data.liked ? (
              <LikeImage source={likeImage} />
            ) : (
              <LikeImage source={likedImage} />
            )}
          </LikeButton>
        </InfoLikeContainer>
      </ProductInfoContainer>
    </Container>
  );

  const renderItem: ListRenderItem<ItemProps> = ({ item }) => (
    <Item data={item} />
  );

  return <FlatList />;
};

export default ProductCard;

Vamos colocar então as informações que temos no flatList.

return (
  <FlatList
    data={Data}
    keyExtractor={(item: ItemProps) => item.id}
    renderItem={renderItem}
    showsVerticalScrollIndicator={false}
    contentContainerStyle={{ paddingBottom: 80 }}
  />
);

Com isso que temos agora, nós conseguimos visualizar a nossa lista na home, com as informações que colocamos nos dados. Depois quando puxarmos a real, vamos modificar algumas coisas, porém por enquanto podemos deixar dessa forma.