Developing React Native Apps for Roku

There are several things to consider when developing You.i React Native apps for Roku.

Consider the following when developing such You.i React Native app for the Cloud Solution:

• A Cloud Solution app does not render directly through the device’s graphics driver. Instead, the Roku user interface library, SceneGraph, is leveraged to draw the visual content.
• The UI is updated asynchronously through HTTPS download and TCP stream socket. The latency of cloud-generated and delivered UI must be taken into account when optimizing an application’s performance.

Despite these considerations, a responsive in-app experience is maintained by handling user-triggered focus visuals locally; that is, directly on the Roku device. For example, selecting buttons and or list items results in immediate feedback regardless of the user’s network conditions.

Screen Update and Construction

The cloud-generated UI updates, delivered through a SceneGraph component library, generally correspond to a screen or to a large subsection of a screen.

When the structure of the scene described by the JSX render() function changes, the Cloud Solution automatically notices this change and updates the Roku client’s UI. Because of this, the app should ensure that component state changes, which result in render() calls, should be coordinated to only occur when a necessary UI update is desired.

You.i TV recommends that you construct your screens so that changes to the render results are only done when needed. Waiting until all required UI elements are available to be rendered is one way to achieve this. For example, if a screen includes multiple lists, it is better to wait for all content fetches to complete before including the lists in the render() function. This approach could mean rendering a <Loading> or similar component while waiting for all of the content to arrive. Once the content for all lists has been retrieved, the application can render() the full screen.

Using this strategy (instead of adding to render() as each list is populated) results in a better user experience, because the Roku device experiences only minimal UI updates.

In addition to this strategy, the Cloud native module provides APIs to fine tune the export process:

• You can pause and resume the automated export process using pauseExportUpdates(), resumeExportUpdates(), and areExportUpdatesPaused(Callback resolvePromise). With paused export updates, the Cloud Solution no longer automatically exports UI updates. If desired, a developer can then add views to the render() result one at a time. Once all the content is being rendered the export updates can be resumed, leading to a Roku UI update.
• You can have a fully developer-driven UI update scheme by pausing the automatic export updates and calling exportSubtree().

Scene Modifications

Due to the cloud-based UI update mechanism, the app should not be perpetually modifying its state without user input. For example, an infinite change of state resulting in re-renders is problematic.

The Cloud Solution provides an automated and non-intrusive mechanism to update key fields on views. For instance, an application can update text fields and image URLs without concern for introducing large user-facing stalls.

Native Modules

The following native modules provide access to Roku APIs required for platform certification:

• For deep-linking, use the getInitialURL() API of the Linking module. For details, see Deep Linking.

• For video playback, Roku requires that you populate video attributes, such at the content title. Use the metadata property of the Video or VideoRef component; for example:

   <Video
     metadata={{title: video.title, id: video.video_id}}
     source={this.state.videoSource}
     ...
   </Video>