Criando os filtros visualmente

Nós vamos ter 2 tipos de filtros, os filtros que irão colocar do mais novo para o mais antigo, do mais caro para o mais barato e o inverso também. Esses serão filtros base para nós.
Vamos então começar criando uma pasta chamada “Search” dentro de components
Dentro dela, iremos criar uma outra pasta chamada Filters com um index e styled nela.

Vamos criar a estrutura base da tela e também a estrutura do modal que iremos usar

import styled from "styled-components/native";

export const Container = styled.View`
  width: 90%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
`;

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

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

export const ModalOverlay = styled.TouchableOpacity`
  flex: 1;
`;

export const ModalContainer = styled.View`
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 5px;
	margin-left: 26%;
  margin-top: 25%;
  justify-content: center;
`;

export const ModalText = styled.Text`
  font-size: 14px;
  font-weight: bold;
  margin: 5px;
  margin-left: 8px;
`;

E agora nós iremos criar o texto que vai abrir os demais filtros, que iremos criar

export const FiltersContainer = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
`;

export const FiltersIcon = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 18px;
  margin-right: 5px;
`;

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

Agora nós podemos usar tudo isso, criando primeiro a estrutura do modal, colocando os useState e também toda a base para termos o modal

const Filters = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [filterText, setFilterText] = useState("Mais recente");

  return (
    <>
      <Container>
        <OrderText
          onPress={() => {
            setModalVisible(true);
          }}
        >
          Ordernar por <Bold>{filterText}</Bold>
        </OrderText>

        <Modal animationType="fade" transparent={true} visible={modalVisible}>
          <ModalOverlay
            onPress={() => {
              setModalVisible(false);
            }}
            activeOpacity={1}
          ></ModalOverlay>
        </Modal>
      </Container>
    </>
  );
};

E com isso pronto, nós vamos chamar la na tela de search
```
return (
	<Container>
	  <Header />

    <Filters />
```

Podemos ver então que já está aparecendo aqui do jeito que queremos, podemos completar para o modal então aparecer aqui para nós

<ModalOverlay
  onPress={() => {
    setModalVisible(false);
  }}
  activeOpacity={1}
>
  <ModalContainer>
    <ModalText>Maior Preço</ModalText>
    <ModalText>Menor Preço</ModalText>
    <ModalText>Mais recente</ModalText>
  </ModalContainer>
</ModalOverlay>

Nós vamos agora criar os handles dos botões, para que tenhamos alguma modificação quando clicar

const handleBigestPrice = async () => {
  setFilterText("Maior preço");
	setModalVisible(false);
};

const handleLowestPrice = async () => {
  setFilterText("Menor preço");
	setModalVisible(false);
};

const handleNewest = async () => {
  setFilterText("Mais recente");
	setModalVisible(false);
};

return (
  <>
    <Container>
      <OrderText
        onPress={() => {
          setModalVisible(true);
        }}
      >
        Ordernar por <Bold>{filterText}</Bold>
      </OrderText>

      <Modal animationType="fade" transparent={true} visible={modalVisible}>
        <ModalOverlay
          onPress={() => {
            setModalVisible(false);
          }}
          activeOpacity={1}
        >
          <ModalContainer>
            <ModalText onPress={handleBigestPrice}>Maior Preço</ModalText>
            <ModalText onPress={handleLowestPrice}>Menor Preço</ModalText>
            <ModalText onPress={handleNewest}>Mais recente</ModalText>
          </ModalContainer>
        </ModalOverlay>
      </Modal>
    </Container>
  </>
);

Podemos ver então que ao clicar no texto do modal nós vamos mudar o texto que está aparecendo na tela

Agora que fizemos isso, podemos colocar o outro filtro, abaixo do modal.

const filtersIcon = require("../../../../assets/icons/filtrar.png");

const Filters = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [filterText, setFilterText] = useState("Mais recente");
  const [showFilters, setShowFilters] = useState(false);

{/* Outros códigos */}

			<ModalText onPress={handleNewest}>Mais recente</ModalText>
	  </ModalContainer>
	</ModalOverlay>
</Modal>

<FiltersContainer
  onPress={() => {
    setShowFilters(!showFilters);
  }}
>
  <FiltersIcon source={filtersIcon} />
  <FiltersText>Filtrar</FiltersText>
</FiltersContainer>

E aí nós iremos mostrar os outros filtros clicando nesse texto com ícone. Vamos criar eles agora. Vamos criar uma pasta dentro de filters chamada de “ComplementFilters” com os filtros que vão complementar aqui a nossa base.

Iremos criar o styled e o index. Vamos começar criando toda a estrutura do styled

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  margin: 0 auto;
  padding-bottom: 35px;
  padding-top: 20px;
`;

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

export const PriceContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 6%;
`;

export const PriceInputContainer = styled.View`
  width: 150px;
  height: 45px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  background-color: ${({ theme }) => theme.colors.background};
  border-radius: 5px;
`;

export const LocationInputContainer = styled(PriceInputContainer)`
  width: 90%;
  margin: 10px auto;
`;

export const Input = styled.TextInput`
  flex: 1;
  font-size: 18px;
  color: ${({ theme }) => theme.colors.primaryText};
  padding: 0px 10px;
`;

export const ButtonsContainer = styled.View`
  width: 90%;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 30px;
`;

export const CleanButton = styled.TouchableOpacity`
  width: 170px;
  height: 50px;
  background-color: ${({ theme }) => theme.colors.secondaryButton};
  border-radius: 5px;
  align-items: center;
  justify-content: center;
`;

export const ApllyButton = styled(CleanButton)`
  background-color: ${({ theme }) => theme.colors.primaryButton};
`;

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

E agora podemos usar tudo isso no jsx

import React, { useState } from "react";

import {
  ApllyButton,
  ButtonsContainer,
  ButtonText,
  CleanButton,
  Container,
  Input,
  LocationInputContainer,
  PriceContainer,
  PriceInputContainer,
  Title,
} from "./styled";
import DropDownComponent from "../../../common/DropDown";

const Category = [
  { value: "Eletrônicos" },
  { value: "Eletrodomésticos" },
  { value: "Moda e Acessórios" },
  { value: "Pets" },
  { value: "Brinquedos e Jogos" },
  { value: "Casa e Jardim" },
  { value: "Esporte e Lazer" },
  { value: "Automóveis e Veículos" },
];

const ComplementFilters = () => {
  const [category, setCategory] = useState("");

  return (
    <Container>
      <Title>VALOR</Title>
      <PriceContainer>
        <PriceInputContainer>
          <Input
            placeholder="mínimo"
            placeholderTextColor="white"
            keyboardType="numeric"
            style={{
              textAlign: "center",
            }}
          />
        </PriceInputContainer>
        <PriceInputContainer>
          <Input
            placeholder="máximo"
            placeholderTextColor="white"
            keyboardType="numeric"
            style={{
              textAlign: "center",
            }}
          />
        </PriceInputContainer>
      </PriceContainer>
      <Title>LOCALIZAÇÃO</Title>
      <LocationInputContainer>
        <Input
          placeholder="Bairro, Cidade e/ou Estado"
          placeholderTextColor="white"
        />
      </LocationInputContainer>
      <Title>CATEGORIA</Title>
      <DropDownComponent
        data={Category}
        placeholder="Selecione a categoria"
        setSelected={setCategory}
				saveMethod="value"
      />
      <ButtonsContainer>
        <CleanButton onPress={() => {}}>
          <ButtonText>LIMPAR</ButtonText>
        </CleanButton>
        <ApllyButton onPress={() => {}}>
          <ButtonText>APLICAR</ButtonText>
        </ApllyButton>
      </ButtonsContainer>
    </Container>
  );
};

export default ComplementFilters;

Com ele montado, podemos chamar ele no Filters comum, que é o “pai” dele

			{/* Outros códigos */}			

			</Container>

      {!showFilters ? null : <FiltersElements />}
    </>
  );
};

export default Filters;

Agora nós estamos com todos os filtros completos, para poder seguir com a estrutura dos seus serviços