Nós vamos agora que temos acesso a tela, começar colocando o profileInfo, que por enquanto, é fixo, porém depois iremos passar as informações via props.

Vamos começar chamando ele aqui dentro para o usuário confirmar que é ele que quer denunciar

return (
  <>
    <Container>
      <DefaultTitle title="DENUNCIAR" fontSize={20} />
      <ProfileInfo />
      <NavBar />
    </Container>
  </>
);

Vamos então criar o estilo do form que vamos utilizar, que será semelhante ao form de descrição do produto da tela de AddProduct

export const InputContainer = styled.View`
  width: 90%;
  height: 150px;
  background-color: #3a3a3a;
  margin: 0 auto;
  margin-top: 30px;
  padding: 10px;
  border-radius: 5px;
`;

export const Input = styled.TextInput.attrs({
  placeholderTextColor: "#C0C0C1",
})`
  width: 100%;
  padding-bottom: 80px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

Para finalizar os estilos, vamos criar o botão estilizado para a tela

export const Button = styled.TouchableOpacity`
  width: 90%;
  min-height: 40px;
  background-color: ${({ theme }) => theme.colors.denounceButton};
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 5px;
`;

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

Agora a gente pode usar o form que criamos

return (
  <>
    <Container>
      <DefaultTitle title="DENUNCIAR" fontSize={20} />
      <ProfileInfo />
      <InputContainer>
        <Input
          multiline
          placeholder="Confirme que você deseja denunciar o perfil acima e escreva aqui seus motivos"
        />
      </InputContainer>
      <NavBar />
    </Container>
  </>
);

E em seguida usar o botão.

return (
  <>
    <Container>
      <DefaultTitle title="DENUNCIAR" fontSize={20} />
      <ProfileInfo />
      <InputContainer>
        <Input
          multiline
          placeholder="Confirme que você deseja denunciar o perfil acima e escreva aqui seus motivos"
        />
      </InputContainer>
      <Button>
        <ButtonText>DENUNCIAR</ButtonText>
      </Button>
      <NavBar />
    </Container>
  </>
);

Com isso, feito, a gente pode redirecionar o usuário de volta para a tela que ele estava ao clicar no botão, pois como não renderizaremos no backend, podemos já tratar o resultado da tela

const Denounce = () => {
  const navigation = useNavigation<PropsStack>();

  const handleDenounce = () => {
    navigation.goBack();

    Alert.alert(
      "Muito obrigado pela sua denúncia, iremos verificar e retornar para você o resultado dela."
    );
  };

  return (
    <>
      <Container>
        <DefaultTitle title="DENUNCIAR" fontSize={20} />
        <ProfileInfo />
        <InputContainer>
          <Input
            multiline
            placeholder="Confirme que você deseja denunciar o perfil acima e escreva aqui seus motivos"
          />
        </InputContainer>
	      <Button onPress={handleDenounce}>
          <ButtonText>DENUNCIAR</ButtonText>
        </Button>
        <NavBar />
      </Container>
    </>
  );
};