Deep Linking

Deep linking is an operating system-supported functionality that launches an app with an additional set of information on what an app should do once it’s launched.

You.i Platform supports getting the incoming deep link to launch an app, and sending outgoing deep links to launch other apps.

• In You.i C++
  • Querying the initial launch URL
  • Listening for incoming URL events from the CYIDeepLinkBridge class
• In You.i React Native
  • Querying the Linking module for the initial launch URL
  • Listening to the React-Native third-party library, React-Navigation, for incoming URL events

For more information on deep linking:

• For Roku, see Deep Linking in Roku
• For Tizen, see Deep Linking in Tizen

URL Transformation with React-Navigation

React Navigation, a library for screen navigation in React-Native, interfaces directly with the native Linking module, but expects an URL format in a specific format: screenname/additionalinfo. For more details, see React Navigation Deep Linking.

The following diagram explains you why URL transformation is required:

In order to support deep linking and screen navigation with the React Navigation library, some platforms require URL to be transformed before the React Navigation library can access it. This can be done by calling LinkingManager.setUrlTransform(‘sometransform’);, where URL transforms are composed of tags in the following format: {function:argument1:argument2:argument3:defaultvalue(optional)}, and:

• function is function name
• argument values depending on the function (colon separated)
• a default value (optional); can always be included as the last argument of a tag, to replace the tag if there is an error while parsing. Otherwise, the tag will be replaced with a description of the error.

The following is a generic example code for incoming deep link:

import { Linking } from 'react-native';

export default class IncomingDeepLinkHandlingClass extends Component {
  constructor(props) {
    // Connect to the Linking url event to handle mid-execution deep links.
    Linking.addEventListener('url', this.handleOpenURL);
    this.asyncConstructor();
  }

  async asyncConstructor() {
    url = await Linking.getInitialURL();
    // Handle Initial URL
  }

  handleOpenURL = ({ url }) => {
    // Handle mid-execution URL
  }
}

The following is a generic example for outgoing deep link:

import { Linking } from 'react-native';

export default class IncomingDeepLinkHandlingClass extends Component {
  async canOpenUrl(url) {
    canOpen = await Linking.canOpenURL(url);
    // Handle boolean result 'canOpen'
  }

  async openURL(url) {
    try {
      await Linking.openURL(url);
    } catch (e) {
      // Handle error
      }
  }
}

To pass Roku certification, the app must support deep linking, which is an OS supported functionality that launches an app with the additional information about what an app should do once it’s launched. For more details, see the Roku Deep Linking documentation.