Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration

Scenario

Imagine you have an eCommerce app named ShopEasy, and you want users who click on product links in emails, messages, or social media to be redirected directly to the relevant product page in the app, instead of the website.

---

Step 1: Opengraph Configuration in nodejs server for link preview:

Open Graph is a protocol used by web developers to control how URLs are represented when shared on social media platforms like Facebook, Twitter, LinkedIn, and others. By using Open Graph tags in the HTML of a webpage, you can dictate what content will be shown in the preview when a user shares the link.

To use these OpenGraph tags in a React Native app, you would handle the links to your server (such as https://ShopEasy.com/${type}/${id}) using deep linking or universal links. When users share these links, platforms like Facebook, Twitter, or iMessage will automatically display the content preview based on the OpenGraph tags you've defined.

/routes/share.js

const express = require('express');
const app = express();
const path = require('path');

// Serve static files (e.g., images, CSS, JavaScript)
app.use(express.static(path.join(__dirname, 'public')));

// Route to serve the OpenGraph meta tags
app.get('/:type/:id', (req, res) => { // type: product/category
    const productId = req.params.id;

    // Fetch product details from a database or API (placeholder data for this example)
    const product = {
        id: productId,
        name: 'Sample Product',
        description: "'This is a sample product description.',"
        imageUrl: 'https://ShopEasy.com/images/sample-product.jpg',
        price: '$19.99',
    };

    // Serve HTML with OpenGraph meta tags
    res.send(`
        
        
        
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration</title>

            <!-- OpenGraph Meta Tags -->
            <meta property="og:title" content="Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration">
            <meta property="og:description" content="${product.description}">
            <meta property="og:image" content="${product.imageUrl}">
            <meta property="og:url" content="https://example.com/product/${product.id}">
            <meta property="og:type" content="product">
            <meta property="og:price:amount" content="${product.price}">
            <meta property="og:price:currency" content="USD">

            <!-- Twitter Card Meta Tags (optional) -->
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:title" content="Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration">
            <meta name="twitter:description" content="${product.description}">
            <meta name="twitter:image" content="${product.imageUrl}">

        
        
            <h1 id="Mastering-Deep-Linking-and-Universal-Links-in-React-Native-OpenGraph-Share-amp-Node-js-Integration">Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration</h1>
            <p>${product.description}</p>
            <img src="/static/imghw/default1.png" data-src="${product.imageUrl}" class="lazy" alt="Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration">
            <p>Price: ${product.price}</p>
        
        
    `);
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

---

Step 2: iOS Setup and Configuration:

a) (For production) Prepare the apple-app-site-association File

The apple-app-site-association (AASA) file is a JSON file that tells iOS which URLs should open your app. Here's how you might set it up for your eCommerce app:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appIDs": ["ABCDE12345.com.shopeasy.app"],
                "paths": [
                    "/product/*",
                    "/category/*",
                    "/cart",
                    "/checkout"
                ]
            }
        ]
    }
}

• appIDs: . Your app’s identifier, combining your Apple Team ID (ABCDE12345) with your app’s bundle identifier (com.shopeasy.app).
• paths: The paths on your website that should open in your app.
• /product/*: Any product page (like https://www.shopeasy.com/product/123) should open in the app.
• /category/*: Any category page (like https://www.shopeasy.com/category/shoes).
• /cart and /checkout: The user's cart and checkout pages should also open in the app.

b) (For production) Host the apple-app-site-association File

After you construct the association file, place it in your site’s .well-known directory. The file’s URL should match the following format:

https:///.well-known/apple-app-site-association(eg: https://www.shopeasy.com/.well-known/apple-app-site-association)
You must host the file using https:// with a valid certificate and with no redirects.

c) Enable Associated Domains in Xcode

i) Open Xcode:
Open your ShopEasy project in Xcode.

ii) Add Associated Domains Capability:
Go to the "Signing & Capabilities" tab.
Click the "+" button and add "Associated Domains."

iii) Add Your Domain:
Under the Associated Domains section, add your domain prefixed with applinks:.
For example:
:
i) Service applinks: Used for deep linking and app-to-web interaction, allowing your app to handle specific URLs directly.
ii) Service webcredentials: Used to enable AutoFill for credentials, allowing users to seamlessly use saved passwords across your app and website.

For dev:

applinks:shopeasy
webcredentials:shopeasy

For production:

applinks:shopeasy.com
webcredentials:shopeasy.com

d)(ref) In Info.plist configuring URL Schemes: (URL schemes are useful when you want to open your app via a link that’s not necessarily a web URL, allowing deep linking within your app or launching it from another app.)

where:
CFBundleURLName: A human-readable name for the URL scheme. This can be any descriptive string.
CFBundleURLSchemes: The actual URL scheme your app supports. It should be a unique string like shopeasy/showeasy.com(if production set).

    <array>
...
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>shopeasy</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>shopeasy</string>
            </array>
        </dict>
    </array>

d) In AppDelegate.mm:

#import <react>

// ...
// Add Below Code for DeepLinks

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<uiapplicationopenurloptionskey> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}


- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}

//DEEP LINKS TILL HERE

@end
</id></uiapplicationopenurloptionskey></react>

e) Testing deeplink device:

This should open the app.

npx uri-scheme open "shopeasy://product/mobile" --ios

or

xcrun simctl openurl booted "shopeasy://product/mobile"

Step 3: Android Setup and Configuration:

i) In AndroidManifest.xml:

    <application... ... android:launchmode="singleTask">

    <!-- DEEP LINKS HERE -->

   <intent-filter>
        <action android:name="android.intent.action.VIEW"></action>
        <category android:name="android.intent.category.DEFAULT"></category>
        <category android:name="android.intent.category.BROWSABLE"></category>
        <data android:scheme="shopeasy"></data>
    </intent-filter>

        <intent-filter>
        <action android:name="android.intent.action.VIEW"></action>
          <category android:name="android.intent.category.DEFAULT"></category>
          <category android:name="android.intent.category.BROWSABLE"></category>
          <data android:scheme="http"></data>
          <data android:scheme="https"></data>
          <data android:host="localhost"></data>
          <!-- REPLACE the HOST with app domain like shopeasy.com -->
        </intent-filter>
   <!-- DEEP LINKS HERE -->

/>
</application...>

ii) Check in android:
adb shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
or
Click on this link in emulator if route is working:
http://localhost:3000/share/product/iphone

---

Step 3: Usage in React Native App:

Navigation.jsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './MainNavigator';
import { navigationRef } from '../utils/NavigationUtil';

const config = {
  screens: {
    ProductScreen: '/product/:id',
    CategoryScreen: '/category/:name',
  },
};

const linking = {
  prefixes: ['shopeasy://', 'https://shopeasy.com', 'http://localhost:3000'], 
  config,
};

const Navigation: React.FC = () => {
  return (
    <navigationcontainer linking="{linking}" ref="{navigationRef}">
      <mainnavigator></mainnavigator>
    </navigationcontainer>
  );
};

export default Navigation;

App.jsx

  useEffect(() => {
    // Retrieve the initial URL that opened the app (if any) and handle it as a deep link.
    Linking.getInitialURL().then(url => {
      handleDeepLink({ url }, 'CLOSE'); // Pass the URL and an action ('CLOSE') to handleDeepLink function.
    });

    // Add an event listener to handle URLs opened while the app is already running.
    Linking.addEventListener('url', event => handleDeepLink(event, 'RESUME'));
    // When the app is resumed with a URL, handle it as a deep link with the action ('RESUME').

    // Cleanup function to remove the event listener when the component unmounts.
    return () => {
      Linking.removeEventListener('url', event => handleDeepLink(event, 'RESUME'));
    };
  }, []);

CLOSE/RESUME is optional and is passed handle as per requirement.

The above is the detailed content of Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration. For more information, please follow other related articles on the PHP Chinese website!