Deep linking is a feature in mobile apps that lets users navigate directly to specific content within the app through external links. It makes navigation easier and boosts user engagement by quickly taking users to the right place in the app.
In this blog, we’ll learn how to set up deep linking in the React Native Branch using Branch.io, a popular tool for managing and tracking deep links.
Branch.io is a deep linking platform that offers a comprehensive suite of tools to create, manage, and track deep links. It supports both deferred deep linking (when the app is not installed) and contextual deep linking (when the app is installed).
➡️ Go to the Branch.io website:
Open the Branch.io Dashboard login in your browser.
➡️ Sign Up for an account:
Click on the “Sign Up” button and fill in your details like name, email, password, and other information.
➡️ Verify your email:
Look for a verification email from the Branch in your inbox. Click the link within the email to verify and activate your account.
Run the following command to add React Native Branch to your app:
yarn add react-native-branch
cd ios && pod install && cd ..Navigate to the App section in the left-hand drawer. Here, you will see the default app name displayed. You can edit the app name or add a new app by clicking the appropriate option. A reference screenshot is attached for guidance.
To configure the React Native Branch with your app, navigate to the “Configure” section in the Branch Dashboard. You’ll need details such as:
Please ensure you have these details ready for a smooth setup process.
In the left menu, under the Configure section, you will find an option called Configuration. Clicking on this option will take you to a page where you can locate the Default URL field. You need to submit your fallback URL here. This URL acts as the fallback for mobile devices that do not have a specified redirect and will open whenever required. A reference screenshot is attached for guidance.
On the same page, ensure that the “I have an iOS App” & “Enable Universal Links” options are selected. You will be required to provide the following details:
On the same page, ensure that the “I have an Android App” and “Enable App Links” options are selected.
You will be required to provide the following details:
14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5
You will also need to specify which link domains your project can expect Branch to use. On the same page, you will find the “Link Domain” section, where you can see the “Default Link Domain” and “Alternate Link Domain” by default. If you have your domain, you can also use that.
Go to Xcode and open your project. Then, navigate to the “Signing & Capabilities” tab. You need to add a capability called “Associated Domains”. In this section, add the default and alternate domain links with the applinks: prefix, as shown below. A reference screenshot is also attached for further guidance.
applinks:u604z.test-app.link
applinks:u604z-alternate.test-app.link
applinks:u604z.app.link
applinks:u604z-alternate.app.link
The branch requires specific key/value pairs to be added to your project’s Info.plist file in two locations:
Required Keys:
You can get the Branch Key from the Branch Dashboard. For that, go to the left menu under the Configure section, and you will find an option called Account Settings. Clicking on this option will take you to a page where you can locate the Branch Key field. A reference screenshot is also attached for further guidance.
In the AppDelegate.mm file you need to add the following code.
#import <RNBranch/RNBranch.h>
//other imports..
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//other code...
[RNBranch useTestInstance]; // You need to remove this for production env.
[RNBranch initSessionWithLaunchOptions:launchOptions isReferrable:YES];
//other code...
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}To install the Branch.io in Android you need to add dependency in the app level build.gradle file like given below:
dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android")
// Required for all Android apps:
implementation 'io.branch.sdk.android:library:5.12.1' // Check for latest version before hard-coding
implementation 'store.galaxy.samsung.installreferrer:samsung_galaxystore_install_referrer:4.0.0'
implementation "com.android.installreferrer:installreferrer:2.2"
// Required if your app is in the Google Play Store (tip: avoid using bundled play services libs):
implementation 'com.google.android.gms:play-services-ads-identifier:18.1.0'
}To set up your app with the Branch Android SDK, update your AndroidManifest.xml file with the required details.
Make sure to collect the following information:
You can find the Branch Keys in the Dashboard, as described in the previous steps. Use the sample code for your AndroidManifest.xml below to set up the configuration, and replace all values with your own:
<manifest xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!-- Branch URI Scheme -->
<intent-filter>
<!-- If utilizing $deeplink_path please explicitly declare your hosts, or utilize a wildcard(*) -->
<data android:scheme="myapp://" android:host="open" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
</intent-filter>
<!-- Branch App Links - Live App -->
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="u604z.app.link" />
<data android:scheme="https" android:host="u604z-alternate.app.link" />
</intent-filter>
<!-- Branch App Links - Test App -->
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="u604z.test-app.link" />
<!-- example-alternate domain is required for App Links when the Journeys/Web SDK and Deepviews are used inside your website. -->
<data android:scheme="https" android:host="u604z-alternate.test-app.link" />
</intent-filter>
</activity>
<!-- Branch init -->
<!-- REPLACE `BranchKey` with the value from your Branch Dashboard -->
<meta-data android:name="io.branch.sdk.BranchKey" android:value="key_live_gqcJRt4sUukrgBUMb4cwBbncsujzZcX7" />
<!-- REPLACE `BranchKey.test` with the value from your Branch Dashboard -->
<meta-data android:name="io.branch.sdk.BranchKey.test" android:value="key_test_byeQIw1rHAfviBMTo6lByafnsDnt0wak" />
<!-- Set to `true` to use `BranchKey.test` -->
<!-- <meta-data android:name="io.branch.sdk.TestMode" android:value="false" />-->
</application>
<queries>
<intent>
<action android:name="android.intent.action.SEND" />
<data android:mimeType="text/plain" />
</intent>
</queries>
</manifest>To initialize the Branch.io in android you need to add code snippet to MainActivity.kt file like give below:
import io.branch.rnbranch.*
override fun onCreate(savedInstanceState: Bundle?) {
/* RNBootSplash.init(this, R.style.BootTheme) */
/* SplashScreen.show(this) */
super.onCreate(savedInstanceState)
RNBranchModule.initSession(getIntent().getData(), this)
}
override fun onNewIntent(intent: Intent?) {
super.onNewIntent(intent)
setIntent(intent)
RNBranchModule.reInitSession(this)
}To generate the deep link URL, you need to follow two steps:
1. Create the Branch Universal Object:
Here, you need to pass the arguments: identifier, which is the unique name for the Branch Universal Object, and options, where you can pass additional parameters.
import branch from 'react-native-branch'
let buo = await branch.createBranchUniversalObject('content/12345', {
title: 'My Content Title',
contentDescription: 'My Content Description',
contentMetadata: {
customMetadata: {
key1: 'value1'
}
}
})2. Generate the Short URL, Which is the Sharable Deep Link:
Here, you need to pass linkProperties, which are associated with the URL, and controlParams, which contain parameters for platform fallback URLs. This will return a promise that resolves to a short URL with your specified link properties and parameters.
import branch from 'react-native-branch'
let buo = await branch.createBranchUniversalObject('content/12345', {
title: 'My Content Title',
contentDescription: 'My Content Description',
contentMetadata: {
customMetadata: {
key1: 'value1'
}
}
})
let linkProperties = {
feature: 'sharing',
channel: 'facebook',
campaign: 'content 123 launch'
}
let controlParams = {
$desktop_url: 'https://example.com/home',
custom: 'data'
}
let {url} = await buo.generateShortUrl(linkProperties, controlParams)To retrieve data from a Branch-generated deep link URL, you need to use the subscribe method of the Branch SDK. This method acts as a listener, fetching and parsing the deep link URL. Using its events, you can access the parameters available in that deep link. You can use the sample code given below:
import React, { useEffect } from 'react';
import branch from 'react-native-branch';
const DeepLinkingListener = () => {
useEffect(() => {
const listener = branch.subscribe({
onOpenStart: ({ uri, cachedInitialEvent }) => {},
onOpenComplete: async ({ error, params, uri }) => {
if (error) {
console.log('subscribe onOpenComplete, Error from opening uri: ' + uri + ' error: ' + error);
return;
} else if (params) {
if (!params['+clicked_branch_link']) {
if (params['+non_branch_link']) {
// Route based on non-Branch links
return;
}
} else {
// Handle params
// Route based on Branch link data
return;
}
}
},
});
return () => {
listener();
};
}, []);
return null;
};
export default DeepLinkingListener;
In this blog, we explored the process of setting up an account on Branch.io and configuring platform-specific settings. We also demonstrated how to create deep link URLs and extract parameters from them. Integrating deep linking with Branch.io in React Native is easy and brings significant advantages. With features such as deferred deep linking, analytics, and cross-platform compatibility, Branch.io streamlines deep link management. Begin integrating Branch.io today to enhance your app’s user experience and boost engagement.
Start using React Native Branch today to streamline your app’s navigation and boost its functionality.
!! Enjoy, Keep, and Do Delicious Coding !!
The team at Mindbowser was highly professional, patient, and collaborative throughout our engagement. They struck the right balance between offering guidance and taking direction, which made the development process smooth. Although our project wasn’t related to healthcare, we clearly benefited...
Founder, Texas Ranch Security
Mindbowser played a crucial role in helping us bring everything together into a unified, cohesive product. Their commitment to industry-standard coding practices made an enormous difference, allowing developers to seamlessly transition in and out of the project without any confusion....
CEO, MarketsAI
I'm thrilled to be partnering with Mindbowser on our journey with TravelRite. The collaboration has been exceptional, and I’m truly grateful for the dedication and expertise the team has brought to the development process. Their commitment to our mission is...
Founder & CEO, TravelRite
The Mindbowser team's professionalism consistently impressed me. Their commitment to quality shone through in every aspect of the project. They truly went the extra mile, ensuring they understood our needs perfectly and were always willing to invest the time to...
CTO, New Day Therapeutics
I collaborated with Mindbowser for several years on a complex SaaS platform project. They took over a partially completed project and successfully transformed it into a fully functional and robust platform. Throughout the entire process, the quality of their work...
President, E.B. Carlson
Mindbowser and team are professional, talented and very responsive. They got us through a challenging situation with our IOT product successfully. They will be our go to dev team going forward.
Founder, Cascada
Amazing team to work with. Very responsive and very skilled in both front and backend engineering. Looking forward to our next project together.
Co-Founder, Emerge
The team is great to work with. Very professional, on task, and efficient.
Founder, PeriopMD
I can not express enough how pleased we are with the whole team. From the first call and meeting, they took our vision and ran with it. Communication was easy and everyone was flexible to our schedule. I’m excited to...
Founder, Seeke
We had very close go live timeline and Mindbowser team got us live a month before.
CEO, BuyNow WorldWide
If you want a team of great developers, I recommend them for the next project.
Founder, Teach Reach
Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!
Founder, Mindworks
Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.
CEO, PurpleAnt
I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.
CTO, Shortlist
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Founder & CEO, MangoMirror
Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.
CEO, ThriveHealth
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
CEO, SMILINGMIND
They were a very responsive team! Extremely easy to communicate and work with!
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Co-Founder, TEAM8s
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Executive Director of Product Development, Innovation Lab
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
Consultant, XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Founder, S.T.A.R.S of Wellness
Mindbowser was great; they listened to us a lot and helped us hone in on the actual idea of the app. They had put together fantastic wireframes for us.
Co-Founder, Flat Earth
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Founder, Child Life On Call
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
CEO, SDOH2Health LLC
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
CEO, Stealth Startup
Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.
Owner, Phalanx
Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...
Co-Founder, Fox&Fork
