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

Add deep link when creating Firebase message – React native

I’m using the firebase Message class to create push notifications for a react native app. I want the notification to take users to a specific screen of the app. Right now tapping on the push notification just takes users to the last screen they were on before they back-grounded the app. I’m testing this on my iOS device. How can I embed a specific deep link in the message? Would I use setApnsConfig(ApnsConfig apnsConfig) or setFcmOptions(FcmOptions fcmOptions)?

Tags:

2

Answers


  1. 0

    I would use the APNS config since this is for an iOS app:

    https://firebase.google.com/docs/reference/admin/java/reference/com/google/firebase/messaging/ApnsConfig.Builder

    You could approach it different ways, but you could either include a URL in the header field, and use it for custom deep link logic, or you can have custom data in the putCustomData(String key, Object value) and then have your app process that info to deep link into the correct part of your app.

    Your app would process this notification in the application(_:didReceiveRemoteNotification:fetchCompletionHandler:)

    https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application

    Login or Signup to reply.
  2. 0

    I had integrated this feature in an app I made in react native aswell. Look at my solution below.

    As you can see in the app I am waiting for a notification to come on and I check if it has a type available. My notifications are always routed to another page. In my case its the same page but I set a route as datatype in my payload.

    After that you can use that route payload with your naviogator library in my case react-navigation to navigate to the correct screen.

    You should chose which trigger works best for you ether onNotificationOpenedApp or getInitialNotification.

    useEffect(() => {
  // Assume a message-notification contains a "type" property in the data payload of the screen to open
  messaging().onNotificationOpenedApp((remoteMessage) => {
    console.log(
      "Notification caused app to open from background state:",
      remoteMessage
    );
    //navigation.navigate(remoteMessage.data.type);
  });

  // Check whether an initial notification is available
  messaging()
    .getInitialNotification()
    .then((remoteMessage) => {
      if (remoteMessage) {
        console.log(
          "Notification caused app to open from quit state:",
          remoteMessage
        );
        const route = remoteMessage?.data?.route;

        navigation.navigate(route, {
          data: remoteMessage.data,
        });
      }
    })
    .catch((error) => console.log("Caught ", error));
}, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search