Question 34965 in React native Question posted in
The official React Native documentation can be found here.

How to open app to specific page after click notification from bar by using react-native-firebase/messaging(FCM)? – React native

Is there any way can open app to specific page after click notification by using react-native-firebase/messaging(FCM)?

I didn’t find information from document.

@react-native-firebase version:

    "@react-native-firebase/app": "^15.3.0",
    "@react-native-firebase/messaging": "^15.3.0",

code just only:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import {Alert, StyleSheet, Text, View} from 'react-native';

import messaging from '@react-native-firebase/messaging';
import styles from '../css/styles';

let fcmUnsubscribe = null;

function Notify(props) {
  useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.highlight}>{props.test}</Text>
    </View>
  );
}

export default Notify;
Tags:

3

Answers


  1. 0

    I use one non standard approach, regarding how to boost fcm functions in my apps. You have remoteMessage over which you send payload for notification… Well in this payload I put everything I need for app, and separate this with | for example. So my remoteMessage string is like this:

    Some text notification for display to user|page-to-open|part-of-page-where-to-position|other-custom-data-needed

    Then before displaying this in notification alert box, I first parse it to array or few variables, and then only part of this string related to notification text send to display, and other variables use for opening specific pages or some other things.

    Something like this (this is JS as it was first at hand to copy you, but similar applies for RN)

    messaging.onBackgroundMessage(function(payload) {
    var notificationTitle = payload.data.title;
    var notificationBody = payload.data.body.substring(0, payload.data.body.indexOf("|"));
    var notificationURL = payload.data.body.split("|")[1];
    var notificationStatusURL = payload.data.body.split("|")[2];
    Login or Signup to reply.
  2. 0

    You can do like below

    useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
if (remoteMessage?.data?.screen_name) {
        navigation.navigate(remoteMessage?.data?.screen_name)
    };
    });

    return unsubscribe;
  }, []);

    Note please check that your function includes in navigation container
    Otherwise you can use useNavigation hooks

    and check screen_name param with your param name which you are sending from firebase

    Login or Signup to reply.
  3. 0

    You can use this code snippet. So the basic when the navigation container will be ready, you can change or replace navigation.

    Navigation file – you can use such functions even on not React Native components

    import {StackActions} from '@react-navigation/native';
import {createNavigationContainerRef} from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();
  function changeNavigation(name, params) {
      if (navigationRef.isReady()) {
        navigationRef.navigate(name, params);
      }
    }

    Notifications listener file

     const onNotificationReceived = data => {
  if (!data) return;
  const {screen = null, ...rest} = data;
  if (screen) {
    changeNavigation(screen, {...rest});
  }
};


messaging().onNotificationOpenedApp(remoteMessage => {
    console.log('Notification caused app to open from background state:');
    onNotificationReceived(remoteMessage.data);
  });

    Navigation provider

      <NavigationContainer ref={navigationRef} onReady={onContainerReady}>
      <AppNavigation />
    </NavigationContainer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search