Conectar react native con firebase

Firebase es una poderosa plataforma que ofrece una variedad de servicios como autenticación, base de datos en tiempo real, almacenamiento en la nube y mucho más. En esta guía, te mostraré cómo conectar Firebase a tu proyecto de React Native para que puedas aprovechar estos servicios y potenciar tu aplicación.

Antes de iniciar

Para poder hacer la prueba del siguiente contenido, recomiendo revisar los siguientes contenidos su aun no ha trabajado con react native.

• Entorno de trabajo para react
• Crear primer proyecto en react native
• Crear una Firestore Database en Firebase

Paso 1: Crear un Proyecto en React Native

Si aún no tienes un proyecto de React Native, puedes crear uno nuevo utilizando npx o expo (si prefieres trabajar con Expo).

Opcion 1: crear con npx

npx react-native init MyFirebaseApp

Opción 2: Crear con Expo

npx expo init MyFirebaseApp 

Nota: Si usas Expo, puedes omitir algunos pasos de configuración nativa (iOS/Android), ya que Expo lo gestiona automáticamente. Sin embargo, algunas funciones avanzadas de Firebase pueden requerir un "eject" de Expo.

Paso 2: Instalar las Dependencias de Firebase

Una vez que el proyecto esté creado, navega a la carpeta del proyecto:

cd MyFirebaseApp

Luego instala el SDK de Firebase:

npx expo install firebase

Paso 3: Configurar Firebase

Crear una Firestore Database en Firebase

• Accede a Firebase Console y crea un nuevo proyecto.
• Después de crear el proyecto, selecciona "Agregar aplicación" y elige "iOS" o "Android" según el tipo de app que estés desarrollando (puedes agregar ambos si lo necesitas).
• Sigue las instrucciones para descargar el archivo google-services.json (Android) o GoogleService-Info.plist (iOS).

Paso 4: Agregar Configuraciones Nativas

Para Android:

• Coloca el archivo google-services.json dentro de android/app.

• Abre el archivo android/build.gradle y añade la línea de código bajo dependencies:

  classpath 'com.google.gms:google-services:4.3.14' // o la última versión disponible 

• Luego, en el archivo android/app/build.gradle, añade la siguiente línea al final del archivo:

  apply plugin: 'com.google.gms.google-services'

Para iOS:

• Coloca el archivo GoogleService-Info.plist dentro de la carpeta ios/MyFirebaseApp/.
• Abre el archivo ios/MyFirebaseApp/AppDelegate.m o el archivo .swift si usas Swift y agrega la siguiente línea al inicio del método didFinishLaunchingWithOptions:

  [FIRApp configure]; 

• Abre una terminal y corre cd ios && pod install para instalar las dependencias de Firebase en iOS.

Paso 5: Configurar Firebase en el Código

Crea un archivo de configuración para Firebase, por ejemplo, firebaseConfig.js dentro de tu proyecto.

// firebaseConfig.js
import firebase from 'firebase/app';
import 'firebase/auth'; // Importa solo los servicios que planeas usar

const firebaseConfig = {
  apiKey: 'TU_API_KEY',
  authDomain: 'TU_AUTH_DOMAIN',
  projectId: 'TU_PROJECT_ID',
  storageBucket: 'TU_STORAGE_BUCKET',
  messagingSenderId: 'TU_MESSAGING_SENDER_ID',
  appId: 'TU_APP_ID',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default firebase;

Asegúrate de reemplazar los valores de configuración (apiKey, authDomain, etc.) con los proporcionados en Firebase Console.

Paso 6: Ejemplo de Uso: Autenticación con Firebase

Un ejemplo simple de autenticación con Firebase Auth:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import firebase from './firebaseConfig';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const login = () => {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        setMessage('Inicio de sesión exitoso');
      })
      .catch((error) => {
        setMessage('Error de autenticación: ' + error.message);
      });
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={login} />
      <Text>{message}</Text>
    </View>
  );
};

export default LoginScreen;

Paso 7: Ejecutar la Aplicación

Para probar tu aplicación:

En Android:

npx react-native run-android

En iOS (solo en macOS):

npx react-native run-ios 

O usando Expo:

expo start