Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
react native

React Native reward referrals

Shad Mirza

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.

Steps involved

  1. Setup a Firebase project and SDK
  2. Create an invitation link
  3. Send the invitation link
  4. Retrieve the link
  5. Grant reward

1. Setup Firebase project and SDK

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.

Step 2. Create an invitation link

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 firebase
import firebase from 'react-native-firebase';
//Generate unique user ID here
const SENDER_UID = 'USER1234';
//build the link
const link = `https://www.deeplinkdemo.com?invitedBy=${SENDER_UID}`;
const dynamicLinkDomain = 'https://deeplinkblogdemo.page.link';
//call  DynamicLink constructor
const DynamicLink = new firebase.links.DynamicLink(link, dynamicLinkDomain);
//get the generatedLink
const 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

Step 3. Send the invitation link

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

Step 4. Retrieve the link

There are many use cases that can happen when the recipient opens the app with the invitation link:

  1. If the app isn’t already installed, they will be directed to Play Store or App Store to install the app.
  2. If the app is installed, they will open our app for the first time and we can retrieve the referral information included in the Dynamic 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 app
  async componentDidMount() {
    let url = await firebase.links().getInitialLink();
    console.log('incoming url', url); //incoming url https://www.deeplinkdemo.com?invitedby=USER1234
    if (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.

Step 4. Grant rewards

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.

RELATED TAGS

communitycreator
react native

CONTRIBUTOR

Shad Mirza
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring