• setBackgroundMessageHandler is triggered on background state.
• onMessage is triggered on foreground state.
• onNotificationOpenedApp is never triggered.
• getInitialNotification is always returning null.

please help me find the solution for the above. I have tried many different solutions available but none of them worked.

I am using expo prebuild and expo sdk50 with expo router.

I have following modules installed:
“@react-native-firebase/app”: “^19.2.2”,
“@react-native-firebase/messaging”: “^19.2.2”,
“expo”: “^50.0.15”,
“react-native”: “0.73.6”,

Below is my _layout.tsx file which is the entry point for my app.

// imports here

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
};


// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

//Message Handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background!', remoteMessage);
}); 

export default function RootLayout() {
  const [loaded, error] = useFonts({
    outfitLight: require('../assets/fonts/Outfit-Light.ttf'),
    outfit: require('../assets/fonts/Outfit-Regular.ttf'),
    outfitMedium: require('../assets/fonts/Outfit-Medium.ttf'),
    outfitBold: require('../assets/fonts/Outfit-Bold.ttf'),
    outfitSemiBold: require('../assets/fonts/Outfit-SemiBold.ttf'),
    ...FontAwesome.font,
  });
  
  const router = useRouter();

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  
  NativeWindStyleSheet.setOutput({
    default: "native",
  });

  return (
      <ApolloProvider client={client}>
            <RootLayoutNav />
      </ApolloProvider>
    
    );
}

I have this in my index.tsx file which is the first page of my app

useEffect(() => {
    (async () => await messaging().registerDeviceForRemoteMessages())();

    const unsubscribe = messaging().onMessage(async remoteMessage => {
      console.log("FCM Foregorund message Handled");
      Alert.alert("FCM Foregorund message Handled");
    });

    messaging().onNotificationOpenedApp(async (remoteMessage) => {
      // The below code gets never executed
      Alert.alert('here');
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage,
      );
    });

    messaging()
      .getInitialNotification()
      .then(async (remoteMessage) => {
        console.log("s: : : : : :",remoteMessage); // always prints null
        if (remoteMessage) {
          // Never reached
          Alert.alert('here');
          console.log(
            'Notification caused app to open from quit state:',
            remoteMessage,
          );
        }
      });

    return unsubscribe;
  }, []);