Implementing a basic non-content-based app referral system using Branch on React Native

Viewed 642

I've been looking at the Branch SDK docs for a while now and, while they do seem to cover every base, a lot of it seems vague to me.

My app is not (currently) content-oriented. In other words, it is more of a utility app than a UGC app (again, at least for now. In the future I plan to introduce more content but that's not really relevant right now).


I currently use Fabric for analytics (as well as Firebase) and I am trying to setup a basic sharing/referral system to:

  • A: Increase user-driven sharing+growth
  • B: Track said virality in Branch (and consequently Fabric)

This is the widget present in the Fabric "Growth" module


This is what I currently am testing for the sharing action. All of the Branch docs use examples of sharing specific content- but I don't want that! I'm trying to figure out how to configure/change the setup to share the app itself, and not some content within the app. I've copied this from the React Native docs as a start, made a couple tweaks where it made sense, but now I feel lost.

inviteFriend = async () => {
    // only canonicalIdentifier is required
    let branchUniversalObject = await Branch.createBranchUniversalObject('ShareFromApp', {
        automaticallyListOnSpotlight: true,
        title: 'What do I put here...?',
        contentDescription: 'This isn\'t content, I just want to share the app'
    });

    let shareOptions = { messageHeader: 'Check out Foobar', messageBody: 'Check out Foobar so we can connect!' }
    let linkProperties = { feature: 'share', channel: 'App' }
    let controlParams = {}
    let {channel, completed, error} = await branchUniversalObject.showShareSheet(shareOptions, linkProperties, controlParams);
}

How do I finish setting this up for sharing the app?

I've already setup everything on the dashboard (URI Schemes, Branch Keys, Universal Links, App Links, etc...), and I also have initialized Branch in my app as suggested by the docs in App.js componentDidMount():

this._unsubscribeFromBranch = Branch.subscribe(({ error, params }) => {
    if (error) {
        console.error('Error from Branch: ' + error);
        return;
    }

    // params will never be null if error is null
    console.log('Branch params: ' + JSON.stringify(params));

    if (params['+non_branch_link']) {
        const nonBranchUrl = params['+non_branch_link'];
        console.log('non-Branch link URL: ' + nonBranchUrl);
        // Route non-Branch URL if appropriate.
        return;
    }

    if (!params['+clicked_branch_link'])
        return;

    // Get title and url for route
    let title = params.$og_title;
    let url = params.$canonical_url;
    let image = params.$og_image_url;

    // Now push the view for this URL
    this.navigator.push({ title: title, url: url, image: image });
});

(P.S. should I move this to after the authentication flow? I've already put the Branch.setIdentity(...) behind the auth flow)


These are some of the relevant npm packages I'm using

"react-native": "0.50.3"
"react": "16.0.0"
"react-native-branch": "2.1.1"
"react-native-fbsdk": "0.6.3"
"react-native-fabric": "0.5.1"

Feel free to ask for more info if I've missed anything important. Thanks! :)

0 Answers
Related