This post will walk you through the steps to create a Native View for react-native-youi library.

How React Native You.i Renders?

Differently to React Native that uses each platform's UI widgets, You.i has its own rendering engine. And it provides a React Native binding for us to leverage its features.

In order to render your JSX component tree, it keeps in memory a representation of it nicknamed Shadow Tree. It then renders its widgets based on the Shadow Tree you constructed via React Native.

The Shadow Tree lives in the main thread controlled in C++. Its nodes are composed of Counterparts. The Counterparts are JSX Components equivalents to the You.i Rendering Engine. For example, a React Native is represented by a CYISceneView Counterpart.

The React Native Component Tree:

Results in a Shadow Tree:

Hence we need to create a Shadow Node to create a custom native view.