Developer Portal

You.i Engine React Native Components

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.

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 be nested, but the nesting must match the AE composition structure. A Ref component cannot contain a React Native component.

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 subcomposition with the root composition. Ref components can then refer to the AE object.

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

You.i Engine React Native introduces the following Ref components:

Ref component

Similar Facebook React Native component

Referenced AE Object

ButtonRef

Button

CYIPushButtonView

ImageRef

Image

CYIImageView

ListRef

FlatList

CYIListView

ScrollRef

ScrollView

CYIListView (not CYIScrollView)

SliderRef

N/A

CYIScrollView

TextInputRef

TextInput

CYIPasswordTextEditView

TextRef

Text

CYITextSceneNode

TimelineRef

N/A

CYITimeline

VideoRef

Video

CYIAbstractVideoPlayer

ViewRef

View

CYISceneView (equivalent to an AE layer)

WebViewRef

WebView

CYIWebView

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

Note

You.i Engine React Native does not support hot reloading of changes. It supports live reloading of changes when developing code with a yarn server.