Nessa aula vamos criar a lista de todas as categorias, mostrando também os seus produtos.

Vamos começar criando dentro de componentes uma pasta chamada “Categories” e dentro dela vamos criar o “CategorieList” com seus arquivos dentro

Vamos primeiro criar o container geral das linhas de categoria

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  padding-left: 30px;
  margin-bottom: 30px;
`;

Com o container criado, iremos criar a estrutura do título e do texto que usaremos para mandar o usuário para tela de categoria única.

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

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

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

Agora a gente pode utilizar tudo que criamos.

const CategorieList = () => {
  return (
    <Container>
      <TitleContainer>
        <Title>Pets</Title>
        <SeeMore>Ver mais</SeeMore>
      </TitleContainer>
    </Container>
  );
};

Agora a gente pode colocar esse componente lá dentro de "AllCategories” e ver pelo menos essa base da categoria.

const AllCategories = () => {
  return (
    <>
      <Container>
        <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />

        <CategorieList />
      </Container>
      <NavBar />
    </>
  );
};