Creating You.i Engine One Native Components with AE Workflow
What is a Native Component?
A Native Component is an implementation of a Shadow View (read refresh on what Shadow Views are here). It contains a yoga node that is used in React Native JSX (the JSX component) and creates a counterpart view that is an Element understood by You.Engine One. It is responsible for mapping the properties of one to the other, so when you work with the yoga node in JSX the element within You.i Engine One that is rendered is updated accordingly.

Why would we need our own Native Component?
If your project uses the After Effects Workflow in order to create compositions and export them for use within React Native JSX, you may note that the number of available Components available for use is smaller than the number of Classes supported by You.i Engine One SDK.
The most commonly used Native Components made available in @youi/react-native-youi cover most of the use cases you may encounter when building an application with the AE Workflow, but there are situations where your application could benefit from an SDK Element that is not available in the RN layer.
Building a Native Component for a You.i Engine Component that is not currently exposed to RN
A good example of a specialized class found in the engine that is not exposed to React Native is CYIScrollingTextView. This is a Class whose functionality is to present a way of showing large amounts of text in a stylized fashion (with the design work being done in After Effects) while taking advantage of the streaming capabilities of CYIListView under the hood.

In order to interact with this component in a simple way familiar to React Native developers, a custom Native Component allows the creation of a JSX Component (yoga node) and definition of properties for a specific use case. In this case, a template is provided to be used for the list items (each paragraph of text is represented by a list item) and the text to be set.
Creating our Template in After Effects
For the You.i Engine One CYIListView Element that will be linked to the above JSX Component, an After Effects template will be required to construct it. Looking at the header file for YiScrollingTextView.h, the recommended structure of the After Effects Composition is revealed.

At the root is a simple Container with a CYIScrollingTextView child.
This parent container is a requirement for any Native Component. It is what will be presented as the source for a <Composition /> Component and it will be the root of the scene tree that will be referenced by the Native Component within.
This holds true for any of the AE Workflow components. If you want to use the power of the particular type (ButtonRef, ImageRef, ViewRef), they need to be wrapped in a container to act as the source of the scene tree.
<Composition source="Source_ParentContainer">
<ButtonRef name="ChildName" onPress={ () => ... } />
</Composition>The main root composition is what is going to wrap the CYIScrollingTextView Native Component.

The CYIScrollingTextView child layer of the root container has a few layers itself. The first is the visual representation of the list, in this case the solid blue layer that will represent the scroll bar. The second layer present, named Text-Container, is the template that will represent a single paragraph of text. The name is not important, but it needs to be tracked as it will be referenced explicitly as a prop to the Native Component.

Within the the Text-Container layer is placeholder text that will render the list item contents (the paragraph that is using this list item).

A CYIScrollingTextView element from You.i Engine One can now be constructed using the After Effects template described above. As mentioned, the root container will be used as the composition source of the Native Component.
<Composition source="File_ScrollingTextViewContainer">
{ // create JSX Component to represent Native Component here }</Composition>Within that Composition, a JSX Component will be used to represent a Native Component. The properties that we provide this JSX Component are what will be linked to our You.i Engine One Element.
We can create a JSX Component mock structure that will represent our needs pretty quickly:
<Composition source="File_ScrollingTextViewContainer">
<NativeScrollingTextView
name="Scrolling-Text"
template="File_Text-Container"
text={text_to_display}
/>
</Composition>name represents the layer name for the CYIScrollingTextView composition in the After Effects template, the child of the root container.
template represents the source of the list item to be used for each paragraph of text, Text-Container in the above sample.
text represents the large chunk of text to be displayed.
Before this JSX Component can be created, a representative Native Component must exist to receive the properties, create the appropriate CYIScrollingListView Counterpart, and map the above mocked properties to the You.i Engine One Element.
There is a lot of code to consume here, but it follows a common structure. (See the full gist here)
Where properties are defined and received from the JSX Component
Properties that a Native Component receives are defined with an appropriate type.
This is important as it allows the exact definition of properties to be received, and demonstrates a way to store them for use with our CYIScrollingTextView counterpart. In this particular example, the properties are stored in a struct so that we can control the order in which they are applied at a later time (as CYIScrollingTextView has some restrictions on the order of which data is passed to it during its creation).
The Native Component now handles properties from JSX and stores them in an appropriate struct for later use. The Counterpart can now be created and methods are written to retrieve it as the appropriate type.
As this is a Shadow View for an After Effects composition, the node is not created programmatically, but instead the node is found in the existing scene tree from the root composition source. Remember that this Native Component is wrapped in a Composition, and a name was provided to reference it within the scene tree, Scrolling-Text.
The last action is to take the properties stored and apply them to the counterpart as appropriate.
The counterpart view can now be populated with properties that are provided to the Native Components JSX Component (yoga node). We can use this JSX Component in our React Native app, within a Composition that contains it.
From this implementation there are avenues where we can go beyond the basic implementation of a counterpart view, for example adding a ScrollListener to the counterpart to listen for when the end of the list is reached so we can emit a signal to our JSX component to react to.
If You.i Engine One SDK has a component that you want to access in your React Native application code, it’s possible with a custom Native Module.
Further Reading: View the full code above in this gist
