PRÉ REQUISITOS

Obviamente estamos falando de um framework, e precisamos de alguns conhecimentos para que não fique perdido!

• Básico de HTML e CSS para a montagem e a estilização da página / app

• Crucial conhecimentos de Javascript, extremamente fundamental ter um conhecimento com essa lingaguem até para o entendimento da estruturação e utilização dos recursos do framework

• Ambiente de desenvolvimento, necessário ter um ambiente configurado, uma IDE de sua escolha (VSCODE, Atom ou Sublime) . PS: Minha preferência é o VSCODE. Node Js, essencial para rodarmos o Javascript fora do navegador e para o Npm , que será utilizado para gerenciamento de pacotes (instalar e gerenciar dependencias)

Tendo todas as coisas listadas acima vamos para o começo de um projeto!

INSTALAÇÃO DO AMBIENTE

PS: 🫵 Instale todos os pré requisitos antes de seguir

RECOMENDAÇÕES DE PLUGINS DO VSCODE (Opcional)

• ES7+ React/Redux/React-Native snippets do dsznajder

Nessa etapa nós temos que começar a organizar tudo que precisamos para oficialmente começar a trabalhar com a ferramenta, selecione uma pasta / repositório ao seu critério para ser o 'root' do projeto.

Nesse trabalho, utilizarei a versão Expo , do qual é um framework montado em cima do React Native, ele tem várias ferramentas adicionais e acréscimos que simplificam drásticamente o ciclo de vida de um app, além de atualmente ser recomendado pela própria equipe do React Native. Então com o terminal aberto, lembrando de selecionar o tipo cmd, iremos inserir o comando para puxar a base para tudo.

Quando executar deve aparecer algo semelhante a isso aqui:

Nesse exemplo iremos utilizar a versão default do Expo, selecione com as setas do teclado a versão desejada.

Após selecionar, o projeto irá pré-carregar (Tempo de tomar um café ☕)

No meio do carregamento é normal dar uns 'warnings' porém se aparecer a mensagem de concluido está tudo correto! Após a finalização do comando execute as etapas listadas pelo próprio Expo!

Neste primeiro teste, iremos rodar a versão web, rode o código 'npm run web' e ao esperar alguns segundos, finalmente a tela padrão do template será carregada!

Voltando ao VSCODE poderemos observar vários arquivos inseridos dentro da pasta do projeto.

Para limparmos o nosso ambiente e o deixando pronto para o trabalho, rodaremos um código de limpeza do Expo (Para deletarmos os arquivos de template do projeto)

E assim estamos prontos para programar!

AMBIENTE MOBILE

Outras maneiras de trabalharmos com o React Native é em seu teste para mobile. Dentro dessas simulações temos duas maneiras de fazer isso:

• Através do aplicativo Expo Go, baixe em seu dispositivo móvel (IOS / ANDROID) e escaneie o QR CODE, lembrando que este método depende que ambos os dispositivos estejam conectados na mesma rede! Esse método é bastante rápido e conveniente para começar.

  Para iniciar digite no terminal:

  npx expo

  E logo em seguida escaneie o QR com o seu celular

• E a segunda maneira é através de simuladores, para o windows temos o Android studio e para o IOS temos o XCode, ambos bastante eficazes! Esse método é um pouco mais complicado e lento, porém também é uma opção.

COMO A BASE FUNCIONA?

Básicamente temos várias pastas disponíveis por padrão no projeto, mas irei explicar cada uma delas!

Temos a principal que se chama "app" que é a pasta onde as páginas do nosso projeto estarão, é práticamente onde tudo vai se conectar com a navegação construída em roteamento baseado em arquivos. Nós temos o arquivo "_layout.tsx", onde nossa aplicação é iniciada, e juntamente por padrão temos a "index.tsx" que é a página principal do nosso projeto

Por padrão no index sempre irá vir dois componentes, um de visualização e um de texto semelhante ao código abaixo:

Dentro do elemento de estilo podemos adicionar qualquer esilização de css como pares de valores-chave, para um teste adicione no estilo da view o código :

Em seguida confira se o background da página principal ficou vermelho!

Porém para quem já mexeu com html e css padrão sabe que a longo prazo, a quantidade de estilizações passadas assim diretamente pode ocazionar uma falta de organização ou simplesmente não ficar agradável de se trabalhar. Então iremos pegar esse objeto de estilo e posicionar-lo de forma diferente.

Para isso iremos criar uma váriavel const chamada "styles" e importar o stylesheet do react na lista de itens importados para que possa ser indentificado como folha de estilo e nisso teremos um array de classes que poderemos usar para qualquer elemento criado futuramente, na prática o código ficará exatamente assim :

Além de mais organizado, podemos reutilizar a mesma classe para diversos elementos, assim otimizando tempo e linhas de código!

TAB BAR E NAVEGAÇÃO

Para testarmos mais recursos do React Expo, utilizaremos o elemento "Link" do qual no react router é muito mais otimizado que os links padrão.

Agora iremos colocar o elemento link para uma página "about us" e na primeira linha do código iremos importar o componente com esse código :

Criaremos a outra página "about us" com esse código base (Caso siga a recomendação do plugin ES7, apenas digite o atalho "rnfe" )

Após isso acrescente o href com a nova página que criamos, ficarão assim as páginas

INDEX

ABOUT US

A navegação funciona de forma eficaz graças ao stack presente no _layout, onde podemos utilizar a navegação por pilhas, que inclusive dão esse efeito de navegação para esquerda e direita, cima e baixo

Através dele podemos inclusive visualizar o nome das páginas (que no caso são pelo nome do arquivo), mas caso seja desejado você consegue desabilitar, acrescente o atributo ao stack :

Mas caso sua ideia seja apenas de atualizar os nomes para outros, podemos fazer um método de indice, desta maneira:

Neste exato momento seria de grande valia configurarmos um método de navegação mais eficiente e visualmente mais organizado que seria a aba de navegação, é uma ferramenta de navegação bastante utilizada por dispositivos mobile, extremamente comum na posição inferior da tela, permitindo que o usuário possa trocar de tela.

Agora pensando em um exemplo mais consiso, apague o "about us" e seus links e crie logo em seguida uma pasta na "app" chamada "(tabs)". Dentro dessa pasta arraste nosso "index" para dentro , crie um "_layout.tsx" (Sim teremos dois arquivos de mesmo nome, não se preocupe está correto!) e outro chamado "settings.tsx" e nesse arquivo já puxe código base (rnfe), renomeando o nome da const para "SettingsScreen"

No nosso "_layout" principal, altere o "index" no name do "Stack.Screen" para "(tabs)" (Confie em mim! Ficará excelente). Agora no outro "_layout" , código base (rnfe) e renomeie a const para "TabsLayout" e colocaremos apenas o componente de "Tabs" afinal, iremos querer usar esse recurso do Expo Router

Com isso iremos não somente configurar os botões mas também seus ícones , que virão da Expo , o código de forma resumida ficará assim:

Como pode ver eu adicionei inclusive bastante estética (meramente educativa, até por conta das cores estarem aleatórias) onde não só podemos configurar os icones de forma dinamica mas também de forma livre! Até mesmo no "tabBar" coloquei várias opções que possa utilizar dependendo de sua necessidade!"

Para sumir com o cabeçalho, desative no _layout como fizemos antes e no que estamos trabalhando com o menu inferior, insira como estilização nas tabs :

TEMAS CLARO / ESCURO

Para começarmos, criaremos uma pasta chamada "hooks" e dentro dela crie um arquivo chamado "useTheme.tsx" e nele, projeto base (rnfe), a partir desse momento montaremos o estilo de cores, para agilizar, deixei o código para colar no projeto :

Após isso iremos colocar esse código acima da const "useTheme" do qual organizaremos os dados e também faremos o famoso null check, por padrão deixaremos undefined e caso venha um erro, isso estará mais preparado para lidar.

Agora teremos que guardar as informações do tema, e para isso de forma convencional utilizariamos local storage, mas faremos de forma mais segura, iremos utilizar o armazenamento assincrono! A primeira etapa é baixar-lo pelo NPM com esse código:

O AsyncStorage é a API simples do React Native, baseada em Promises, para persistir pequenos fragmentos de dados no dispositivo do usuário. Pense nele como o equivalente das aplicações móveis ao localStorage dos navegadores, porém assíncrono e multiplataforma.

Agora precisamos de um ThemeProvider, como é um recurso programável eu irei anexar o script para que insira diretamente após o "ThemeContext":

Explicando o que aconteceu, teremos uma função do qual receberá um elemento filho (é passado o tipo apenas para o Typescript passar!), temos uma const logo em seguida que faz o controle da escolha do tema, do qual ele poderá alternar e depois poderá armazenar.

Agora é só adicionar todo sistema ao componente, apenas acrescentando um tratamento de erro caso o tema não esteja / não funcione pelo Theme Provider, dessa maneira:

Temos nosso sistema agora é só implementar! Vamos primeiramente ao nosso "_layout" onde criamos a barra de navegação inferior e utilizaremos as cores do tema que montamos no arquivo anterior importando ele na primeira linha dessa maneira :

E dentro da "TabsLayout" colocaremos :

Depois disso atualize as cores de acordo com o que temos já configurado! (exemplo: backgroundColor : colors.surface)

Feito isso temos nossas cores configuradas, agora é necessário configurarmos um botão que possa fazer essa alternância entre temas, e para isso iremos inserir um lá no index, importe com :

E insira ele na view com a constante que vai pegar nossa função e crie o botão clicável para trocar de tema exatamente com a imagem abaixo

Não se esqueça de adicionar o Theme Provider no _layout encapsulando todo mundo! No final teremos:

USE THEME

_LAYOUT

INDEX

(TABS)_LAYOUT

E pronto temos nosso tema alternando de forma dinâmica!

BACKEND

Para esse projeto irei utilizar uma solução backend mais fácil que seria o convex, do qual não apenas serve como back, mas também para autenticação do banco de dados etc. alem de ser uma opção gratuita. Faça sua conta e assim iremos prosseguir.

Após a criação da conta , vá ao terminal e insira o código abaixo:

E agora para rodar a fase de login, rode :

Coloque para iniciar um novo projeto, insira o nome e selecione cloud deployment. E com isso podemos ver que irá aparecer uma pastinha com tudo que é necessário, não precisamos se preocupar com essa pasta por ser um ambiente já configurado, e nisso lá no site do convex deve ter aparecido o projeto, claro, sem dados ou nenhuma tabela ( Obs : Esse comando também é utilizado para dar start assim que abrirmos o vscode )

Crie o arquivo "schema.ts" dentro da pasta "convex" e insira nosso código para abrir uma tabela vazia (no exemplo utilizado "Todo's")

Para de fato definirmos como a tabela vai ser montada e suas funções, iremos criar um arquivo "todos.ts" e nele iremos inserir as caracteristicas da tabela:

Feito isso precisamos importar lá no "_layout" assim como fizemos o Theme, porém é um código do qual pegamos lá da documentação do convex react native então deixarei aqui para copiar, o arquivo ficará próximo a isso : (Eu dei uma melhorada no display da tela então não se assuste pelo acréscimo do stack)

Para testarmos se realmente funciona, vá ao index e acrescente nossas funções em botões e veja se há alterações no nosso baco no website