Integrating your web react applications with their React Native(android and IOS) apps using QR code

Integrating a web application with Android and iOS apps using QR codes is a popular method for enabling users to easily switch between different platforms. Here is an overview of how the integration can work.

How integration work?

1. Generate a QR code: The web application generates a unique QR code that contains a URL or other identifying information. This QR code is displayed on the user’s screen or sent to the user via email or other messaging services.
2. Scan the QR code: The user scans the QR code using the camera of their Android or iOS device. This can be done using a built-in QR code scanner or a third-party app.
3. Open the app: The device recognizes the QR code and prompts the user to open the corresponding app. The user taps on the prompt and the app is launched.
4. Authentication: The app authenticates the user based on their account information or other identifying information provided by the QR code.
5. Transfer data: The app transfers data from the web application to the mobile app, such as particular screen and data.

There are several benefits to using QR code integration, including:

1. Seamless transition: Users can easily switch from the web application to mobile app without having to manually log in or transfer data.
2. Improved user experience: Users can access the same data and features across different platforms, improving their overall experience.

However, there are also some limitations to QR code integration, including:

1. Limited functionality: Not all web application features may be available on the mobile app, depending on the integration method and the app’s capabilities.
2. Compatibility issues: Some older devices may not support QR code scanning or may have difficulty recognizing the code, which could limit the user’s ability to use the integration.

export const generateDynamicLink = async (link) => {
  const dynamicEncryptedLink = await axios.post(
    `https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${firebaseConfig.apiKey}`,
    {
      dynamicLinkInfo: {
        link: link,
        domainUriPrefix: process.env.REACT_APP_DYNAMIC_LINK,
        androidInfo: {
          androidPackageName: process.env.REACT_APP_ANDROID_PACKAGE_NAME,
          androidFallbackLink:
            'https://ess.vectoscalar.com/my-growth-dashboard',
        },
      },
    }
  );
  return dynamicEncryptedLink;
};

How to generate a encrypted deep link from firebase dynamic links:

Firstly we need to make a API POST call to https://firebasedynamiclinks.googleapis.com/v1/shortLinks with firebase API key as key in parameter and body inside “dynamicLinkInfo” that includes :

• Link : Path to that screen with the some id if needed i.e `${process.env.REACT_APP_DYNAMIC_LINK}/app/?redirectTo=ProductDetails&uuid=${row?._id}`
• domainUriPrefix: The baseurl of firebase dynamic link
• androidInfo : this is an object which included values like fallbackUrl (Sets the link to open when the app isn’t installed) and androidPackageName (name of firebase app on which we need to be navigated from the web)

generateDynamicLink(
        `${process.env.REACT_APP_DYNAMIC_LINK}/app/?redirectTo=ProductDetails&uuid=${row?._id}`
      ).then((dynamicLink) => {
        setQrOpen(true);
        setQrCodeLink(dynamicLink.data.shortLink);
      });

Author- Divyanshu Srivastava, Software Engineer @ VectoScalar Technologoies.