Nós vamos criar o form que é apenas feito para visualização, pois a pessoa vai poder clicar em um botão para o form ficar alterável ou não. Nós vamos começar criando uma pasta dentro de components chamada “UserProfile” e dentro dela, vamos criar uma pasta chamada Form

Agora, com essa pasta nós vamos criar nela o index.tsx e styled.ts, e vamos começar criando o container geral, para darmos um espaço entre os campos do form e as demais coisas da tela

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  margin: 20px 0;
`;

Agora, nós vamos criar o botão que ao usuário clicar, ele vai “abrir ou fechar” o form. Nós vamos criar primeiro um container, para centralizar ele sem precisar usar o absolute, e depois as demais coisas para receber a imagem.

export const EditButtonContainer = styled.View`
  width: 90%;
  align-items: flex-end;
  margin: 0 auto;
  margin-bottom: 10px;
`;

export const EditButton = styled.TouchableOpacity``;

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

Com isso feito, já podemos começar a user lá index e ter um retorno visual. desse botão

import { Alert } from "react-native";
import React from "react";
import {
  Container,
  EditButton,
  EditButtonContainer,
  EditImage,
} from "./styled";

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

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

export default Form;

Para visualizar, vamos importar esse form lá no UserProfile para poder verificar se está tudo certo

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

Agora, nós temos o botão aparecendo na tela, podemos até testar ele ao clicar

Já temos o botão que será usado para alterar do form não editável para o editável. Vamos então criar dentro desse form uma pasta chamada “FieldsDisabled”.

Nós vamos criar apenas um 1 input, que servirá para os dois. Dentro do “styled.ts” que está na pasta “Form”, vamos criar esse input.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  margin: 10px 0;
`;

export const EditButtonContainer = styled.View`
  width: 90%;
  align-items: flex-end;
  margin: 0 auto;
  margin-bottom: 10px;
`;

export const EditButton = styled.TouchableOpacity``;

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

export const InputContainer = styled.View`
  width: 90%;
  height: 50px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  background-color: ${({ theme }) => theme.colors.background};
  border-radius: 5px;
	margin: 10px auto;
  padding-left: 10px;
  justify-content: center;
`;

Agora, nós vamos para o “styled.ts” dentro da pasta “FieldsNotEditable” para poder “criar” o input não editável.

import styled from "styled-components/native";
import { InputContainer } from "../styled";

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

Agora podemos criar o texto que ficará dentro desse input desabilitado. (Dentro do “styled.ts” da pasta “FieldsDisabled”)

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

Vamos começar criando apenas 1 input para poder testarmos.

import React from "react";
import { InputDisabled, PlaceholderDisabled } from "./styled";

const FieldsDisabled = () => {
  return (
    <InputDisabled>
      <PlaceholderDisabled>Teste de input</PlaceholderDisabled>
    </InputDisabled>
  );
};

export default FieldsDisabled;

Agora, basta usar ele.

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

Ele está da forma que queremos, nós vamos agora colocar os demais inputs. Teremos dentre esses inputs dropdown, porém como ainda não criamos ele, nós vamos deixar um input vazio para ele.

const FieldsDisabled = () => {
  return (
    <>
      <InputDisabled>
        <PlaceholderDisabled>Lucas Queiroga</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>[email protected]</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>(81) 9 9999-9999</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>DROPDOWN</PlaceholderDisabled>
      </InputDisabled>
      <InputDisabled>
        <PlaceholderDisabled>Senha</PlaceholderDisabled>
      </InputDisabled>
    </>
  );
};

Agora temos o form não alterável para o usuário ver suas informações pessoais.