Añadiendo Notificaciones y Firebase a Nuestra App de Tareas

Tiempo de lectura: 2 minutos

En esta parte, mejoraremos aún más nuestra app de tareas de React Native con:
✅ Notificaciones push con Expo Notifications.
✅ Sincronización en la nube con Firebase Firestore.

Requisitos previos

• Haber completado la segunda parte del tutorial: https://devcodelight.com/wp-admin/post.php?post=9225
• Tener una cuenta de Firebase y un proyecto creado.

---

1. Configurar Notificaciones Push

Las notificaciones push permiten recordar tareas importantes. Para ello, usaremos Expo Notifications.

1.1 Instalar dependencias

Ejecutamos:

npx expo install expo-notifications

Además, si usamos un dispositivo físico en Android, instalamos Firebase Cloud Messaging (FCM):

npx expo install expo-modules-core expo-device expo-constants

1.2 Configurar notificaciones

En src/utils/notifications.js, creamos la lógica para manejar notificaciones:

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';
import Constants from 'expo-constants';

export async function registerForPushNotificationsAsync() {
  let token;
  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('¡Permiso para recibir notificaciones denegado!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
  } else {
    alert('Las notificaciones solo funcionan en dispositivos físicos.');
  }
  return token;
}

1.3 Implementar notificaciones en App.js

import { useEffect } from 'react';
import { registerForPushNotificationsAsync } from './src/utils/notifications';

export default function App() {
  useEffect(() => {
    registerForPushNotificationsAsync().then(token => {
      console.log('Token de notificación:', token);
    });
  }, []);

  return <HomeScreen />;
}

1.4 Probar Notificaciones

Para probarlas, agregamos este código en HomeScreen.js:

import * as Notifications from 'expo-notifications';

const scheduleNotification = async () => {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '📌 Recordatorio',
      body: 'No olvides revisar tus tareas!',
    },
    trigger: { seconds: 5 }, // Se enviará en 5 segundos
  });
};

Y agregamos un botón:

<Button title="Probar Notificación" onPress={scheduleNotification} />

---

2. Configurar Firebase Firestore

Firestore nos permitirá sincronizar las tareas en la nube para acceder a ellas desde varios dispositivos.

2.1 Instalar Firebase

npm install firebase

2.2 Configurar Firebase

Creamos src/utils/firebaseConfig.js:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs, deleteDoc, doc } from 'firebase/firestore';

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',
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db, collection, addDoc, getDocs, deleteDoc, doc };

2.3 Modificar database.js para usar Firebase

import { db, collection, addDoc, getDocs, deleteDoc, doc } from './firebaseConfig';

const tasksCollection = collection(db, 'tasks');

export const getTasksFromFirebase = async (callback) => {
  const snapshot = await getDocs(tasksCollection);
  const tasks = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  callback(tasks);
};

export const addTaskToFirebase = async (task, callback) => {
  await addDoc(tasksCollection, { text: task });
  getTasksFromFirebase(callback);
};

export const deleteTaskFromFirebase = async (id, callback) => {
  await deleteDoc(doc(tasksCollection, id));
  getTasksFromFirebase(callback);
};

2.4 Modificar HomeScreen.js

import { getTasksFromFirebase, addTaskToFirebase, deleteTaskFromFirebase } from '../utils/database';

useEffect(() => {
  getTasksFromFirebase(setTasks);
}, []);

const handleAddTask = () => {
  if (task.trim()) {
    addTaskToFirebase(task, setTasks);
    setTask('');
  }
};

const handleDeleteTask = (id) => {
  deleteTaskFromFirebase(id, setTasks);
};

---

3. Probar la App

Ejecutamos:

npx expo start

✔️ Ahora las tareas se sincronizan con Firebase y podemos recibir notificaciones push.