Firebase Dynamics Links — Configuration
I am creating this post within context to support some posts where I spoke about Deep Linking. After setting up Deep Link for my iOS and Android apps, I looked into options for creating links I can share through social media that can be handled by those apps even when they are not installed.
If you haven’t yet set up Deep Link for your app, please check out these posts:
Firebase Dynamic link allows you to create a link configured to have different behavior based on where the user opens it. You can configure what should happen when the user clicks on the Firebase Dynamic link for each app, iOS, Android, or web. Most important, even when the user does not have the app installed, it will ask them to install the app and still be able to retrieve information passed through the dynamic link.
Installation
If you still need to set up the react-native-firebase module on your project, please follow the instructions on this link. Then, follow the instruction below to install Firebase Dynamic links.
The Firebase Dynamic link also requires the @react-native-firebase/analytics module to be set up and installed. View the Getting Started documentation to install the "analytics" module.
# Install & setup the app module
yarn add @react-native-firebase/app
# Install the dynamic-links module
yarn add @react-native-firebase/dynamic-links
# If you're developing your app using iOS, run this command
cd ios/ && pod installCreate Dynamic Link
I will not cover how to create a project in firebase, and I recommend reading some documentation about it to get yourself comfortable with firebase. Open the Dynamic link tab and configure a new domain to your app. For my case, I have created one for https://businessNameDev.page.link
Before setting up the Firebase Dynamic link, ensure your iOS and Android app is ready and set up to use the Firebase Dynamic link.
First, you will create a Deep Link, which can be random because it’s just the URL that can be shared. For my example, I created the following dynamic link — https://businessNameDev.page.link/jrlRequest.
When populating the Deep Link URL field, use the same URL you used when following the instructions for RNFirebase. The Deep Link URL matters because it is where you want to deep-link to in the app. The suffix of this URL will be where we want to deep-link to in the app.
Steps 3 and 4 are similar. In this section, you can check that you want to open the Android and iOS versions of the app. After this, you can go through the last section of the deep link creation process.
Connecting Firebase Dynamic Links with React Navigation
We’ve all been waiting for the moment: we are finally connecting Dynamic Links and React-Navigation! The first thing we need to do is import Dynamic Links in our file containing the linking configuration. Then, we will detect the incoming deep linking and update the getInitialURL, as shown below.
async getInitialURL() {
// Check if app was open by deep linking
const url = await Linking.getInitialURL();
// Check if deep linking comes from Firebase Dynamic link
const dynamicLinkUrl = await dynamicLinks().getInitialLink();
if (dynamicLinkUrl) {
return dynamicLinkUrl.url;
}
// No Firebase Dynamic Deep Linking; check the custom URI-Scheme link.
if (url !== null) {
return url;
}
return 'jlrecharge://home';
},Now, we need to handle receiving deep links while the app is open by subscribing to the Firebase Dynamic link handler.
subscriber(listener) {
// First, you may want to do default deep link handling
const onReceiveURL = ({url}) => listener(url);
Linking.addEventListener('url', onReceiveURL);
// Listen from incoming links from Deep Linking
const handleDynamicLink = dynamicLink => {
listener(dynamicLink.url);
};
const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
return () => {
unsubscribeToDynamicLinks();
Linking.removeAllListeners('url', onReceiveURL);
};
},Having everything put together, your deep link scheme config should look like these.
import dynamicLinks from '@react-native-firebase/dynamic-links';
import {Linking} from 'react-native';
import {REQUEST_SCREEN} from './routerNames';
export const linking = {
prefixes: ['jlrecharge://', 'https://jlrecharge.com'],
async getInitialURL() {
// Check if app was open by deeplinking
const url = await Linking.getInitialURL();
console.log('Open the App from Deep Linking:', url);
const dynamicLinkUrl = await dynamicLinks().getInitialLink();
if (dynamicLinkUrl) {
console.log('Open the App from dynamicLinkUrl:', dynamicLinkUrl);
return dynamicLinkUrl.url;
}
if (url !== null) {
return url;
}
return 'jlrecharge://home';
},
subscriber(listener) {
// First, you may want to do default deep link handling
const onReceiveURL = ({url}) => listener(url);
Linking.addEventListener('url', onReceiveURL);
// Listen from incoming links from Deep Linking
const handleDynamicLink = dynamicLink => {
listener(dynamicLink.url);
};
const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
return () => {
unsubscribeToDynamicLinks();
Linking.removeAllListeners('url', onReceiveURL);
};
},
config: {
screens: {
[REQUEST_SCREEN]: {
path: REQUEST_SCREEN,
},
},
},
};TEST & Validation
Finally, to test, copy and paste the link provided by the Firebase Console and place it in the notes app. When you tap this link in the notes app on your phone, it opens the app to the request screen.
PLEASE, you need to run these tests on real devices. It does not work efficiently on the simulator.
or Support or if you have any questions, please reach out.
If you have questions or need help, reach out — info@jaalves.com.
Collaboration:
DM on Instagram : https://www.instagram.com/jaa.consulting/
DM on Facebook: https://www.facebook.com/Jaa.Consulting.Official
