Neste documento você irá encontrar o passo a passo da instalação e configuração dos recursos do Firebase que vamos utilizar em nossa aplicação. 💜

  1. Criando um projeto no Firebase Console
  2. Instalação do React Native Firebase App
  3. Configuração no Android
  4. Configuração no iOS
  5. Instalação das demais bibliotecas

1. Criando um projeto no Firebase Console

  1. Primeiro, acesse o Console do Firebase para criar um novo projeto. Você pode utilizar uma conta Google para conectar-se, ou criar uma nova conta gratuita caso não tenha.

    Firebase

  2. Após acessar o Console do Firebase, clique em "Ir para o Console" (localizado no topo da tela, do lado direito).

  3. Na próxima tela, clique no botão "Criar um projeto".

  4. Em seguida, digite um nome para o seu projeto e clique no botão continuar.

  5. Na próxima etapa, você pode deixar o Google Analytics ativado e clicar no botão continuar.

  6. Em Configurações do Google Analytics, selecione a opção "Default Account for Firebase" e clique no botão "Criar Projeto".

  7. Pronto! Agora é só esperar o projeto ser criado. 🎉

2. Instalação do React Native Firebase App

Agora, vamos instalar o módulo React Native Firebase App. Pois, ele é quem faz a conexão da nossa aplicação com o Firebase. Então, execute a instalação na raiz do projeto:

# Com npm
npm install --save @react-native-firebase/app

# Com Yarn
yarn add @react-native-firebase/app

3. Configuração no Android

  1. Primeiro, vamos no console do Firebase para adicionar um novo aplicativo Android. Então, clique no ícone do Android.

    Untitled

  2. Na tela que irá aparecer digite o nome do pacote Android que deve corresponder ao nome do pacote do seu projeto local que pode ser encontrado dentro da tag manifestno arquivo /android/app/src/main/AndroidManifest.xml.

  3. Em seguida, no apelido digite "Android" e clique no botão "Registrar app".

  4. Faça download do arquivo google-services.jsone coloque dentro do seu projeto no seguinte local: /android/app/google-services.json.

  5. Agora, clique no botão "Próxima". Em seguida, clique no botão "Próxima" novamente e por fim clique no botão "Continuar no console".

    Agora vamos configurar o código nativo que irá conecta a nossa aplicação com o Firebase.

  6. Para permitir que o Firebase use as credenciais no Android, o google-servicesdeve estar ativado no projeto.  Primeiro, adicione dentro do seu /android/build.gradlearquivo:

    buildscript {
  dependencies {
    // ... outras dependencias
    classpath 'com.google.gms:google-services:4.3.10'
    // Adicionar a linha a cima --- /\\
  }
}

  7. Agora, adicione no arquivo /android/app/build.gradleo seguinte:

    apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Adicionar essa linha.

4. Configuração no iOS

  1. Vá ao console do Firebase para adicionar um novo aplicativo iOS. Então, clique no ícone do iOS.

  2. No console do Firebase, adicione um novo aplicativo iOS e insira os detalhes do seu projeto. O "ID do pacote iOS" deve corresponder ao ID do pacote do projeto local. O ID do pacote pode ser encontrado na guia "Geral" ao abrir o projeto com o Xcode, na linha Bundle Identifier.

  3. Baixe o arquivo GoogleService-Info.plist.

  4. Usando o Xcode, abra o arquivo /ios/{projectName}.xcodeprojdo projetos (ou /ios/{projectName}.xcworkspacese estiver usando Pods) e clique com o botão direito no nome do projeto e em "Adicionar arquivos" ao projeto, conforme demonstrado abaixo:

    Untitled

    1. Selecione o GoogleService-Info.plistarquivo baixado do seu computador e certifique-se de que a caixa de seleção "Copiar itens se necessário" esteja marcada.

    Untitled

    1. Para permitir o Firebase use as credenciais no iOS, abra seu arquivo  /ios/{projectName}/AppDelegate.me adicione a seguinte linha na parte superior do arquivo:

      #import <Firebase.h>

    2. Por fim, nesse mesmo arquivo, logo após as linhas:

      - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

      E antes das linhas:

      #if defined(FB_SONARKIT_ENABLED) && __has_include(<FlipperKit/FlipperClient.h>)
  InitializeFlipper(application);
#endif

      Adicione a seguinte linha:

      [FIRApp configure];

5. Instalação das demais bibliotecas

Agora, vamos instalar as bibliotecas do Firebase que vamos utilizar em nosso projeto.

  1. Primeiro, vamos instalar o @react-native-firebase/apppara utilizar o banco de dados Firestore.

    yarn add @react-native-firebase/firestore

  2. Agora, vamos instalar o @react-native-firebase/authpara utilizar a autenticação do Firebase.

    yarn add @react-native-firebase/auth

  3. Vamos instalar também o @react-native-firebase/storagepara utilizar o storage do Firebase para fazer upload de arquivos.

    yarn add @react-native-firebase/storage