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 (not Roku): Props are supported on Android (mobile, tablet, and 10 ft), Samsung Tizen, LG webOS 4, tvOS, iOS (mobile and tablet), macOS, Amazon (FireOS), Linux, PS4, XBox, and UWP, except when specified otherwise.
  • Supported on Roku: Props are supported on You.i Engine Cloud. Static support is implicit.
  • Dynamic on Roku: Provides support for dynamic property updates on You.i Engine Cloud. Properties listed as having dynamic support can be updated on the fly without requiring a full screen refresh. For more information about dynamic support on Roku, see the Roku Fundamentals topic Dynamic Updates.

Basic Components

View

Basic building block for building a user interface in React Native.

Read more

Text

Text provides a way to talk to users.

Read more

Image

Images help define the use experience, whatever it might be in your app.

Read more

TextInput

Text input is for users to enter data.

Read more

ScrollView

Component for scrolling lists.

Read more

StyleSheet

Component for managing styles.

Read more

User Interface Components

Button

Buttons let users take action.

Read more

Slider

Sliders make it easy to create complex user experiences.

Read more

List View Components

FlatList

A simple flat list of images or text.

Read more

SectionList

A list of sections that can include lists, images and text.

Read more

You.i Engine One React Native Components

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

VideoSurface

Component that can take any video player resource from the PlayerManager for the AE workflow.

Read more

After Effects (AE) and Design Workflow Components

After Effects is a motion graphics tool. Paired with the You.i Engine One 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 Engine 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.

Design Workflow Using ImageRef

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 Engine 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 Engine React Native introduces the following Ref components that align with Facebook React Native components:

ButtonRef

Button component for the AE workflow.

Read more

Composition

Compositions (layouts) for the AE workflow.

Read more

FocusZoneRef

Focus interaction points component for the AE workflow.

Read more

FocusZone

Focus interaction component for JSX apps.

Read more

ImageRef

Image reference component for the AE workflow.

Read more

TextInputRef

Text input reference component for the AE workflow.

Read more

VideoRef

Video reference component embedding video in the AE workflow.

Read more

WebViewRef

Webview reference component for HTML rendering.

Read more

ListRef

ListRef reference component for lists.

Read more

You.i Engine One React Native AE Components

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

SliderRef

Slider reference component for the AE workflow.

Read more

TimelineRef

Timeline reference component for the AE workflow.

Read more

VideoSurfaceRef

VideoSurface reference component that can take any video player resource from the PlayerManager for the AE workflow.

Read more

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)}}
/>