React Native & After Effects: How You.i Engine One Supports a Unified UI Experience Across All Supported Platforms
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.
What is You.i Engine One?
You.i Engine One is a SDK and Rendering Engine to develop applications on a large number of platforms with a single codebase.
The SDK contains an enormous amount of functionality, but for the purpose of this article we are going to view it as a collection of UI Elements that can be rendered in an identical manner across all supported platforms.
What is the 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.
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).
Where does React Native come in?
You.i Engine One now supports building applications using React Native. The Frameworks leveraged by React Native, such as Flex-Box, and the core component libraries of react-native are made available to provide a way of building applications that is familiar with ReactJS and Facebook React Native developers.
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 platforms capabilities.
The same concept applies to React Native using You.i Engine One, 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.
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 these You.i Engine SDK Objects which are then provided to the rendering pipeline.
Essentially, when you use a core Component from react-native, the React Native platform layer programatically 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 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.
When the above composition is exported, we receive a number of layout and timeline items that represent the composition and it’s dependencies.
This composition that has been created, exported, and is now available to be consumed by our RN Application Code
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.
It can be represented in the following way to demonstrate how it maps to basic representations in You.i Engine One:
AE Workflow Components
The following basic snippet of code represents a Composition containing a View that contains some Text.
It can be represented in the following way to demonstrate how it maps to basic representations in You.i Engine One:
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).
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.
Building Your Application With or Without the After Effects Workflow
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 form
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.
