I am working on a React Native app that uses Firebase Realtime Database and FCM notifications. I set up a listener to listen for changes in the Firebase database and trigger local notifications using react-native-push-notification.

However, the problem is that after Metro logs:

BUNDLE  ./index.js 

• In App notifications stopped working.
• The only way to restore them is to restart the app manually.

What I Have Tried:

• Reattaching Listeners in useEffect

Tried setting up Firebase listeners inside useEffect when the component mounts.

• Using AppState to Restart Listeners

tried detecting app state changes (active, background) and restarting the listener.

• Ensuring Listeners Are Not Removed

Checked that .off() is only called before reattaching listeners to avoid duplication.

• Disabling Metro Fast Refresh

Tried adding liveReload: false in Metro settings to prevent unnecessary reloads.

My Current Notification Listener Code:

import { AppState } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import database from '@react-native-firebase/database';
import PushNotification from 'react-native-push-notification';

const listenForNotifications = async () => {
  console.log('Listening for notifications...');
  try {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (!enabled) {
      console.log('User denied notification permissions');
      return;
    }

    const token = await messaging().getToken();
    if (!token) {
      console.log('FCM token not available');
      return;
    }

    const notificationRef = database().ref('notifications').child(token);

    // Remove existing listeners to avoid duplication
    notificationRef.off();

    notificationRef.on(
      'value',
      snapshot => {
        if (snapshot.exists()) {
          const notificationData = snapshot.val();

          PushNotification.localNotification({
            channelId: 'default',
            title: notificationData?.notification?.title || 'New Notification',
            message: notificationData?.notification?.body || 'You have a new message',
            playSound: true,
            soundName: 'default',
            importance: 'high',
          });
        }
      },
      error => {
        console.error('Error listening to notifications:', error);
      }
    );

    return () => {
      notificationRef.off();
    };
  } catch (error) {
    console.error('Error setting up notification listener:', error);
  }
};

// Restart listener when the app state changes
import { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (nextAppState === 'active') {
        console.log('App became active, restarting listener...');
        listenForNotifications();
      }
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    // Run listener on first mount
    listenForNotifications();

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    // Your App UI
  );
};

export default App;

What I Need Help With:

• Why do my Firebase listeners stop working after BUNDLE ./index.js is logged?
• How can I prevent Firebase listeners from being lost when Metro refreshes the app?
• Is there a way to automatically restore all listeners when this happens?

this ** BUNDLE ./index.js ** log is my main problem..., don't know why it appears randomly in some of the notifications, it's completely random, sometimes Notifications keep working, and sometimes this logs appear when a new notification arrives the first time and then it stopped there