Nós vamos criar o form editável que é muito simples e fácil, nós vamos já que temos a base do input. Nós vamos criar dentro de form uma outra pasta chamada “FieldsAbled” com os arquivos.

Nós vamos dentro do “styled.ts” dessa pasta criar o textInput, já que temos apenas o inputContainer.

import styled from "styled-components/native";

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

Agora nós podemos criar os Inputs com os Value, já que vai ser desse jeito que nós vamos usar.

const FieldsAbled = () => {
  return (
    <>
      <InputContainer>
        <Input value="Lucas Queiroga" />
      </InputContainer>
      <InputContainer>
        <Input value="(81) 9 9999-9999" />
      </InputContainer>
      <InputContainer>
        <Input value="[email protected]" />
      </InputContainer>
      <InputContainer>
        <Input value="DROPDOWN" />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Senha"
          placeholderTextColor="#C0C0C1"
          secureTextEntry
        />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Confirmar Senha"
          placeholderTextColor="#C0C0C1"
          secureTextEntry
        />
      </InputContainer>
    </>
  );
};

Vamos então checar se o que a gente criou está correto e aparecendo da forma que esperamos lá no form.

const Form = () => {
  return (
    <Container>
      <EditButtonContainer>
        <EditButton
          onPress={() => {
            Alert.alert("Testando o botão!");
          }}
        >
          <EditImage source={edit} />
        </EditButton>
      </EditButtonContainer>
      {/* <FieldsDisabled /> */}
      <FieldsAbled />
    </Container>
  );
};

Podemos notar que está certinho, precisamos apenas dar um padding aqui no scrollView, vamos então lá para o nosso “index.tsx” de “UserProfile”

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

Agora sim estamos com o form visível corretamente e sem problemas quando adicionarmos mais coisas nele. Vamos fazer a função de edição dos forms com o clique do botão.

Vamos criar um state dentro de Form chamado “editable”, que começa em false.

const Form = () => {
  const [editable, setEditable] = useState(false);

  return (

Agora, faremos uma renderização condicional dos forms.

return (
  <Container>
    <EditButtonContainer>
      <EditButton
        onPress={() => {
          Alert.alert("Testando o botão!");
        }}
      >
        <EditImage source={edit} />
      </EditButton>
    </EditButtonContainer>
    {!editable ? <FieldsDisabled /> : <FieldsAbled />}
  </Container>
);

Nós vamos agora fazer o toggle do state de acordo com o clique no botão com o lápis.

const Form = () => {
  const [editable, setEditable] = useState(false);

  return (
    <Container>
      <EditButtonContainer>
        <EditButton
          onPress={() => {
            setEditable(!editable);
          }}
        >
          <EditImage source={edit} />
        </EditButton>
      </EditButtonContainer>
      {!editable ? <FieldsDisabled /> : <FieldsAbled />}
    </Container>
  );
};

Agora, se clicarmos no lápis, a gente vai ter a mudança do form, tanto para editar quanto para voltar para o padrão.

Com isso feito, nós vamos criar um texto que vai levar o usuário para a parte de gerenciamento de endereços, onde ele vai poder ver, excluir e criar novos endereços para ele. (Dentro de fieldsEditable)

Nós vamos começar criando o seu estilo e depois vamos usar ele.

export const AddressText = styled.Text`
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0px;
  text-align: center;
  color: ${({ theme }) => theme.colors.primaryText};
`;

<>
      <InputContainer>
        <Input value="Lucas Queiroga" />
      </InputContainer>
      <InputContainer>
        <Input value="(81) 9 9999-9999" />
      </InputContainer>
      <InputContainer>
        <Input value="[email protected]" />
      </InputContainer>
      <InputContainer>
        <Input value="DROPDOWN" />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Senha"
          placeholderTextColor="#C0C0C1"
          secureTextEntry
        />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Confirmar Senha"
          placeholderTextColor="#C0C0C1"
          secureTextEntry
        />
      </InputContainer>
      <AddressText>Gerenciar Endereços</AddressText>
    </>

Agora que ele foi usado com sucesso, nós podemos usar o botão que vamos usar para salvar as alterações.

	<>
    <InputContainer>
      <Input value="Lucas Queiroga" />
    </InputContainer>
    <InputContainer>
      <Input value="(81) 9 9999-9999" />
    </InputContainer>
    <InputContainer>
      <Input value="[email protected]" />
    </InputContainer>
    <InputContainer>
      <Input value="DROPDOWN" />
    </InputContainer>
    <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}
    />
  </>

Com isso, toda essa parte editável vai estar pronta, nós podemos prosseguir