You.i React Native Development

You.i Engine One augments React Native with custom consumer video components, resulting in ultimate developer efficiency and designer freedom. React Native provides JavaScript abstractions to the native OS controls and APIs. This approach to cross-platform development requires that these abstractions are the lowest common denominator between all supported platforms. This in turn imposes limits on both UX design and potential code reuse across platforms. By treating You.i Engine One as another platform, we enable React Native access to improved cross-platform portability, performance, and UX flexibility. Customers can also develop C++ native modules to further enhance JavaScript interaction with You.i Engine One.

In addition to supporting many React Native components and properties out-of-the-box, You.i Engine One supplies its own set of components that are optimized for use with our SDK. Developers are free to use their own custom components or develop new ones. You.i Engine One libraries provide the user interface, app components, rendering, and platform services functionality.

Developer workflow is generally the same as typical React Native workflow, with the optional ability to define UX look and feel with After Effects.

A diagram that depicts how React Native code can run on platforms like tvOS, PlayStation 4, XBOX, Samsung TVs, and more via the You.i Engine

You.i React Native Architecture

React Native bindings to You.i Engine enables apps to be written in JavaScript.

Image

App design occurs with Adobe After Effects (AE). You.i Engine code accepts:

  • AE exported data
  • JavaScript components, through C++ native modules
  • React Native controls

You.i Engine implements consistent app behavior and screen rendering across all target platforms that the app is built for. In addition, the app can interact with native application interfaces using its own cross-platform JavaScript code or its own platform-specific native code.

Using JSX with You.i React Native

You.i React Native extends React Native by adding new elements to the build process.

Image

Instead of specifying screen layout information through JSX files, designers work in Adobe After Effects (AE). They use the You.i AE Plugin to export layout files (screen visual representation data) and timeline files (motion data). You.i Engine uses the layout and timeline files to render screens.

You.i React Native allows developers and designers to include JSX files as needed if they prefer.

In addition to supporting many React Native components and properties out-of-the-box, You.i TV supplies its own set of components that are optimized for use with You.i Engine. For details, see Compositions and UI Components.

Our extensible platform also enables you to create and use your own custom components.

The You.i React Native libraries bridge the app’s JavaScript code to You.i Engine. You can also develop C++ native modules to further enhance JavaScript interaction with You.i Engine.

The You.i Engine libraries provide the user interface, app components, rendering, and platform services functionality.

Using AE with React Native Components

The following Facebook React Native components have been extended to give you the option of using AE elements to define their visual appearance:

If you choose to use AE elements with these components, the associated workflow is the same as for a Ref component, except that they are not referred to by any node inside the Composition component.

For example, if a designer is working on a slider using After Effects, when finished, it is exported as a layout file. The layout file is used as the slider’s default style in an app page that does not have a Composition or Ref component. Using React Native properties, you can add additional styles to the slider’s default.

Image