CODEWITHSUNDEEP
firebasereact-nativepush-notificationnotificationsdeep-linking
Harkayn
Harkayn

Reputation: 377

Redirect to a specific screen from React Native Firebase Push Notifications based on a Deeplink

I got a problem,

1 ) I'm using Firebase to send remote Push Notifications, i test by sending from FCM tester.

2 ) I've activated Deep-Linking in my project and started to use it.

3 ) In FCM tester i pass this key value into "notifications.data" :

{ "link" : "MY_LINK" }

Now i want my app to be able to recognize there is a deepLink in it & read it. Which i achieved to do somehow but not the way i was looking for.

What i did :

NotificationContextProvider.ts

useEffect(() => {
    const unsubscribeClosedApp = messaging().onNotificationOpenedApp(
      remoteMessage => {
        addNotification(remoteMessage);
        console.log(
          'Notification caused app to open from background state:',
          remoteMessage.notification,
        );
        redirectFromKey(remoteMessage.data?.redirection);
        console.log(remoteMessage.data, 'remote message data');
        console.log(remoteMessage, 'remote message full');
        console.log(remoteMessage.notification?.body, 'remote message body');
        console.log(remoteMessage.notification?.title, 'remote message title');
        if (remoteMessage.data?.link === 'https://[MY-LINK]/TnRV') {
          console.log(remoteMessage.data?.link, 'Deeplink detected & opened');
          navigation.navigate({
            name: 'Logged',
            params: {
              screen: 'Onboarded',
              params: {
                screen: 'LastAnalyse',
              },
            },
          });
        }
      },
    );

And it's working fine but it's not based on reading a link, but by comparing a value and it's not what i'm trying to achieve.

Firebase Doc' give us a way to do this : https://rnfirebase.io/dynamic-links/usage#listening-for-dynamic-links

This is what Firebase suggests :

import dynamicLinks from '@react-native-firebase/dynamic-links';

function App() {
  const handleDynamicLink = link => {
    // Handle dynamic link inside your own application
    if (link.url === 'https://invertase.io/offer') {
      // ...navigate to your offers screen
    }
  };

  useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    // When the component is unmounted, remove the listener
    return () => unsubscribe();
  }, []);

  return null;
}

And i have no clue how to make it works. I got to mention that deep-links are correctly setup in my project and working fine, my code is in Typescript.

Basicaly you can find on this web page what i'm trying to achieve but i want to use Firebase/messaging + Dynamic links. My project don't use local notifications and will never do : https://medium.com/tribalscale/working-with-react-navigation-v5-firebase-cloud-messaging-and-firebase-dynamic-links-7d5c817d50aa

Any idea ?

Upvotes: 4

Views: 5653

Answers (1)

chichilatte
chichilatte

Reputation: 1808

I looked into this earlier, it seems that...

  • You can't send a deep link in an FCM message using the firebase Compose Notification UI.
  • You probably can send a deep link in an FCM message using the FCM REST API. More in this stackoverflow post.

The REST API looks so cumbersome to implement you're probably better off the way you're doing it: Using the firebase message composer with a little data payload, and your app parses the message data with Invertase messaging methods firebase.messaging().getInitialNotification() and firebase.messaging().onNotificationOpenedApp().

As for deep linking, which your users might create in-app when trying to share something, or you might create in the firebase Dynamic Links UI: For your app to notice actual deep links being tapped on the device, you can use Invertase dynamic links methods firebase.dynamicLinks().getInitialLink() and firebase.dynamicLinks().onLink().

Upvotes: 1

Related Questions