Nós vamos começar a criar a estrutura da nossa flatlist, começando pela interface e pelo array temporário que teremos.

export interface Address {
  _id: string;
  street: string;
  number: string;
  complement: string;
  district: string;
  city: string;
  state: string;
  cep: string;
}

const Data = [
  {
    _id: "1",
    street: "Rua das Acácias",
    number: "321",
    complement: "",
    district: "Boa Viagem",
    city: "Recife",
    state: "PE",
    cep: "51030200",
  },
  {
    _id: "2",
    street: "Avenida das Flores",
    number: "456",
    complement: "",
    district: "Centro",
    city: "Cuiabá",
    state: "MT",
    cep: "78005100",
  },
  {
    _id: "3",
    street: "Rua das Jabuticabeiras",
    number: "987",
    complement: "",
    district: "Mangabeiras",
    city: "Maceió",
    state: "AL",
    cep: "57037100",
  },
];

const AllAddress = () => {
  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
      </Container>
      <NavBar />
    </>
  );
};

export default AllAddress;

Agora a gente vai criar o nosso flatlist e organizar ele aqui na tela

export interface Address {
}

const Data = [
];

const AllAddress = () => {
  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
        <FlatList
          data={Data}
          keyExtractor={(item: Address) => item._id}
          renderItem={}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 70 }}
        />
      </Container>
      <NavBar />
    </>
  );
};

export default AllAddress;

Agora iremos criar a estrutura de renderização, mesmo ainda não tendo o card já vamos criar a estrutura.

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

  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
        <FlatList
          data={Data}
          keyExtractor={(item: Address) => item._id}
          renderItem={renderItem}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 70 }}
        />
      </Container>
      <NavBar />
    </>
  );
};

Agora que já temos a base, podemos fazer uma verificação, caso o data venha vazio, nós iremos falar para o usuário e indicaremos para ele criar um novo endereço.

Primeiro vamos criar no styled o “NoAdd”, que será o texto para indicar que não existe endereços.

export const NoAdd = styled.Text`
  font-size: 24px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
  text-align: center;
  margin-top: 50%;
  margin-bottom: 5%;
`;

Agora iremos fazer a verificação

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

  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
        {Data.length <= 0 ? (
          <>
            <NoAdd>Você não tem endereços{"\\n"}cadastrados no momento</NoAdd>
          </>
        ) : (
          <>
            <FlatList
              data={Data}
              keyExtractor={(item: Address) => item._id}
              renderItem={renderItem}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ paddingBottom: 70 }}
            />
          </>
        )}
      </Container>
      <NavBar />
    </>
  );
};

Para testarmos, exclua temporariamente o conteúdo de “Data”

Agora a gente vai criar um botão e adicionar para o usuário cadastrar o endereço, que faremos diferente do Default para que seja

export const NoAdd = styled.Text`
  font-size: 24px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
  text-align: center;
  margin-top: 50%;
	margin-bottom: 8%;
`;

Agora a gente vai usar esse NoAdd junto com o botão de criar endereço, que será o nosso DefaultButton secondary.

{Data.length <= 0 ? (
  <>
    <NoAdd>Você não tem endereços{"\\n"}cadastrados no momento</NoAdd>
    <DefaultButton
      buttonText="Cadastrar Endereços"
      buttonHandle={() => {}}
      buttonType="secondary"
      marginVertical={0}
    />
  </>
) : (
  <>
    <FlatList
      data={Data}
      keyExtractor={(item: Address) => item._id}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 70 }}
    />
  </>
)}

Com isso feito, podemos voltar com os endereços de “Data” e nós vamos agora criar um texto para adicionar os endereços que ficará acima da lista (Para o usuário não ter que descer tudo se quiser adicionar um novo endereço). ]

export const CreateAdd = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: center;
`;

Agora basta usar acima da nossa flatlist

{Data.length <= 0 ? (
  <>
    <NoAdd>Você não tem endereços{"\\n"}cadastrados no momento</NoAdd>
    <DefaultButton
      buttonText="Cadastrar Endereços"
      buttonHandle={() => {}}
      buttonType="secondary"
      marginVertical={0}
    />
  </>
) : (
  <>
    <CreateAdd>Cadastrar Endereços</CreateAdd>
    <FlatList
      data={Data}
      keyExtractor={(item: Address) => item._id}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 70 }}
    />
  </>
)}

Dessa forma, temos agora ambas as formas de cadastrar o endereço. Fica melhor colocarmos um texto do que um botão pois como vamos renderizar itens, ficará muito agressivo itens + botão. Com texto fica mais suave e minimalista.

Podemos agora seguir para o nosso card.