Para finalizar a nossa aula, nós vamos fazer algumas coisas básicas para a tela, começando pelo form não alterável e seu dropdown.

Nós vamos no styled.ts da pasta “FieldsDisabled” para criarmos o dropdown. Uma coisa boa que podemos fazer é a aproveitar parte do estilo pronto que existe dentro do componente de dropdown.

import styled from "styled-components/native";
import { InputContainer } from "../styled";
import {
  ArrowIcon,
  DropDown,
  DropDownContainer,
} from "../../../common/DropDown/styled";

export const InputDisabled = styled(InputContainer)`
  background-color: transparent;
`;

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

export const DropDownContainerDisabled = styled(DropDownContainer)``;

export const DropDownDisabled = styled(DropDown).attrs({
  boxStyles: {
    minWidth: "100%",
    backgroundColor: "transparent",
    borderRadius: 5,
    paddingLeft: 10,
  },
  inputStyles: {
    color: "#C0C0C1",
    fontWeight: "bold",
    fontSize: 18,
  },
})``;

export const ArrowIconDisabled = styled(ArrowIcon)``;

Como já criamos várias coisas desse estilo, podemos apenas reaproveitar elas, modificando detalhes. Nós podemos agora usar elas no jsx.

const FieldsDisabled = () => {
  return (
    <>
      <InputDisabled>
        <PlaceholderDisabled>Lucas Queiroga</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>[email protected]</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>(81) 9 9999-9999</PlaceholderDisabled>
      </InputDisabled>
      <DropDownContainerDisabled pointerEvents="none">
        <DropDownDisabled
          setSelected={() => {}}
          data={[]}
          placeholder="Seus endereços"
          arrowicon={<ArrowIconDisabled source={arrowIcon} />}
        />
      </DropDownContainerDisabled>
      <InputDisabled>
        <PlaceholderDisabled>Senha</PlaceholderDisabled>
      </InputDisabled>
    </>
  );
};

Você consegue ver que ao clicamos agora no botão da renderização condicional, nós vamos ter apenas algumas poucas mudanças, o que é agradável para visualização.

Agora iremos para o styled.ts da tela “UserProfile” para criamos o botão de logout e também o botão de deletar conta.

export const LogOutButton = styled.TouchableOpacity`
  width: 90%;
  height: 50px;
  border: 1px solid ${({ theme }) => theme.colors.denounceButton};
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
`;

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

export const DeleteAccount = styled.Text`
  font-size: 14px;
  text-align: center;
  margin-top: 18px;
  color: ${({ theme }) => theme.colors.denounceButton};
`;

Podemos usar agora tudo que criamos para poder ter os botões no final da tela

const UserProfile = () => {
  return (
    <>
      <Container
        contentContainerStyle={{
          paddingBottom: 120,
        }}
      >
        <DefaultTitle title="MEU PERFIL" fontSize={20} />

        <ProfileInfo />

        <Form />

        <UserAds products={Data} />

        <LogOutButton
          onPress={() => {
            Alert.alert("Você deslogou!");
          }}
        >
          <LogOutText>Sair da sua conta</LogOutText>
        </LogOutButton>
        <DeleteAccount
          onPress={() => {
            Alert.alert(
              "Você tem certeza?",
              "Ao fazer isso você deleterá a sua conta permanentemente",
              [
                {
                  text: "Sim",
                  onPress: () => {
                    Alert.alert("Você deletou a sua conta!");
                  },
                },

                {
                  text: "Não",
                },
              ]
            );
          }}
        >
          Excluir conta
        </DeleteAccount>
      </Container>
      <NavBar />
    </>
  );
};

Depois, podemos também separar esse nosso alert de confirmação, para que ele fique em uma função separada, porém já temos a confirmação dupla para a pessoa excluir a conta dela.