Instalar y configurar react-native-firebase para iOS

Este es el segundo capítulo de la serie sobre React Native Firebase y en esta ocasión describiré el paso a paso de cómo instalar y configurar RNF en un proyecto React Native para iOS.

Entorno de Desarrollo

Para desarrollar esta guía utilizamos las siguientes herramientas:

• MacOS Mojave 10.14.4
• Node v10.15.3
• Npm 6.4.1
• Watchman 4.9.0
• Xcode 10.2.1

Creando la aplicación base

Para crear la aplicación React Native base utilizaremos react-native-cli. En un terminal ejecutaremos lo siguiente:

react-native init RNFirebaseApp

Con este comando se creará la aplicación base y automáticamente se instalarán las dependencias necesarias para construir y ejecutar la aplicación.

Ejecutando la aplicación base

Para ejecutar la aplicación para iOS, es necesario tener instalado Xcode en nuestro equipo; si ya lo tenemos instalado ejecutamos la aplicación de la siguiente manera:

$ cd RNFirebaseApp
$ react-native run-ios

Y la aplicación se verá de la siguiente manera en el emulador iOS:

Integrando Firebase a nuestra app

Para integrar Firebase a nuestra aplicación es necesario crear un proyecto Firebase. Esto se lo hace desde la página inicial de la consola de Firebase. En la guía de instalación y configuración de RNF para Android se describe a detalle como crear un proyecto Firebase.

Para nuestro ejemplo utilizaremos la integración manual de RNF, recomendada para desarrolladores React Native con experiencia y proyectos existentes.

La versión de RNF que utilizaremos es la versión estable más reciente al momento de escribir esta guía es 5.3.1

Dentro del directorio de nuestro proyecto React Native agregamos RNF como dependencia npm:

npm install --save react-native-firebase

Posteriormente debemos enlazar la librería de RNF (ya que contiene código nativo) a nuestro proyecto:

react-native link react-native-firebase

El siguiente paso es agregar el archivo GoogleService-Info.plist en el proyecto iOS. Este archivo contiene toda la información necesaria por el SDK de iOS para conectarse al proyecto Firebase.

Para generar y descargar el archivo GoogleService-Info.plist necesitaremos registrar la app en Firebase, para esto vamos al panel de control del proyecto que habíamos creado anteriormente; en la parte superior izquierda encontraremos la sección Project Overview:

Dentro de esa sección seleccionaremos Add app y posteriormente el ícono de iOS para iniciar la configuración:

En el asistente debemos colocar el iOS Bundle ID que podemos obtener desde Xcode en la sección General del target primario (RNFirebaseApp en este ejemplo). Se debe abrir el directorio ios en Xcode:

Al seleccionar el target RNFirebaseApp del Project Navigator (menú lateral izquierdo) tendremos disponible el valor Bundle Identifier que usaremos para configurar la app iOS en Firebase.

Adicionalmente podemos agregar agregar un nick y el App Store ID en caso de que la aplicación ya se encuentre en la tienda de Apple.

Para finalizar esta sección damos click en Register app. Con esto ya se habrá generado el archivo GoogleService-Info.plist y estará disponible para su descarga.

Descargamos el archivo y lo agregamos al target principal que tenemos para iOS (RNFirebaseApp) mediante Xcode en:

File -> Add file to [nombre de la app proyecto]

Aparecerá el cuadro de diálogo para seleccionar el(los) target(s) al cual agregar el archivo. Para este ejemplo seleccionaremos únicamente el target principal (RNFirebaseApp):

La ubicación para este ejemplo sería ios/RNFirebaseApp/GoogleService-Info.plist:

Ahora vamos a inicializar el SDK nativo en la app de iOS, para eso agregaremos en el archivo AppDelegate.m (ios/[appName]/AppDelegate.m) lo siguientes fragmentos de código:

• En la sección de imports agregamos:

#import <Firebase.h>

• En el inicio del método didFinishLaunchingWithOptions:(NSDictionary *)launchOptions (antes de la linea en la que se define RCTRootView) agregamos:

[FIRApp configure];

Luego de esto instalamos la librería de Firebase mediante CocoaPods que es un gestor de dependencias utilizado en proyectos para iOS, si no lo tienes instalado en tu ambiente puedes instalarlo como se indica en el sitio oficial.

Dentro del directorio ios creamos el podfile ejecutando lo siguiente en el terminal:

pod init

React Native Firebase recomienda utilizar una versión de plataforma iOS igual a 9.0 o posterior. Para eso debemos descomentar (o si no se encuentra comentada la linea, agregarla) la siguiente linea al inicio del Podfile:

platform :ios, '9.0'

Agregamos la dependencia de Firebase en el Podfile, dentro del target principal (Para este ejemplo, RNFirebaseApp):

# Required by RNFirebase
pod 'Firebase/Core', '~> 5.20.1'

El Podfile lucirá similar a esto:

target 'RNFirebaseApp' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  # Pods for RNFirebaseApp
  # Required by RNFirebase
  pod 'Firebase/Core', '~> 5.20.1'
...

Y por último instalamos las dependencias mediante en comando:

pod install

Una vez hecho esto volvemos al asistente de configuración iOS y vamos al paso 5 en el que se verificará la conexión de nuestra app con Firebase.

Y con esto habremos finalizado la configuración de Firebase en nuestra aplicación React Native para iOS.

Si necesitas una referencia el código fuente del proyecto desarrollado se encuentra aquí:

AlturaSoluciones/rnfirebase-demo-ios

Este artículo forma parte de una serie en la que cubrimos los siguientes temas:

• Instalar y configurar react-native-firebase para Android
• Instalar y configurar react-native-firebase para iOS (este artículo)
• Configurar Cloud Firestore con react-native-firebase
• Almacenar datos de geolocalización en Firestore con react-native-firebase

Si el artículo te gustó, por favor aplaude tantas veces como desees. Para ver historias similares acerca de tecnología, mira nuestras publicaciones. No dudes en dejarnos en la caja de comentarios cualquier inquietud o sugerencia que tengas.

Si necesitas un gran equipo que te asesore en plasmar tus ideas en React JS o React Native, no dudes en contactarnos. Puedes ir a nuestro sitio web y llenar el formulario y nos contactaremos contigo a la brevedad posible.

¡Que tengas un excelente día!

Miguel Torres Vivanco
Email: miguel@alturasoluciones.com
Twitter: @perrotedonperro
LinkedIn: www.linkedin.com/in/miguetv17