React Native + Firebase: Criando um APP Completo

React Native + FireBase(CRUD Completo) – Tasks

 

Passo 1

Você precisará de um conta Gmail para poder acessar o firebase e criar seu primeiro projeto.

 

Passo 2

Criar um banco no Firebase. Ao criar o banco devemos acessar: FireStore Database/Coud FireStore/Regras e em editar regras configurar nosso allow como true.

 

Depois vamos em dados para criar um coleção. Vamos chamar essa coleção de Tasks e adicionar um objeto em nossa collection Tasks.

 

Em visão geral do projeto podemos acessar nossas credenciais para acesso ao banco, vamos selecionar WEB e copiar nossas credenciais.

 

Criando nosso projeto

 

Vamos fazer algumas instalações que iremos utilizar durante o desenvolvimento do nosso projeto.
Vamos utilizar react navigation dentro do nosso app, então rode em seu terminal dentro da pasta do projeto:

 

Vamos precisar também fazer a instalação do firebase no nosso projeto.
Para isso vamos rodar no terminal o seguinte comando:

 

Com tudo configurado vamos agora iniciar a configuração dos arquivos dentro do nosso projeto.
Para iniciar nosso projeto vamos montar nossa estrutura de pastas:

 

Configurando nosso firebase.js dentro de src/config/

Configurando as Rotas

Agora, vamos trabalhar dentro do nosso arquivo principal.
No App.js, abra seu arquivo, vamos editá-lo:

Page Task

Construindo o index.js da Page Task:

1 – Vamos realizar os imports necessários para nossa page Task onde todas as tasks serão carregadas:

 

2 – Vamos criar nosso componente que irá retornar a page Task e criar a parte lógica do nosso componente, onde teremos o state task, o useEfect e a função deleteTask para deletar uma task criada:

 

3 – Vamos prepara nosso return onde iremos renderizar a lista de tasks que vamos trazer do Firebase:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Page NewTask

Constuindo o index.js da Page New Task:

1- Vamos realizar os imports necessários para nossa page New Task onde iremos criar uma nova task:

 

2 – Vamos criar nosso componente que irá retornar a page New Task e criar a parte lógica do nosso componente, onde teremos o state description e a função addTask para adicionar uma nova task:

 

3 – Vamos preparar nosso return onde iremos ter nosso textinput para adicionarmos uma nova task:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Page Details

Constuindo o index.js da Page Details:

1- Vamos realizar os imports necessários para nossa page Details onde poderemos ver uma task e editá-la:

 

2 – Vamos criar nosso componente que irá retornar a page Details e criar a parte lógica do nosso componente, onde teremos o state descriptioEdit, teremos uma const idTask e a função editTask:

 

3 – Vamos preparar nosso return, que irá permitir a visualização e a edição da nossa task:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Resolvendo Warnings

Se tiver warnings ao adicionar uma nova task, siga os seguintes passos:

  • Acesse node_modules / react-native / Libraries / Core / Timer / JSTimers.js
  • Procure a variável MAX_TIMER_DURATION_MS
  • Altere 60 * 1000 para 10000 * 1000
  • Salve as alterações e reconstrua seu aplicativo.
5 6 votes
Article Rating
julho 2, 2021
Subscribe
Notify of
guest
6 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
leonardo
leonardo
8 meses atrás

Esse import  firebase from "firebase" import 'firebase/storage'; não está funcionando. Tive que usar o <span style="color: rgb(197, 134, 192);">import</span><span style="color: rgb(212, 212, 212);"> { </span><span style="color: rgb(156, 220, 254);">initializeApp</span><span style="color: rgb(212, 212, 212);"> } </span><span style="color: rgb(197, 134, 192);">from</span><span style="color: rgb(212, 212, 212);"> </span><span style="color: rgb(206, 145, 120);">'firebase/app'</span> <span style="color: rgb(197, 134, 192);">import</span><span style="color: rgb(212, 212, 212);"> { </span><span style="color: rgb(156, 220, 254);">getFirestore</span><span style="color: rgb(212, 212, 212);">, </span><span style="color: rgb(156, 220, 254);">collection</span><span style="color: rgb(212, 212, 212);">, </span><span style="color: rgb(156, 220, 254);">getDocs</span><span style="color: rgb(212, 212, 212);"> } </span><span style="color: rgb(197, 134, 192);">from</span><span style="color: rgb(212, 212, 212);"> </span><span style="color: rgb(206, 145, 120);">'firebase/firestore/lite'</span><span style="color:… Read more »

EhNoix
EhNoix
7 meses atrás

O firebase foi atualizado para a versão nova. Sendo assim, quem instalar o Firebase pelo expo install firebase instalará a versão 9 e dessa forma o arquivo firebaseConfig não funcionará do jeito apresentado nesse tutorial. Portanto para que funcione conforme apresentado aqui, utilze a versão anterior do firebase expo install firebase@8.2.3

TmjCoders
TmjCoders
4 meses atrás
Reply to  EhNoix

Teria como voce disponibilizar o package.json desse projeto? so para as dependencias nao terem nenhum tipo de erro, e assim podemos focar somente no codigo… Faltou apenas isso no tutorial acima dele, disponibilizar o package.json

William
William
7 meses atrás

Tive esse erro, qual o problema???
Module not found: Can’t resolve ‘firebase’
1 | import firebase from “firebase”
 2 | import ‘firebase/storage’;
 3 |  
 4 | var firebaseConfig = {
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\pagefile.sys’
Error from chokidar (C:\Users): Error: UNKNOWN: unknown error, stat ‘C:\Users\All Users’

TmjCoders
TmjCoders
4 meses atrás

Por favor teria como voces disponibilizarem o package.json desse projeto? iria nos ajudar a nao termos erros com as dependencias que podem ter mudado com todo esse tempo… Agradeço desde ja! voces sao sensacionais!!!!

Pedro
13 dias atrás

Firebase desatualizado, o atual está dando erro quando se fizer nesse seu método que funciona em uma versão anterior.

Feito com s2 por OneBitCode

6
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: