Unlocking You.i Engine Capabilities with React Native Counterparts
When building an application with React Native on You.i Engine One, there are situations where the SDK provides functionality that is beyond the current out-of-the-box capabilities of Facebook React Native, but they are only exposed at the C++ level. This article will describe a way to enhance your React Native development experience with You.i Engine One by reaching into native code and accessing those expanded feature sets.
Native Modules
A Native Module is a communication bridge between JS to specific C++ code. For our purposes we will focus on communication from JS to C++, which are classes and methods exposed to JS in a way that provides JS methods to call with parameters.
Further Reading: Basic example of creating Native Module
Shadow Views & Counterparts
As discussed in an introduction to React Native and the After Effects Workflow, Counterparts to JSX Components are the UI Elements that are understood by You.i Engine One. They are created by Shadow Views that also represent the superficial JSX Component (yoga node) in your React Native application code.
Shadow Views are responsible for receiving props from JSX Components, and mapping them to a newly created You.i Engine One Counterpart.
All ShadowViews are stored in a Shadow Registry that is owned by the React Native Platform Bridge, they are stored as a map from their node handle. When a JSX Component is created, it is added to the Shadow Registry. When it is destroyed, it is removed.
Tapping into a Counterpart
With our knowledge of Shadow Views and how JSX components are linked to counterparts, we can summarize with a couple of statements:
All components that are represented in JSX have a counterpart view that is a You.i Engine One SDK UI Element.
All You.i Engine One SDK Counterparts can be accessed by a Native Module to expose their native C++ headers and provide access to functionality that may be beyond the capability of a Facebook React Native comparable Component.
To access a You.i Engine One SDK Element that is the counterpart to a JSX Component, we first need to write a Native Module that will take a node handle. Shadow Views are stored in the Shadow Registry by this node handle, so having it allows us to reach into the Shadow Registry and access the appropriate Shadow View.
To find a node handle, we can use the functionality provided by Facebook React Native in JSX:
Now that we know how to retrieve the handle of the component, we want to be able to provide that handle to a Native Component. Using the above mentioned QuickStart Guide on Native Modules, let’s define one that accepts this node handle:
Our next step is to find the Shadow Component that maps to the node handle (tag) that we provide to the Native Module.
When we have access to the Shadow Component, we can then access it’s counterpart view and then dynamically cast to the appropriate type for the Element in You.i Engine One. It’s important to note that for each step, we want to validate that we are working with the correct types and we do so by utilizing YI_ASSERT calls when appropriate (This will cause a SIGABRT exception with output explaining what went wrong).
With the above, we now have access to the counterpart view, and all the headers made available to it in the documentation (see Documentation for CYISceneView).
We can now call this NativeModule from JSX and provide it the node handle tag.
Note: The above code will work in the exact same manner if we were to replace a <View> component with a <Composition> containing a <ViewRef> component. As discussed in an earlier introduction, the counterpart to a <ViewRef> is also a CYISceneView in the You.i Engine One SDK.
Example: Making a FlatList with Carousel Support
A common use case for a Video Streaming application is to provide a carousel on your lander screen, typically a list of featured content. Making a FlatList a carousel is (at the time of 0.58) not a supported feature for Facebook React Native. The solution is to search for third party libraries, many of which rely on platform specific native code making it not an ideal solution for a You.i Engine One React Native project that supports more than iOS and Android.
Carousel support is something that is built-in to You.i Engine One CYIListView. This makes it a prime use case for enhancing the functionality of Facebook React Native by tapping into the FlatList counterpart (a CYIListView) and accessing headers to directly enable carousel support
By implementing the Carousel component, and populating it with a dataset (in this example images from unsplash) we can create a carousel that works on all platforms supported by You.i Engine One.
