UI Components

React Native user interfaces are built with high-level building blocks called JSX components, which allow you to quickly build great user experiences in your application. To learn more check out JSX in depth.

Understanding the Properties Tables

Here’s an explanation of the column headers in the Properties tables for each component.

• Supported: The prop is supported on all non-Cloud platforms, except when specified otherwise.
• Supported on Roku: The prop is supported on You.i Roku Cloud. Static support is implicit.
• Dynamic on Roku: The prop supports dynamic property updates on You.i Roku Cloud, meaning that the prop can be updated on the fly and doesn’t require a full screen refresh. See also Dynamic Updates.

Basic Components

User Interface Components

List View Components

You.i Platform React Native Components

You.i Platform provides components that don’t exist in Facebook React Native which are specialized for video streaming applications.

After Effects (AE) and Design Workflow Components

After Effects is a motion graphics tool. Paired with the You.i Platform AE plugin, After Effects is capable of building UI components and screens. Consider AE as a supplement to the standard development phase of a project. With AE, designers and developers can quickly assemble content into interactive elements, define states, add layout, and create animations. As a supplementary tool, project teams can use as little or as much AE as they’d like.

Composition and Ref custom components work together to allow You.i React Native apps to use After Effects (AE) workflow files. A Composition component contains Ref components that refer to views of AE objects in the AE composition.

When a designer creates a Ref component in After Effects, it is exported to a layout file using the You.i Export All Compositions option. The newly created Ref component refers to an existing node inside the Composition component. The Composition component and Ref components are custom React Native components created by You.i TV. No connection is made with React Native APIs.

The following image shows the workflow using ImageRef as an example.

When a JSX file specifies a layout with a React Native component, JavaScript programmatically creates an instance of the view for that component. When JSX specifies a Composition and Ref components, JavaScript only looks for existing views. React Native components implement a layout with Flexbox. The Composition and Ref components load views of an external layout from After Effects files.

In terms of component hierarchy, Ref components must be located within a Composition component. Ref components can contain other ref components, but the order must match the AE composition structure. A Ref component cannot contain a React Native component; an exception to this rule exists for both ListRef and ScrollRef. ListRef can contain RN components within its renderItem prop, and ScrollRef can contain them anywhere. See You.i React Native Compositions for an example of this.

Ref components must have their name property set and must refer to an object defined in the parent AE component. For example, a ButtonRef component would have its name property set to MyButton, which is also defined in an AE component.

After Effects objects must be “pre-composed” in AE before they can be loaded by the Composition component. Pre-composing an AE object means putting it in a parent AE composition. That AE composition may be the root composition that the Composition component refers to, or a sub-composition with the root composition. Ref components can then refer to the AE object.

Don’t use React Native layout properties on Ref components. The layout of a Ref component is specified instead by the AE composition.

Facebook React Native AE Components

You.i React Native introduces the following Ref components that align with Facebook React Native components:

You.i React Native AE Components

You.i React Native introduces the following Ref components that are unique with You.i Platform SDK:

Holding References to Ref Components

The react-native-youi library exposes some functionality through imperative calls on references (“refs”) to compositions. The onLoad property, among others, exposes a ref that can be used immediately or stored for later use, depending on the use case. Two common examples are for focus and animations. Be aware that these refs can become stale after another call to render, and so you must keep your refs up to date each time the function is invoked. The following is an example using a reference:

<ViewRef
   name="InitialFocus"
   onLoad={ref => FocusManager.focus(ref)}}
/>