React Native & After Effects: How You.i Engine One Supports a Unified UI Experience Across All Supported Platforms

John Cassidy
John Cassidy

An overview of the development and design approaches that are available for your project when building using the You.i Engine One React Native solution.

A Core concept of Facebook React Native is that a Button Component when run on iOS maps to a UIKit Button and a Button Component when run on Android maps to an Android Button. (See documentation for visual). The properties of the Button component do slightly different things on each platform depending on that platform’s capabilities.

With You.i Engine One, the same concept applies to React Native, however, instead of mapping to an iOS or Android platform-specific button, it maps to an element of the SDK, which can then render in an identical manner on all platforms You.i Engine One supports (mobile, streaming devices, Smart TVs, and game consoles).

In this post, I’m going to take you through how UI Elements can be rendered in an identical manner across all supported platforms, using You.i Engine One’s React Native solution in conjunction with our After Effects workflow.

React Native

You.i Engine One is an SDK and Rendering Engine to develop applications on a large number of platforms with a single codebase.

JSX Components that are created in your React Native application code are provided to the React Native platform layer. The properties of the component and the placement of the element within the flex-box layout are used to construct You.i Engine SDK UI elements—which are then provided to the rendering pipeline.

Essentially, when you use a core Component from react-native, the React Native platform layer programmatically creates a UI element that is understood by You.i Engine One and maps the properties from that React Native Composition to a You.i Engine One SDK Element.

After Effects Workflow

The After Effects Workflow (AE Workflow) refers to the capability to create designs in After Effects and export them in a manner that can be consumed by your application code and understood by the You.i Engine One SDK.

The designs you create in After Effects represent UI Elements that map to UI Elements in You.i Engine One. These UI Elements can be of particular types, such as a Button, and special properties can be assigned using the After Effects You.i Properties Panel.

After Effects showing the You.i Properties panel of a Button

When exporting these UI Elements for consumption by your application code, the output is a collection of layout and timeline files that contain properties that will inform the Engine of all the different element types, their relationship to each other, how to display these elements on-screen (timelines that can be toggled for animations), and how they will look and behave when the user interacts with them (i.e pressed state, focused state, disabled state).

After Effects Workflow and React Native

While the core Facebook React Native Components provided by react-native provide a way to create new UI Elements on the fly, leveraging the After Effects Workflow allows us to create new UI Elements using the design templates provided by designers.

The @youi/react-native-youi package contains a number of Components that represent these After Effect Workflow elements. The important difference between these components and standard Facebook RN core components is that After Effects Components are references to the layouts and timelines provided by the Exporter Plugin.

All components that represent After Effects layouts or timelines will be appended with Ref (ViewRef, ImageRef, ButtonRef, ListRef, etc).

What this means is that when you construct a Composition within React Native JSX, you provide it with a template (a layout) and all children within that composition are references to various parts of that After Effects Composition.

A sample Composition Containing multiple Push Buttons

When the above composition is exported, we receive a number of layout and timeline items that represent the composition and it’s dependencies.

Layout and Timeline files that are exported using AE Plugin

This composition that has been created and exported is now available to be consumed our RN Application Code.

import React from 'react';
import { Composition, ButtonRef } from '@youi/react-native-youi';

class WorkflowComponent extends React.Component {
  render() {
    return (
      <Composition source="PDP_controls">
        <ButtonRef
          name="Btn-Previous" 
          onPress={ () => console.log('Previous Button Clicked') }
        />
        <ButtonRef
          name="Btn-Play-Order" 
          onPress={ () => console.log('Play Button Clicked') }
        />
        <ButtonRef
          name="Btn-Next" 
          onPress={ () => console.log('Next Button Clicked') }
        />
      </Composition>
    );
  }
}

 

It’s important to understand that you are referencing something that exists whether or not you acknowledge it. This means that conditional rendering inside a <Composition> is not a valid technique, as the item not being referenced still exists and is present — you are just not referencing it in code. Proper state management and manipulation of an After Effects component allow you to display the element how you intend it.

What is the common thread?

Regardless of how you create your UI and business logic to interact with your UI, there is a point where any Component created in JSX is mapped to a UI Element from the You.i Engine One SDK that can be rendered across all platforms.

Shadow Views & Counterparts

Shadow Views are the linkages that connect your React Native JSX to You.i Engine One. An implementation of a Shadow View, called a Native Component, is a C++ class who represents both the superficial JSX Component (a yoga node, for example both core components such as View and Image or AE Workflow components such as ViewRef and ImageRef), their counterpart UI Element understood by You.i Engine One, and the business logic of how to apply properties from one to the other.

Facebook React Native Counterparts

The following basic snippet of code represents a View that contains some Text.

export default class TextComponent extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    );
  }
}

JSX Representation of Text within a View

It can be represented in the following way to demonstrate how it maps to basic representations in You.i Engine One:

Mapping of JSX Components to You.i Engine One Components

AE Workflow Components

The following basic snippet of code represents a Composition containing a View that contains some Text.

export default class TextRefComponent extends React.Component {
  render() {
    return (
      <Composition source="Sample_Main">
        <ViewRef name="MyView">
         <TextRef name="MyText" text="Hello World" />
        </ViewRef>
      </Composition>
    );
  }
}

AE Workflow Representation of Text within a View

It can be represented in the following way to demonstrate how it maps to basic representations in You.i Engine One:

Mapping of JSX Components to You.i Engine One Components

The You.i Engine Scene Tree

A scene tree is a logically structured collection of nodes and views (lower level UI Elements) that represent the application in terms of siblings and child nodes in a manner that the Engine understands. These nodes contain attributes that the engine uses to determine how to render the content (type, position, height, width, opacity, mesh, etc).

Simple Scene Tree example

The individual items may not look like much to you, or they may look close enough to something you recognize to figure out what they are, but ultimately they are a collection of lower-level UI Elements from the SDK that the engine understands and knows how to render.

When writing application code in React Native, regardless of if you use the After Effects Workflow or leverage the core components provided by Facebook React Native, you will be using higher-level components that will eventually be converted to this representation within a prior to being rendered to the screen.

The important takeaway from this is that whatever components you create in your application, Shadow Views that represents your JSX Components ultimately link to this collection of nodes at the lower engine level.

Which approach is right for my project?

Basically, how you build your application boils down to 3 options, much of which will be determined by your designs:

  • After Effects Workflow to reference full-screen designs and all interactions created in After Effects. This puts the power of design into the hands of designers, but can occasionally be heavy-handed for very basic parts of the application.
  • Pure Facebook React Native JSX (Components from react-native) to programmatically create designs in code and lean on animated events to add sizzle. This can be more familiar to React Native teams and lead to quicker cycles producing features and functionality, however, developers are typically not fantastic designers, and programmatic animated interpolations can not compete with the power of After Effects for complex animations.
  • A Hybrid approach that utilizes the best of both worlds: The flex-box layout system, animations created in After Effects, simplified Facebook RN Views for simple visuals.

Regardless of the choice you make, you will be building it using familiar constructs of the React Native Framework.

Here’s something similar we think you’ll enjoy.