Nós vamos criar mais um componente que vai ser utilizado em vários locais, assim como o defaultTitle.

Vamos começar indo em common para criar uma pasta chamada “DropDown”, e dentro dela vamos criar os arquivos padrão.

Agora vamos começar criando o container que vai envolver o dropdown, para que ele fique do tamanho correto e centralizado na aplicação.

import styled from "styled-components/native";

export const DropDownContainer = styled.View`
  width: 90%;
  margin: 10px auto;
`;

Agora, nós vamos criar o dropDown em si. Fazendo com que ele respeite sempre os 90% que colocamos no container

import styled from "styled-components/native";
import { SelectList } from "react-native-dropdown-select-list";

export const DropDownContainer = styled.View`
  width: 90%;
  margin: 10px auto;
`;

export const DropDown = styled(SelectList).attrs({
  boxStyles: {
    maxWidth: "100%",
    minWidth: "100%",
    backgroundColor: "#171717",
    borderRadius: 5,
    paddingLeft: 10,
  },
  inputStyles: {
    color: "white",
    fontWeight: "bold",
    fontSize: 18,
  },
  dropdownStyles: {
    maxWidth: "100%",
    minWidth: "100%",
    maxHeight: 140,
    marginTop: 20,
    backgroundColor: "#171717",
  },
  dropdownTextStyles: {
    color: "white",
    fontWeight: "bold",
    fontSize: 18,
  },
  disabledItemStyles: {
    backgroundColor: "#171717",
  },
})``;

E por último, vamos criar a imagem, que será uma setinha que teremos aqui no nosso dropdown.

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

Agora, nós podemos mandar lá para o jsx e verificar se está da forma que queremos de fato.

import { View, Text } from "react-native";
import React from "react";

const DropDownComponent = () => {
  return (
    <View>
      <Text>DropDownComponent</Text>
    </View>
  );
};

export default DropDownComponent;

Podemos utilizar as coisas que criamos no nosso styled.

import React from "react";
import { ArrowIcon, DropDown, DropDownContainer } from "./styled";

const arrowIcon = require("../../../../assets/icons/arrow-down.png");

const DropDownComponent = () => {
  return (
    <DropDownContainer>
      <DropDown
        setSelected={(val: string) => {}}
        data={}
        placeholder={}
        save="value"
        search={false}
        arrowicon={<ArrowIcon source={arrowIcon} />}
      />
    </DropDownContainer>
  );
};

export default DropDownComponent;

Por enquanto, vamos passar aqui dentro do componente algumas coisas essenciais que serão depois passadas por props, que é o state para usar em “setSelected”, o data e o placeholder.

const DropDownComponent = () => {
  const [dropState, setDropState] = useState("");

  const data = [{ value: "testando dropdown" }];

  return (
    <DropDownContainer>
      <DropDown
        setSelected={(val: string) => setDropState(val)}
        data={data}
        placeholder={"Selecione um item"}
        save="value"
        search={false}
        arrowicon={<ArrowIcon source={arrowIcon} />}
      />
    </DropDownContainer>
  );
};

export default DropDownComponent;

Com esse básico feito, podemos passar para o form editável, pois esse dropdown ficará lá, e no não editável teremos um diferente.

<>
  <InputContainer>
    <Input value="Lucas Queiroga" />
  </InputContainer>
  <InputContainer>
    <Input value="(81) 9 9999-9999" />
  </InputContainer>
  <InputContainer>
    <Input value="[email protected]" />
  </InputContainer>
  <DropDownComponent />
  <InputContainer>
    <Input
      placeholder="Senha"
      placeholderTextColor="#C0C0C1"
      secureTextEntry
    />
    </InputContainer>
    <InputContainer>
      <Input
        placeholder="Confirmar Senha"
        placeholderTextColor="#C0C0C1"
        secureTextEntry
      />
    </InputContainer>
    <AddressText>Gerenciar Endereços</AddressText>
    <DefaultButton
      buttonText="Salvar Alterações"
      buttonHandle={() => {}}
      buttonType="primary"
      marginVertical={10}
    />
</>

Podemos ver que está funcionando corretamente, vamos então crias as props necessárias para que ele funcione corretamente.

Faremos primeiro os tipos e em seguida iremos passar de fato as props.

interface DropDownProps {
  data: Object[];
  placeholder: string;
  setSelected: React.Dispatch<SetStateAction<string>>;
}

const DropDownComponent = ({
  data,
  placeholder,
  setSelected,
}: DropDownProps) => {

Vamos fazer uma verificação para o data, pois se ele estiver vazio a gente vai retornar um texto dizendo isso. Como o único momento que pode vir um data vazio é no endereço (Pois no resto a gente sempre terá um data preenchido) a gente vai colocar essa mensagem direcionada para endereço.

const DropDownComponent = ({
  width,
  marginTop,
  data,
  setSelected,
  placeholder,
}: DropDownProps) => {
  const res =
    data.length <= 0
      ? [{ value: "Sem endereço no momento!", disabled: true }]
      : data;

Agora podemos excluir as coisas que tínhamos antes e vamos substituir pelas que chamamos agora via props.

const DropDownComponent = ({
  data,
  placeholder,
  setSelected,
}: DropDownProps) => {
	  const res =
    data.length <= 0
      ? [{ value: "Sem endereço no momento!", disabled: true }]
      : data;
	
  return (
    <DropDownContainer>
      <DropDown
        setSelected={(val: string) => setSelected(val)}
        data={res}
        placeholder={placeholder}
        save="value"
        search={false}
        arrowicon={<ArrowIcon source={arrowIcon} />}
      />
    </DropDownContainer>
  );
};

Agora que passamos isso, vamos passar lá para o nosso form editável as props.

const FieldsAbled = () => {
  const [select, setSelect] = useState("");

  const Data = [{ value: "Endereço de teste", disabled: true }];

  return (
    <>
      <InputContainer>
        <Input value="Lucas Queiroga" />
      </InputContainer>
      <InputContainer>
        <Input value="(81) 9 9999-9999" />
      </InputContainer>
      <InputContainer>
        <Input value="[email protected]" />
      </InputContainer>
      <DropDownComponent
        placeholder="Seus endereços"
        setSelected={setSelect}
        data={Data}
      />

Agora podemos ver que o dropdown está funcionando 100%. Estamos passando desabilitado pois o usuário não vai poder clicar nos endereços que ele tem, já que isso não vai fazer nada.

Se você quiser ver o resultado da mensagem padrão que temos com o array vazio, você pode esvaziar o array de data para que você tenha o retorno visual.

Nós vamos na aula de finalização da tela fazer o dropdown do form não editável, para que a gente não deixe essa aula ainda maior.