This is the fourth article of the series React Native Deep Linking Simplified. In the first three blogs (1, 2, and 3) , we learned how to add a deep link into our app and how to handle it gracefully. In this article, we will set up a referral system and get the most out of this amazing feature.
Offering in-app rewards for successful referrals to both the referrer and the recipient is an effective way to encourage users to use your app.
There a five simple steps that we will be going through. Let’s get started.
We have already covered this section in part 1, part 2, and part 3 of this series. Please go through them first and then continue from step 2.
We already learned how to create Dynamic Link from the Firebase Console. This time, we will be generating the invitation link at the sender’s end and attaching a payload
along with it. This payload
will specify the sender’s user account ID at the receiving end. It will look something like this:
https://www.deeplinkdemo.com?invitedby=SENDER_UID
I will be using a random SENDER_UID
just for this article. You can call getUid()
on Firebase user or generate the ID as you like.
//import firebaseimport firebase from 'react-native-firebase';//Generate unique user ID hereconst SENDER_UID = 'USER1234';//build the linkconst link = `https://www.deeplinkdemo.com?invitedBy=${SENDER_UID}`;const dynamicLinkDomain = 'https://deeplinkblogdemo.page.link';//call DynamicLink constructorconst DynamicLink = new firebase.links.DynamicLink(link, dynamicLinkDomain);//get the generatedLinkconst generatedLink = await firebase.links().createDynamicLink(DynamicLink);console.log('created link', generatedLink);// console.log: https://deeplinkblogdemo.page.link?link=https%3A%2F%2Fwww.deeplinkdemo.com%3FinvitedBy%3DUSER1234
Now that we have created the link, we can include it in an invitation. This invitation can be an email, SMS message, or any other medium (depending on what is most appropriate for your app and the audience).
Here’s an example:
const INVITATION = 'Shad has invited you to try this app. Use this referral link: ' + link;//send this String as you link
There are many use cases that can happen when the recipient opens the app with the invitation link:
Remember when we added SENDER_UID
(the payload) in our invitation link? We are going to retrieve that info to specify the user and grant a reward. We want to check whether the app has been launched from a Dynamic Link or not.
//add the code to the root file of your appasync componentDidMount() {let url = await firebase.links().getInitialLink();console.log('incoming url', url); //incoming url https://www.deeplinkdemo.com?invitedby=USER1234if (url) {const ID = this.getParameterFromUrl(url, "invitedBy");console.log('ID', ID); //ID USER1234}}getParameterFromUrl(url, parm) {var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");var match = url.match(re);return (match ? match[1] : "");}
getInitialLink()
returns the Dynamic Link that the app has been launched from. If the app was not launched from a Dynamic Link, the value will be null.
Now that we have retrieved the payload data from the Dynamic Link, we can specify the user who shared the link and grant the referral rewards to the referrer and the recipient whenever the required criteria have been met. And with this, our Reward Referral System has been completed. Cheers!!
Visit this link to check the working demo repo.
I hope you had fun learning about Dynamic Links, handling them, and the Reward Referral System in this four-part blog post series. Find it helpful? Please do share.
Free Resources