Home Manual Reference Source

Guia do Usuário

Aplicativo de Finanças Pessoais

Bem-vindo ao nosso aplicativo de finanças pessoais! Este guia tem como objetivo fornecer instruções simples sobre como utilizar as principais funcionalidades do aplicativo.

1. Página Inicial:

  • Ao abrir o aplicativo, você será direcionado à página inicial, onde poderá visualizar um resumo do seu dinheiro em diferentes categorias, como receitas, despesas, investimentos, entre outros.

2. Perfil:

  • Acesse a página de perfil clicando no ícone de perfil no canto superior direito. Aqui, você pode visualizar e editar informações pessoais, como nome, email, profissão e perfil de investimento.

3. Movimentações:

  • Na página de movimentações, você pode ver uma lista de todas as suas transações, incluindo receitas e despesas. Toque em cada transação para visualizar detalhes adicionais.

4. Investimentos:

  • Acesse a seção de investimentos para adicionar ou visualizar investimentos. Você pode adicionar novos investimentos e acompanhar o desempenho dos investimentos existentes.

5. Análise Gráfica:

  • Explore as análises gráficas para ter uma visão mais clara das suas finanças. Os gráficos mostram informações sobre gastos, receitas e investimentos.

6. Câmbio:

  • Verifique as cotações de moedas estrangeiras na seção de câmbio. As cotações são atualizadas regularmente.

7. Configurações:

  • Personalize o aplicativo conforme suas preferências na seção de configurações. Você pode alterar informações pessoais, como nome, email, profissão e perfil de investimento.

8. Sair:

  • Para encerrar a sessão, toque em "Sair" na seção de configurações. Isso garantirá a segurança dos seus dados.

Nota Importante:

  • Certifique-se de manter seu perfil e movimentações atualizados para obter uma análise precisa das suas finanças.

AuthScreen

Este componente React-Native, chamado de AuthScreen, representa a tela de autenticação do aplicativo.
Oferece funcionalidades de login e cadastro, interagindo com um banco de dados Firebase para gerenciar usuários.

Funcionalidades Principais

  1. Autenticação e Navegação:

    • Utiliza o contexto useLoading para exibir indicadores de carregamento durante operações assíncronas.
    • Utiliza o AsyncStorage para persistir a informação de autenticação (isAuth).

  2. Gerenciamento de Usuários:

    • Utiliza a classe Storage para interagir com o Firebase e obter informações sobre usuários.
    • Ao montar o componente, verifica se o usuário já está autenticado, redirecionando-o para a tela inicial (Splash) se necessário.

  3. Estados e Campos de Entrada:

    • Utiliza estados para controlar diferentes aspectos do componente, incluindo informações de usuários, mensagens de erro, visibilidade de senha, entre outros.
    • Campos de entrada controlados por estados para email e senhas.

  4. Manipulação de Senhas:

    • Oferece funcionalidade para alternar a visibilidade da senha durante a entrada de texto, utilizando ícones visuais (eye).

  5. Login e Cadastro:

    • Função handleSignUp para cadastrar novos usuários no Firebase, verificando se o email já existe.
    • Função handleSignIn para autenticar usuários, exibindo mensagens de erro caso o email ou senha não sejam válidos.

  6. Limpeza de Campos:

    • Função clearFields para limpar os campos do formulário, utilizada após operações de login ou cadastro.

  7. Feedback ao Usuário:

    • Exibe mensagens de erro em caso de problemas durante o login ou cadastro.
    • Oferece link para recuperação de senha em caso de erro no login.

  8. Estilo e Layout:

    • Utiliza estilos específicos para proporcionar uma experiência visual agradável ao usuário.

Componentes Utilizados

  • React, useState, useEffect para gerenciar o estado e o ciclo de vida.
  • Componentes de interface como View, Text, TextInput, Button, TouchableOpacity, Image.
  • Ícones fornecidos pelos pacotes @expo/vector-icons (Foundation, Ionicons).

Observações

  • O componente pode ser integrado a um fluxo de autenticação mais amplo em um aplicativo, proporcionando funcionalidades essenciais de login e cadastro.

Lembre-se de ajustar qualquer configuração específica do seu projeto, como a configuração do Firebase, para que o componente funcione corretamente no contexto do seu aplicativo.

Auth screen

Context

Descrição

O contexto de carregamento (LoadingContext) é utilizado para gerenciar o estado de carregamento na aplicação. Ele fornece funções que permitem mostrar ou ocultar um indicador de carregamento, bem como a capacidade de sinalizar se uma atualização ou refresh é necessário.

Componentes

LoadingProvider

O componente LoadingProvider é um provedor de contexto que envolve a aplicação. Ele fornece o estado de carregamento e funções relacionadas para os componentes filhos.

Propriedades

  • children: Componentes filhos envolvidos pelo provedor.

Funções do Contexto

  1. showLoading()

    • Exibe o indicador de carregamento.

  2. hideLoading()

    • Oculta o indicador de carregamento.

  3. getShouldRefresh(): boolean

    • Retorna o estado atual de sinalização para refresh.

  4. setShouldRefresh(should: boolean)

    • Atualiza o estado de sinalização para refresh.

useLoading()

O hook useLoading é utilizado pelos componentes filhos para acessar as funções e o estado do contexto de carregamento.

LoadingIndicator

O componente LoadingIndicator é um indicador de carregamento exibido enquanto o estado de carregamento está ativo.

Uso

// Dentro do componente pai mais externo da aplicação
import { LoadingProvider } from './caminho/para/o/seu/arquivo';

function App() {
  return (
    <LoadingProvider>
      {/* Seus componentes aqui */}
    </LoadingProvider>
  );
}

// Em qualquer componente filho que precise acessar o contexto de carregamento
import { useLoading } from './caminho/para/o/seu/arquivo';

function SeuComponente() {
  const { showLoading, hideLoading, getShouldRefresh, setShouldRefresh } = useLoading();

  // Lógica do componente usando as funções e o estado do contexto
}

Estilos

container

O estilo container é aplicado ao componente LoadingIndicator para posicionar o indicador de carregamento no centro da tela, com um fundo semitransparente.

Observações

  1. Indicador de Carregamento:

    • O componente LoadingIndicator utiliza o componente ActivityIndicator do React Native para exibir um indicador de carregamento.

  2. Sinalização para Refresh:

    • A função setShouldRefresh e getShouldRefresh permite que os componentes filhos sinalizem a necessidade de atualização ou refresh para o componente pai.

Home

Funcionalidades Principais

A página Home é responsável por exibir informações financeiras essenciais para o usuário, oferecendo uma visão geral de seu saldo, movimentações financeiras recentes e acesso rápido a funcionalidades adicionais.

Principais Funcionalidades:

  1. Exibição de Saldo:

    • Apresenta o saldo atual do usuário.
    • Oferece uma dica para explicar a seção de saldo.

  2. Movimentações Financeiras Recentes:

    • Mostra as últimas transações financeiras do usuário.
    • Permite visualizar detalhes de receitas e despesas.

  3. Menu de Navegação:

    • Facilita o acesso a diferentes seções do aplicativo.
    • Fornece uma dica para orientação sobre o menu.

  4. Atualização Automática:

    • Atualiza automaticamente os dados quando necessário.

Componentes Utilizados

A página Home utiliza vários componentes personalizados para organizar e exibir informações de forma clara e amigável. Os componentes principais incluem:

  1. Balance:

    • Responsável por exibir o saldo do usuário.
    • Apresenta uma dica interativa.

  2. Header:

    • Renderiza a seção de cabeçalho com detalhes do usuário.

  3. Menu:

    • Exibe opções de navegação para diferentes seções do aplicativo.
    • Inclui uma dica para orientar o usuário.

  4. Movements:

    • Renderiza as movimentações financeiras recentes.
    • Oferece detalhes sobre receitas e despesas.

Pré-requisito

Para usar a página Home, é necessário garantir que o aplicativo tenha acesso à API do Firebase Firestore para recuperar dados do usuário. Além disso, o aplicativo deve ter o AsyncStorage configurado para armazenar informações localmente.

Observações

  1. A página Home utiliza o conceito de Hooks do React para gerenciar estados e efeitos colaterais.
  2. A atualização automática dos dados é acionada quando necessário, garantindo informações precisas.
  3. As dicas interativas são fornecidas para orientar os usuários nas seções de saldo e menu de navegação.
  4. O código está organizado de forma modular, facilitando a manutenção e escalabilidade.

Home screen

Money

A tela Money exibe informações sobre as cotações de moedas em relação ao Real (BRL).
Utiliza a classe ApiRequests para fazer requisições à API e obter dados atualizados sobre as cotações.
As cotações de três moedas (Dólar, Euro e Peso Argentino) são exibidas em gráficos usando o componente MoneysGraph.

Principais Características

  1. Cotações de Moedas:

    • Utiliza a classe ApiRequests para obter dados das cotações de moedas.
    • As moedas exibidas são Dólar (USD), Euro (EUR) e Peso Argentino (ARS).

  2. Gráficos de Cotação:

    • Para cada moeda, exibe um gráfico utilizando o componente MoneysGraph.
    • Os gráficos apresentam a relação da moeda com o Real (BRL).
    • Os dados incluem a taxa de câmbio de compra (ask) e uma constante para referência.

  3. Componente MoneysGraph:

    • O componente MoneysGraph é utilizado para exibir os gráficos de barras das cotações de moedas.
    • Os dados do gráfico são passados como propriedades (bardata e name).

  4. Botão de Retorno à Tela Inicial:

    • Inclui um botão de retorno à tela inicial (Home) para facilitar a navegação.
    • O botão utiliza o ícone de seta para trás da biblioteca Ionicons.

  5. Estilo Responsivo:

    • Utiliza estilos que proporcionam uma boa aparência e organização na tela.
    • Adota margens e espaçamentos para melhorar a legibilidade e usabilidade.

Exemplo de Uso

<Money />

Observações

  • A tela utiliza o contexto de carregamento (useLoading) para exibir e ocultar indicadores de carregamento durante a obtenção dos dados.
  • Os gráficos de cotação são exibidos usando o componente MoneysGraph, que provavelmente é importado de um arquivo separado.
  • A tela inclui uma rolagem (ScrollView) para acomodar os gráficos, permitindo a visualização de todas as informações em uma única página.
  • As cotações de moedas são obtidas no momento da renderização da tela, garantindo informações atualizadas.

Money screen

Página Perfil

Funcionalidades Principais

A página Perfil apresenta informações detalhadas sobre o usuário, incluindo dados pessoais, preferências de investimento e ações de interesse. Possui funcionalidades para modificar a foto do usuário, visualizar e alterar informações pessoais e de investimentos.

Principais Funcionalidades:

  1. Visualização de Dados Pessoais:

    • Exibe o nome, e-mail, profissão e perfil de investimento do usuário.
    • Permite a modificação da foto do perfil (ainda não implementada).

  2. Ações de Interesse:

    • Mostra as ações marcadas como interesse pelo usuário.
    • Possibilita a alteração dessas ações.

  3. Alteração de Ações de Interesse:

    • Permite ao usuário modificar suas escolhas de ações de interesse.
    • Ao clicar em "Alterar", redireciona para a página de seleção de ações.

  4. Navegação Rápida:

    • Inclui um botão para retornar à página inicial (Home) do aplicativo.

  5. Alterar foto de perfil

    • Ao clicar na foto de perfil o usuário é levado a outra tela onde poderá atualizar sua foto de perfil do aplicativo

Componentes Utilizados

A página Perfil utiliza componentes do React Native para criar uma interface amigável e interativa. Alguns dos principais componentes incluem:

  1. Feather e MaterialIcons:

    • Ícones utilizados para representar ações e navegação.

  2. TouchableOpacity:

    • Componente que possibilita a criação de botões clicáveis.

  3. ScrollView:

    • Utilizado para criar uma área rolável para a lista de ações de interesse.

Observações

  1. Modificação de Foto do Perfil:

    • A funcionalidade para modificar a foto do perfil ainda não foi implementada.

  2. Atualização Automática:

    • A página realiza atualizações automáticas conforme necessário para garantir dados precisos.

  3. Interatividade:

    • Oferece uma experiência interativa ao clicar em botões e modificar a lista de ações de interesse.

  4. Estilo Visual:

    • Utiliza estilos visuais para proporcionar uma aparência atraente e coesa ao usuário.

  5. Código Organizado:

    • O código fonte está organizado de forma a facilitar a manutenção e extensão do aplicativo.

Exemplo de Uso

<Perfil navigation={navigation} />

Referências de Ícones:

  • Feather: Ícone de usuário para a alteração de foto de perfil.
  • MaterialIcons: Ícone de casa para o botão de navegação de volta à página inicial.
  • AntDesign: Ícone de adição para adicionar novos investimentos.

Profile Screen

Settings

A tela Settings é responsável por exibir e permitir a edição de informações do usuário, como nome, email, profissão e perfil de investimento.
Além disso, fornece um botão para retornar à tela inicial (Home) e outro para realizar o logout (Sair).

Principais Características

  1. Exibição e Edição de Dados:

    • Utiliza o componente ChangeData para exibir e permitir a edição de diferentes campos de dados do usuário, como nome, email, profissão e perfil de investimento.
    • Ao editar um campo, aciona uma função refresh para atualizar as informações na tela.

  2. Botão de Retorno à Tela Inicial:

    • Inclui um botão de retorno à tela inicial (Home) para facilitar a navegação.
    • O botão utiliza o ícone de casa da biblioteca MaterialIcons.

  3. Botão de Logout (Sair):

    • Inclui um botão para realizar o logout do usuário.
    • Ao clicar no botão, aciona a função handleSair que remove a autenticação e navega para a tela de autenticação (Auth).

  4. Atualização Dinâmica dos Dados:

    • Utiliza o estado smth para acionar uma atualização dinâmica dos dados quando necessário.

  5. Estilo Responsivo:

    • Utiliza estilos que proporcionam uma boa aparência e organização na tela.
    • Adota margens, espaçamentos e posicionamento absoluto para melhorar a legibilidade e usabilidade.

Exemplo de Uso

<Settings />

Observações

  • A tela utiliza o contexto de carregamento (useLoading) para exibir e ocultar indicadores de carregamento durante a obtenção dos dados.
  • As informações do usuário são obtidas do Firebase (fr.getFullDoc()).
  • A função refresh é utilizada para acionar a atualização dos dados após uma edição.
  • O botão "Sair" (handleSair) realiza o logout do usuário e navega para a tela de autenticação (Auth).
  • A tela inclui um botão de retorno à tela inicial (Home) para facilitar a navegação.

Settings Screen

EventsMap

Principais Funcionalidades

A tela EventsMap é responsável por exibir um mapa com eventos. As principais funcionalidades ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar seu propósito.

Principais Funcionalidades:

  1. A ser definido:
    • As funcionalidades principais desta tela ainda precisam ser definidas.

Componentes Utilizados

A tela utilizará diversos componentes do React Native para criar uma interface intuitiva. Os componentes específicos ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais componentes serão utilizados.

Pré-requisitos

Os pré-requisitos para utilizar a tela EventsMap ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais serão os pré-requisitos.

Observações

  1. A ser definido:
    • As observações sobre esta tela ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar quais serão as observações.

Graphs

O componente React-Native denominado Graphs é responsável por exibir gráficos relacionados às finanças do usuário, incluindo um gráfico de receitas e gastos, um gráfico de barras para receitas e um gráfico de linha para gastos.

Principais Características

  1. Gastos X Receitas:

    • Utiliza um gráfico de pizza (PieChart) para visualizar a relação entre gastos e receitas.
    • Cada categoria é representada por uma fatia no gráfico.
    • Cores diferenciadas para representar gastos e receitas.

  2. Gráfico de Receitas:

    • Apresenta um gráfico de barras (BarChart) para visualizar as receitas.
    • As barras representam diferentes fontes de receita.
    • Eixo Y rotulado em Reais (R$).

  3. Gráfico de Gastos:

    • Mostra um gráfico de linha (LineChart) para visualizar os gastos ao longo do tempo.
    • Cada ponto no gráfico representa um tipo de despesa.
    • Toque em um ponto para exibir um alerta com detalhes sobre a despesa.

  4. Integração com FlashMessage:

    • Utiliza o componente FlashMessage para exibir mensagens temporárias ao clicar em um ponto no gráfico de gastos.

  5. Navegação de Volta:

    • Inclui um botão de navegação que permite voltar à página inicial.

Parâmetros

  • O componente não aceita parâmetros externos. Ele extrai dados diretamente da rota (route.params.allData).

Configurações de Gráficos:

  • Configurações específicas para cada tipo de gráfico, como cores e estilos, são definidas para proporcionar uma experiência visual agradável.

Estilos Padrão:

  • Os estilos são definidos para garantir a coesão visual dos gráficos e a legibilidade das informações.

Observações

  • O componente faz uso da Context API para exibição de loading durante a recuperação de dados.
  • As bibliotecas externas react-native-chart-kit e react-native-flash-message são utilizadas para renderizar os gráficos e exibir mensagens temporárias, respectivamente.

Referências de Ícones:

  • Ionicons: Ícone de seta para voltar à página inicial.


Graphs screen

MapLoadingScreen

Principais Funcionalidades

A tela MapLoadingScreen é responsável por exibir uma tela de carregamento enquanto o mapa está sendo carregado. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Exibição de Tela de Carregamento:
    • Exibe uma tela de carregamento enquanto o mapa está sendo carregado.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. Alguns dos principais componentes incluem:

  1. ActivityIndicator:

    • Componente para exibir um indicador de atividade de carregamento.

  2. View:

    • Componente para agrupar outros componentes.

Pré-requisitos

Para utilizar a tela MapLoadingScreen, é necessário garantir que o aplicativo tenha acesso à internet para carregar o mapa.

Observações

  1. Exibição de Tela de Carregamento:
    • A tela exibe um indicador de atividade de carregamento para informar ao usuário que o mapa está sendo carregado.

Money

Principais Funcionalidades

A tela Money é responsável por gerenciar as funcionalidades relacionadas ao dinheiro no aplicativo. As principais funcionalidades ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar seu propósito.

Principais Funcionalidades:

  1. A ser definido:
    • As funcionalidades principais desta tela ainda precisam ser definidas.

Componentes Utilizados

A tela utilizará diversos componentes do React Native para criar uma interface intuitiva. Os componentes específicos ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais componentes serão utilizados.

Pré-requisitos

Os pré-requisitos para utilizar a tela Money ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais serão os pré-requisitos.

Observações

  1. A ser definido:
    • As observações sobre esta tela ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar quais serão as observações.

SeePicture

Principais Funcionalidades

A tela SeePicture é responsável por exibir uma foto selecionada pelo usuário. As principais funcionalidades ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar seu propósito.

Principais Funcionalidades:

  1. A ser definido:
    • As funcionalidades principais desta tela ainda precisam ser definidas.

Componentes Utilizados

A tela utilizará diversos componentes do React Native para criar uma interface intuitiva. Os componentes específicos ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais componentes serão utilizados.

Pré-requisitos

Os pré-requisitos para utilizar a tela SeePicture ainda precisam ser definidos, pois o arquivo atualmente não contém código suficiente para determinar quais serão os pré-requisitos.

Observações

  1. A ser definido:
    • As observações sobre esta tela ainda precisam ser definidas, pois o arquivo atualmente não contém código suficiente para determinar quais serão as observações.

ChangeProfilePic

Principais Funcionalidades

A tela de Alteração de Foto de Perfil permite ao usuário alterar sua foto de perfil usando a câmera do dispositivo. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Alteração de Foto de Perfil:

    • Permite ao usuário tirar uma nova foto com a câmera do dispositivo para usar como foto de perfil.

  2. Verificação de Permissão:

    • Verifica se a permissão para usar a câmera foi concedida.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. Alguns dos principais componentes incluem:

  1. Camera:

    • Componente para acessar a câmera do dispositivo.

  2. View e Text:

    • Componentes para exibir uma mensagem caso a permissão para usar a câmera não tenha sido concedida.

Pré-requisitos

Para utilizar a tela de Alteração de Foto de Perfil, é necessário garantir que o aplicativo tenha permissão para acessar a câmera do dispositivo.

Observações

  1. Verificação de Permissão:

    • A tela verifica se a permissão para usar a câmera foi concedida. Se não, exibe uma mensagem informando ao usuário que a permissão não foi concedida.

  2. Interação com o Usuário:

    • Oferece uma interface simples e interativa para facilitar a alteração da foto de perfil.

InvestmentsCheckbox

Funcionalidades Principais

A tela de Seleção de Ações de Interesse permite ao usuário visualizar e modificar suas escolhas de investimentos. As funcionalidades incluem:

Principais Funcionalidades:

  1. Visualização e Seleção de Ações:

    • Exibe a lista de ações de interesse do usuário.
    • Permite ao usuário selecionar/deselecionar ações de interesse.

  2. Atualização Automática:

    • Atualiza automaticamente a lista de ações conforme o usuário realiza seleções.

  3. Salvar Alterações:

    • Possui um botão "Salvar" que, ao ser acionado, salva as alterações realizadas nas seleções de ações.

  4. Adicionar Nova Ação:

    • Oferece um botão "Novo" para direcionar o usuário à página de cadastro de novas ações de interesse.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para proporcionar uma experiência amigável ao usuário. Alguns dos principais componentes incluem:

  1. FlatList:

    • Utilizada para renderizar a lista de ações de interesse de forma eficiente.

  2. TouchableOpacity:

    • Componente que possibilita a criação de botões clicáveis.

  3. CheckBox Component:

    • Componente customizado para representar visualmente a seleção/deseleção de ações.

Pré-requisitos

Para utilizar a tela de Seleção de Ações de Interesse, é necessário garantir que o aplicativo tenha acesso à API do Firebase Firestore para recuperar e armazenar dados do usuário. Além disso, o AsyncStorage deve estar configurado para armazenar informações localmente.

Observações

  1. Interatividade Simples:

    • A tela é projetada para ser simples e intuitiva, permitindo ao usuário realizar suas escolhas de investimentos de forma rápida.

  2. Feedback Visual:

    • Utiliza uma representação visual (checkBox) para indicar as ações de interesse selecionadas.

  3. Botão "Novo":

    • Oferece um atalho para a página de cadastro de novas ações, facilitando a expansão da lista de investimentos.

  4. Atualização Automática:

    • As alterações realizadas na seleção de ações são salvas automaticamente ao pressionar o botão "Salvar".

  5. Estilo Visual:

    • Utiliza estilos visuais para proporcionar uma experiência agradável e coerente com o restante do aplicativo.

SaveInvestment

Funcionalidades Principais

A tela de Cadastro de Ações de Interesse permite ao usuário adicionar uma nova ação à sua lista de investimentos. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Cadastro de Nova Ação:

    • Permite ao usuário cadastrar uma nova ação de interesse.
    • Requer a inserção da descrição da ação, seu valor atual e o status (crescimento ou queda).

  2. Escolha de Status:

    • Oferece opções para o usuário selecionar o status da ação, indicando se está em crescimento ou queda.

  3. Envio do Cadastro:

    • Após preencher os campos necessários, o usuário pode enviar o cadastro para ser salvo.

  4. Navegação Rápida:

    • Inclui um botão para retornar à página de Investimentos.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. Alguns dos principais componentes incluem:

  1. TextInput:

    • Componente para a entrada de texto, utilizado para inserir a descrição e o valor da ação.

  2. TouchableOpacity:

    • Componente que possibilita a criação de botões clicáveis.

  3. Button:

    • Botão nativo do React Native utilizado para acionar a submissão do cadastro.

  4. AntDesign e Ionicons:

    • Ícones utilizados para representar as opções de crescimento e queda da ação, bem como para a navegação de retorno.

Pré-requisitos

Para utilizar a tela de Cadastro de Ações de Interesse, é necessário garantir que o aplicativo tenha acesso à API do Firebase Firestore para recuperar e armazenar dados do usuário. Além disso, o AsyncStorage deve estar configurado para armazenar informações localmente.

Observações

  1. Escolha do Status:

    • A tela permite ao usuário escolher entre "Crescimento" e "Queda" como status da ação.

  2. Interação com o Usuário:

    • Oferece uma interface simples e interativa para facilitar o cadastro de novas ações.

  3. Atualização Automática:

    • A tela atualiza automaticamente a lista de investimentos após o cadastro de uma nova ação.

  4. Estilo Visual:

    • Utiliza estilos visuais para proporcionar uma experiência agradável ao usuário.

  5. Botão de Retorno:

    • Inclui um botão para retornar à página de Investimentos após o cadastro ser concluído.

SplashScreen

Este componente React-Native, denominado SplashScreen, representa a tela inicial do aplicativo exibida durante a inicialização.
A função principal é realizar operações assíncronas, como a obtenção de dados do banco de dados Firebase, enquanto exibe o logotipo do aplicativo.
Após a conclusão das operações, redireciona para a tela principal (Home).

Funcionalidades Principais

  1. Obtenção de Dados do Banco de Dados:

    • Utiliza o contexto useLoading para obter a string de autenticação e criar uma instância de Storage para interagir com o Firebase.
    • Utiliza a função getFullDoc de Storage para obter dados completos do usuário no Firebase.
    • Armazena os dados obtidos localmente utilizando o AsyncStorage para posterior referência no aplicativo.

  2. Temporização de Exibição:

    • Utiliza setTimeout para simular uma breve pausa (5.5 segundos) antes de prosseguir para a próxima tela. Isso é comum em telas de introdução ou splash para exibir o logotipo por um curto período.

  3. Navegação para a Próxima Tela:

    • Utiliza useNavigation para obter o objeto de navegação.
    • Após a conclusão das operações, navega para a tela principal (Home).

  4. Componente de Logotipo:

    • Inclui o componente LogoImage para exibir o logotipo do aplicativo, centralizado na tela.

  5. Armazenamento Local de Dados:

    • Utiliza o AsyncStorage para armazenar dados obtidos do banco de dados de forma local, permitindo o acesso rápido e offline.

  6. Tratamento de Erros:

    • Registra e trata erros que possam ocorrer durante a obtenção de dados do banco de dados Firebase.

  7. Estilo e Layout:

    • Utiliza estilos simples para centralizar o logotipo na tela durante a exibição da SplashScreen.

Componentes Utilizados

  • React, useEffect para gerenciar o ciclo de vida.
  • View do React-Native para estrutura de layout.
  • useNavigation do @react-navigation/native para navegação.
  • useLoading e Storage para interação com Firebase.
  • AsyncStorage para armazenamento local de dados.
  • Componente LogoImage para exibição do logotipo.

Observações

  • Este componente é crucial para proporcionar uma experiência inicial ao usuário, exibindo o logotipo e realizando operações iniciais necessárias antes de redirecionar para a tela principal.

SplashScreen

TypeOfPic

Principais Funcionalidades

A tela de Seleção de Tipo de Foto permite ao usuário escolher uma foto de sua galeria ou tirar uma nova foto para usar como foto de perfil. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Seleção de Foto:

    • Permite ao usuário selecionar uma foto existente de sua galeria.

  2. Criação de Nova Foto:

    • Permite ao usuário tirar uma nova foto para usar como foto de perfil.

  3. Exibição de Progresso:

    • Exibe uma barra de progresso enquanto a foto está sendo carregada.

  4. Exibição de Mensagens:

    • Exibe mensagens de erro se ocorrerem problemas durante o processo.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. Alguns dos principais componentes incluem:

  1. Modal:

    • Componente para exibir a foto selecionada ou tirada.

  2. Image:

    • Componente para exibir a foto selecionada ou tirada.

  3. TouchableOpacity:

    • Componente que possibilita a criação de botões clicáveis.

Pré-requisitos

Para utilizar a tela de Seleção de Tipo de Foto, é necessário garantir que o aplicativo tenha permissão para acessar a câmera e a galeria do dispositivo.

Observações

  1. Seleção de Foto:

    • A tela permite ao usuário selecionar uma foto existente de sua galeria.

  2. Criação de Nova Foto:

    • A tela permite ao usuário tirar uma nova foto para usar como foto de perfil.

  3. Exibição de Progresso:

    • A tela exibe uma barra de progresso enquanto a foto está sendo carregada.

  4. Exibição de Mensagens:

    • A tela exibe mensagens de erro se ocorrerem problemas durante o processo.

UploadPic

Principais Funcionalidades

A tela de Upload de Foto permite ao usuário fazer o upload de uma foto selecionada ou tirada para usar como foto de perfil. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Upload de Foto:

    • Permite ao usuário fazer o upload de uma foto selecionada ou tirada.

  2. Exibição de Mensagens:

    • Exibe uma mensagem de sucesso quando a foto é carregada com sucesso.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. Alguns dos principais componentes incluem:

  1. Toast:
    • Componente para exibir mensagens de sucesso ou erro.

Pré-requisitos

Para utilizar a tela de Upload de Foto, é necessário garantir que o aplicativo tenha permissão para acessar a câmera e a galeria do dispositivo, e que o usuário tenha selecionado ou tirado uma foto para fazer o upload.

Observações

  1. Upload de Foto:

    • A tela permite ao usuário fazer o upload de uma foto selecionada ou tirada.

  2. Exibição de Mensagens:

    • A tela exibe uma mensagem de sucesso quando a foto é carregada com sucesso. Se ocorrer um erro durante o processo, uma mensagem de erro é exibida.

WebViewScreen

Principais Funcionalidades

A tela WebViewScreen permite ao usuário visualizar conteúdo da web dentro do aplicativo. As principais funcionalidades incluem:

Principais Funcionalidades:

  1. Visualização de Conteúdo da Web:
    • Permite ao usuário visualizar páginas da web dentro do aplicativo.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para criar uma interface intuitiva. O principal componente utilizado é:

  1. WebView:
    • Componente para exibir conteúdo da web.

Pré-requisitos

Para utilizar a tela WebViewScreen, é necessário garantir que o aplicativo tenha acesso à internet.

Observações

  1. Visualização de Conteúdo da Web:
    • A tela permite ao usuário visualizar páginas da web dentro do aplicativo, proporcionando uma experiência de usuário mais integrada.

Balance

Funcionalidades Principais

O componente Balance é responsável por exibir informações de saldo e gastos, permitindo ao usuário ocultar ou exibir esses valores clicando no componente.

Principais Funcionalidades:

  1. Toggle Balance:

    • Permite alternar entre a exibição e ocultação dos valores de saldo e gastos ao ser clicado.

  2. Tooltips Informativos:

    • Utiliza tooltips para fornecer informações contextuais sobre o propósito do componente e instruções de interação.

Componentes Utilizados

O Balance utiliza os seguintes componentes principais:

  1. TooltipComp:

    • Utiliza o componente TooltipComp para exibir dicas informativas sobre o componente.

  2. Animated:

    • Utiliza a biblioteca Animated do React Native para aplicar animações suaves na exibição e ocultação dos valores.

Pré-requisitos

Certifique-se de que o componente TooltipComp esteja devidamente configurado no seu projeto, e que as dependências, como react-native-reanimated e react-native-gesture-handler, estejam instaladas.

Observações

  1. Interatividade Intuitiva:

    • A funcionalidade de alternar entre a exibição e ocultação dos valores é intuitiva para o usuário.

  2. Tooltips Informativos:

    • Os tooltips fornecem informações úteis e orientações sobre as funcionalidades do componente.

  3. Design Responsivo:

    • O design do componente é responsivo, ajustando-se a diferentes tamanhos de tela.

  4. Personalização de Estilo:

    • O componente oferece flexibilidade para personalização adicional de estilo, como cores e tamanhos de fonte.

  5. Animação Suave:

    • A animação de fade-in e fade-out proporciona uma transição suave, melhorando a experiência do usuário.

  6. Multi-Tooltips:

    • O componente utiliza tooltips em duas instâncias para fornecer informações sequenciais e contextuais ao usuário.

  7. Liberdade de Interação:

    • O usuário tem a liberdade de explorar as funcionalidades do componente de acordo com as instruções fornecidas pelos tooltips.

Header

Funcionalidades Principais

O componente Header é responsável por exibir o cabeçalho da aplicação, incluindo informações do usuário e botão de perfil.

Principais Funcionalidades:

  1. Slide In Down Animation:

    • Utiliza a animação Slide In Down do pacote react-native-animatable para uma entrada suave quando o componente é montado.

  2. Exibição do Nome do Usuário:

    • Apresenta o nome do usuário obtido do objeto userData.

  3. Botão de Perfil:

    • Oferece um botão para acessar a tela de perfil do usuário ao ser pressionado.

Componentes Utilizados

O Header utiliza os seguintes componentes principais:

  1. Animatable.View:

    • Utiliza o componente Animatable.View para aplicar animações de entrada.

  2. Feather:

    • Ícone do pacote @expo/vector-icons utilizado para representar o botão de perfil.

Pré-requisitos

Para integrar o Header corretamente, certifique-se de que as dependências, como react-native-animatable e @expo/vector-icons, estejam instaladas e configuradas em seu projeto.

Observações

  1. Estilo Coeso:

    • O componente segue um estilo coeso com o tema visual da aplicação, utilizando cores e tamanhos de fonte consistentes.

  2. Animação de Entrada:

    • A animação de entrada proporciona uma transição suave, melhorando a experiência do usuário.

  3. Botão de Perfil Intuitivo:

    • O botão de perfil é intuitivo, permitindo que o usuário acesse facilmente a tela de perfil ao pressioná-lo.

  4. Design Responsivo:

    • O design é responsivo e ajustável a diferentes tamanhos de tela, garantindo uma aparência consistente em dispositivos variados.

  5. Personalização de Estilo:

    • O componente fornece uma estrutura flexível para personalização adicional de estilo, se necessário.

HomeModal

Funcionalidades Principais

O HomeModal é um componente utilizado para adicionar transações de receitas ou despesas de forma interativa. As funcionalidades principais incluem:

Principais Funcionalidades:

  1. Entrada de Dados:

    • Permite ao usuário inserir dados, como descrição, valor e data para a transação.

  2. Seleção de Data:

    • Oferece um seletor de data para escolher a data da transação.

  3. Visualização de Ação:

    • Exibe a ação que está sendo realizada (adicionar receita ou despesa) e a categoria correspondente.

  4. Botões de Ação:

    • Botões de navegação permitem voltar à tela anterior ou salvar a transação.

Componentes Utilizados

O HomeModal utiliza vários componentes do React Native para criar uma interface interativa e amigável. Alguns dos componentes-chave incluem:

  1. Modal:

    • Utiliza o componente Modal do react-native-modal para exibir uma janela modal.

  2. DateTimePicker:

    • Incorpora o DateTimePicker para selecionar a data da transação.

  3. Ionicons:

    • Ícones fornecidos pelo conjunto Ionicons para representar visualmente os botões de ação.

  4. TextInput:

    • Componente TextInput para a entrada de dados como descrição e valor.

Pré-requisitos

Para utilizar o HomeModal, é necessário garantir que os estilos e temas de cores estejam configurados de acordo com a aparência geral da aplicação. Certifique-se de que as dependências externas, como @react-native-community/datetimepicker e react-native-modal, estejam instaladas corretamente.

Observações

  1. Estilo Consistente:

    • O componente segue o estilo visual da aplicação, garantindo uma experiência consistente para o usuário.

  2. Entrada de Dados Validada:

    • O valor digitado para a quantia é validado para garantir que apenas números válidos sejam aceitos.

  3. Seleção de Data Intuitiva:

    • A interface de seleção de data é intuitiva e oferece uma experiência fácil para o usuário.

  4. Botões de Ação Claros:

    • Os botões de navegação são claramente representados por ícones reconhecíveis, facilitando a compreensão do usuário sobre as ações disponíveis.

  5. Layout Responsivo:

    • O layout é responsivo para diferentes tamanhos de tela, proporcionando uma experiência consistente em dispositivos variados.

Input screen

HorizontalMenuOption

Funcionalidades Principais

A HorizontalMenuOption representa uma opção no menu horizontal da aplicação, proporcionando funcionalidades específicas relacionadas às diferentes categorias. As funcionalidades incluem:

Principais Funcionalidades:

  1. Acesso a Páginas Específicas:

    • Redireciona o usuário para páginas específicas com base na categoria selecionada.
    • Pode direcionar para as páginas de Configurações, Gráficos ou Finanças, conforme a categoria.

  2. Exibição de Modal Interativo:

    • Exibe um modal interativo para adicionar transações de receitas ou despesas.
    • Facilita a entrada de dados diretamente do menu.

  3. Adição de Receitas ou Despesas:

    • Permite ao usuário adicionar novas receitas ou despesas diretamente do menu.

  4. Atualização Automática:

    • Atualiza automaticamente os dados ao adicionar novas transações.

Componentes Utilizados

A tela utiliza diversos componentes do React Native para proporcionar uma experiência amigável ao usuário. Alguns dos principais componentes incluem:

  1. TouchableOpacity:

    • Componente que possibilita a criação de botões clicáveis.

  2. AntDesign e Fontisto:

    • Ícones fornecidos pelos conjuntos AntDesign e Fontisto para representar visualmente as categorias.

  3. HomeModal Component:

    • Um modal personalizado utilizado para a entrada de dados, como descrição, valor e data, ao adicionar novas transações.

Pré-requisitos

Para utilizar a HorizontalMenuOption, é necessário garantir que a tela de configurações, gráficos e finanças esteja corretamente configurada. Além disso, o AsyncStorage deve ser configurado para armazenar informações localmente.

Observações

  1. Simplicidade Visual:

    • O componente foi projetado para oferecer uma interface visual simples e intuitiva.

  2. Interação Rápida:

    • Facilita a adição rápida de transações diretamente do menu, sem a necessidade de navegar para outras páginas.

  3. Modal Interativo:

    • Utiliza um modal interativo para proporcionar uma experiência de entrada de dados mais amigável.

  4. Atualização Automática:

    • As alterações realizadas na adição de transações são automaticamente atualizadas na visualização principal.

Menu

Menu

Descrição

O componente Menu exibe um menu horizontal com várias opções de ações que o usuário pode realizar, como adicionar entradas, realizar compras, registrar gastos, acessar configurações, visualizar gráficos e gerenciar moedas. Este componente é projetado para ser utilizado como parte de um aplicativo de controle financeiro.

Funcionalidades Principais

1. Menu Horizontal

  • Apresenta um menu horizontal que pode ser navegado arrastando para o lado.

2. Opções de Menu

  • Inclui várias opções de menu, cada uma representada por um ícone, rótulo e tipo de ação.

3. Toque Responsivo

  • Cada opção de menu é interativa e responde a toques do usuário.

4. Dicas de Ferramentas (Tooltips)

  • Integra dicas de ferramentas para fornecer informações contextuais e orientações ao usuário.

5. Arraste para Visualizar Mais

  • Incentiva o usuário a arrastar o menu horizontalmente para visualizar todas as opções disponíveis.

Componentes Utilizados

  1. TooltipComp:

    • Utiliza o componente TooltipComp para fornecer dicas de ferramentas informativas.

  2. ScrollView:

    • Utiliza ScrollView do React Native para criar a interface de menu horizontal.

  3. HorizontalMenuOption:

    • Utiliza o componente HorizontalMenuOption para renderizar cada opção no menu.

Estrutura de Dados

O array menuOptions define as opções disponíveis no menu. Cada objeto no array representa uma opção com as seguintes propriedades:

  • actionType: Tipo de ação a ser realizada (adicionando, configurando, etc.).
  • label: Rótulo da opção.
  • icon: Nome do ícone associado à opção.
  • type: Tipo de ação (entrada, saída, configurações, gráficos, moeda, etc.).

Uso

O componente Menu deve ser integrado em uma tela maior, geralmente como parte de uma estrutura de navegação ou em um contexto mais amplo de um aplicativo financeiro.

<Menu
  isRefresh={/* Estado indicando se é necessário atualizar */}
  refresh={/* Função para acionar uma atualização */}
  navigation={/* Objeto de navegação do React Navigation */}
  moneyGraph={/* Dados relacionados a gráficos de dinheiro */}
  showMenuTip={/* Estado indicando se a dica de ferramenta do menu deve ser exibida */}
  setTip={/* Função para configurar o estado da dica de ferramenta do menu */}
  showSettingsTip={/* Estado indicando se a dica de ferramenta de configurações deve ser exibida */}
  setShowSettingsTip={/* Função para configurar o estado da dica de ferramenta de configurações */}
/>

Observações

  1. Responsividade:

    • O design do menu é responsivo, adaptando-se a diferentes tamanhos de tela.

  2. Intuitividade:

    • O usuário é incentivado a explorar as opções do menu através de dicas de ferramentas e interações responsivas.

  3. Configurações de Menu:

    • O componente HorizontalMenuOption é utilizado para representar cada opção no menu, facilitando a extensão ou personalização futura.

menu

MovementRegister

Descrição

O componente MovementRegister é responsável por exibir registros de movimentação, como entradas, saídas ou gastos, em um formato de lista. Cada registro exibe detalhes como data, descrição e valor, sendo possível ocultar ou exibir o valor ao tocar no registro.

Funcionalidades Principais

1. Exibição de Registros

  • Apresenta os registros de movimentação em um formato de lista.

2. Ocultar/Exibir Valor

  • Permite ao usuário ocultar ou exibir o valor associado a cada registro ao tocar no item.

3. Animação de Transição

  • Utiliza uma animação de transição suave para mostrar ou esconder o valor do registro.

Propriedades

  • props: Objeto contendo as propriedades do registro, como data, descrição, valor e tipo.

Estrutura do Componente

O componente MovementRegister consiste em um TouchableOpacity que envolve a exibição dos detalhes do registro. Ele possui a seguinte estrutura:

  1. Data: Exibe a data do registro.
  2. Descrição: Apresenta a descrição associada à movimentação.
  3. Valor: O valor da movimentação, podendo ser ocultado/exibido ao tocar no registro.

Uso

<MovementRegister props={{ date: '01/01/2023', description: 'Compra de mantimentos', value: 50.0, type: 1 }} />

Estilos

O componente possui estilos definidos para cada elemento, como data, descrição e valor, bem como estilos para animações de transição e esqueleto.

Observações

  1. Cores:

    • Utiliza cores diferentes para valores positivos (#2ecc71) e negativos (#e74c3c).

  2. Estilos de Transição:

    • Aplica uma animação de transição suave para mostrar ou esconder o valor do registro.

  3. Sinalização Visual:

    • Utiliza um esqueleto (skeleton) para indicar visualmente a presença do valor, mesmo quando está oculto.

  4. Responsividade:

    • Projetado para se adaptar a diferentes tamanhos de tela e proporcionar uma experiência de usuário consistente.

mov regis

Movements

O componente React-Native denominado Movements é responsável por exibir informações sobre transações financeiras, como descrição, data e valor.
Este componente é projetado para ser utilizado em uma lista de movimentos financeiros, proporcionando uma representação visual clara e interativa.

Principais Características

  1. Toque Interativo:

    • O componente é envolto por um TouchableOpacity, permitindo interação com o usuário ao ser pressionado.

  2. Exibição Condicional de Valor:

    • O valor da transação é inicialmente oculto e é exibido quando o componente é pressionado (showValue é alternado).

  3. Formatação de Data:

    • Utiliza a função formatarData para formatar a data da transação. Caso não haja data disponível, exibe "sem data".

  4. Estilo Responsivo:

    • Utiliza estilos flexíveis para se adaptar a diferentes tamanhos de tela.

  5. Estilos Personalizáveis:

    • Define estilos específicos para a data, rótulo, valor (receita) e despesas. Os estilos são configurados para melhor legibilidade e apelo visual.

  6. Indicação Visual de Despesas:

    • O valor é exibido em vermelho (#e74c3c) quando se trata de uma despesa, proporcionando uma indicação visual clara do tipo de transação.

Parâmetros

  • props: Objeto contendo as propriedades da transação, incluindo date (data), description (descrição), value (valor) e type (tipo de transação - 1 para receita, 0 para despesa).

Observações

  • Este componente é flexível e pode ser incorporado em listas ou páginas de movimentações financeiras.
  • A formatação do valor considera o tipo de transação para exibição apropriada (receita ou despesa).

Movements component

ChangeData

Este componente React-Native, denominado ChangeData, oferece a funcionalidade de modificar dados específicos do usuário, como nome, email, profissão ou perfil de investimento.
Inclui um modal interativo para a entrada de novos dados e interage com o Firebase para atualizar as informações.

Funcionalidades Principais

  1. Modal de Alteração de Dados:

    • Utiliza o pacote react-native-modal para criar um modal de alteração de dados.
    • Exibe um modal com entrada de texto para modificar o valor associado ao rótulo fornecido (label).
    • O modal possui botões de confirmação e cancelamento para realizar ou descartar as alterações.

  2. Interação com o Firebase:

    • Utiliza o contexto useLoading para obter a string de autenticação e criar uma instância de Storage para interagir com o Firebase.
    • Na montagem do componente, carrega os dados do usuário do Firebase utilizando getFullDoc e armazena em userData.

  3. Atualização de Dados:

    • Ao confirmar as alterações no modal, utiliza a função updateData para atualizar os dados no Firebase.
    • A função decide qual campo de dados deve ser atualizado com base no rótulo fornecido (label).

  4. Estilo e Layout Responsivos:

    • Utiliza estilos específicos para proporcionar uma experiência visual agradável e responsiva.
    • Apresenta um estilo de borda que separa visualmente instâncias consecutivas do componente.

Componentes Utilizados

  • TouchableOpacity e View do React-Native para interação e estrutura de layout.
  • Modal do pacote react-native-modal para a criação de um modal.
  • Ionicons do @expo/vector-icons para ícones.
  • Storage para interação com o Firebase.
  • Componentes Text e TextInput para exibição e entrada de texto.

Observações

  • Este componente é destinado a ser utilizado em configurações ou telas de perfil, permitindo ao usuário editar informações pessoais de maneira simples.

ChangeData Screen

MoneysGraph

O componente React-Native denominado MoneysGraph é responsável por exibir gráficos de barras relacionados a transações financeiras.
Utiliza a biblioteca react-native-chart-kit para criar gráficos de barras interativos e visualmente atrativos.
Este componente é ideal para representar dados financeiros de maneira clara e compreensível.

Principais Características

  1. Gráfico de Barras:

    • Utiliza o componente BarChart da biblioteca react-native-chart-kit.
    • Representa graficamente os dados financeiros em um gráfico de barras.
    • A largura e altura do gráfico são configuráveis para se adaptarem a diferentes tamanhos de tela.

  2. Configuração do Gráfico:

    • chartConfig define a configuração do gráfico, como as cores, opacidade e largura da linha.
    • A cor das barras é definida dinamicamente com base na opacidade e em uma escala de verde.

  3. Texto Descritivo:

    • Exibe um texto descritivo acima do gráfico, indicando o nome da categoria ou período representado no gráfico.
    • O texto é centralizado e estilizado para melhor legibilidade.

  4. Personalização de Estilos:

    • Utiliza estilos específicos para aprimorar a apresentação visual.
    • Define margens, bordas e espaçamentos para melhor organização e apelo visual.

Parâmetros

  • bardata: Dados do gráfico de barras. Deve ser um array contendo objetos com propriedades data (valores das barras) e color (cor das barras).
  • name: Nome da categoria ou período representado no gráfico.

Observações

  • Este componente é projetado para ser reutilizado em diferentes partes do aplicativo onde gráficos de barras relacionados a finanças sejam necessários.
  • A biblioteca react-native-chart-kit oferece opções adicionais de personalização que podem ser exploradas conforme necessário para atender aos requisitos específicos de design.

MoneyGraph Screen

LogoImage

O componente React-Native chamado LogoImage é responsável por exibir uma animação com a logomarca da aplicação.
A animação inclui um efeito de fade-in (opacidade aumentando de 0 para 1) e uma rotação contínua de 360 graus.

Principais Características

  1. Fade-in:

    • Utiliza a propriedade opacity da animação para criar um efeito de fade-in.
    • O componente começa com uma opacidade de 0 e aumenta para 1 ao longo de 5000 milissegundos.

  2. Rotação Contínua:

    • Utiliza a propriedade rotate da animação para criar uma rotação contínua.
    • A rotação varia de 0 a 360 graus ao longo de 2000 milissegundos.

  3. Promise Delays:

    • Usa await new Promise(resolve => setTimeout(resolve, tempo)) para introduzir atrasos entre diferentes etapas da animação.

  4. Estilo Dinâmico:

    • Aplica estilos dinâmicos para a imagem, incluindo a opacidade e a transformação de rotação.

Parâmetros

  • Não aceita parâmetros externos.

Configurações de Animação:

  • Configurações específicas para cada animação, como duração e interpolação, são ajustadas para alcançar o efeito desejado.

Estilos Padrão:

  • Usa estilos padrão para centralizar e alinhar a imagem no centro da tela.

Observações

  • O componente faz uso das bibliotecas react e react-native para criar a animação.
  • É um componente reutilizável que pode ser incluído em uma tela de carregamento ou em outras partes da interface do usuário para uma experiência visual mais dinâmica.

Exemplo de Uso

<LogoImage />

Imagem:

  • A imagem da logomarca é referenciada pelo caminho ./../static/imgs/logo.png.

Logo component