Agora vamos criar o card da flatlist criada. Nós vamos criar dentro de “AllAddress” uma pasta chamada “AddressCard” e nela teremos os arquivos index e styled.

Nós iremos começar criando a estrutura, que é muito simples, dos card.

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  min-height: 80px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  border-radius: 5px;
  margin: 10px auto;
  padding: 10px;
`;

E agora iremos criar o título, que vai ter dentro dele todas as informações fundamentais para a pessoa saber o endereço a qual se refere.

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  min-height: 80px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  border-radius: 5px;
  margin: 10px auto;
  padding: 10px;
`;

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

Vamos passar para o nosso index

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

const AddressCard = () => {
  return (
    <Container>
      <Title>AddressCard</Title>
    </Container>
  );
};

export default AddressCard;

E para visualizarmos, nós iremos chamar o card lá nosso renderItem

const AllAddress = () => {
  const renderItem: ListRenderItem<Address> = ({ item }) => (
    <AddressCard item={item} />
  );

Agora não temos info nenhuma ainda, porém já conseguimos ver os espaçamentos e estruturas. Vamos agora completar e chamar as informações lá para o card.

interface ItemProps {
  item: Address;
}

const AddressCard = ({ item }: ItemProps) => {
  return (
    <Container>
      <Title>{``}</Title>
    </Container>
  );
};

Agora podemos puxar as informações para exibir na tela.

const AddressCard = ({ item }: ItemProps) => {
  return (
    <Container>
      <Title>{`Rua: ${item.street} - Nº ${item.number}\\nUF: ${item.state}\\nCEP: ${item.cep}`}</Title>
    </Container>
  );
};

Agora vamos adicionar o ícone, que será o lixeiro, caso a pessoa queira excluir o endereço. Vamos criar o seu estilo em “styled.ts”

export const DeletButton = styled.TouchableOpacity`
  position: absolute;
  bottom: 15px;
  right: 15px;
`;

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

Agora, nós podemos usar ele lá no nosso container

const AddressCard = ({ item }: ItemProps) => {
  return (
    <Container>
      <Title>{`Rua: ${item.street} - Nº ${item.number}\\nUF: ${item.state}\\nCEP: ${item.cep}`}</Title>
      <DeletButton onPress={() => {}}>
        <DeletIcon source={} />
      </DeletButton>
    </Container>
  );
};

Para finalizar o card, precisamos apenas chamar o ícone para colcar aqui.

const deleteIcon = require("../../../../assets/icons/trash.png");

const AddressCard = ({ item }: ItemProps) => {
  return (
    <Container>
      <Title>{`Rua: ${item.street} - Nº ${item.number}\\nUF: ${item.state}\\nCEP: ${item.cep}`}</Title>
      <DeletButton onPress={() => {}}>
        <DeletIcon source={deleteIcon} />
      </DeletButton>
    </Container>
  );
};

Agora podemos tanto clicar no no lixeiro para excluir caso queira.

Vamos começar limitando o tamanho da lista, iremos criar uma view que faça isso com o height, vamos colocar tanto o mínimo quanto o máximo, para que a gente tenha sempre a mesma altura

export const ListHeight = styled.View`
  min-height: 460px;
  max-height: 460px;
  margin-bottom: 30px;
`;

Agora, iremos usar ele, e junto a isso iremos colocar o botão de criar abaixo da view que criamos, para que o usuário possa clicar aqui e também ir criar o seu endereço.

<>
  <Container>
    <DefaultTitle title="TODOS OS ENDEREÇOS" fontSize={18} />

    {Data.length <= 0 ? (
      <>
        <NoAdd>Você não tem endereços{"\\n"}cadastrados no momento</NoAdd>
        <CreateAddBtn>
          <CreateAddBtnTxt>Criar Endereço</CreateAddBtnTxt>
        </CreateAddBtn>
      </>
    ) : (
      <>
        <ListHeight>
          <FlatList
            data={Data}
            keyExtractor={(item: Address) => item._id}
            renderItem={renderItem}
            showsVerticalScrollIndicator={false}
          />
        </ListHeight>
        <CreateAddBtn>
          <CreateAddBtnTxt>Criar Endereço</CreateAddBtnTxt>
        </CreateAddBtn>
      </>
    )}
  </Container>
  <NavBar />
</>