Managing shared data across multiple components can be a challenge for applications. Across many apps I have worked on, I have seen variations or combinations of prop-drilling, use of redux, and publish-subscribe models shared between components. All of the above get the job done but can potentially suffer performance hits as re-renders traverse the tree in order to update the individual components interested in the data.
Recoil is a small library provided by Facebook that attempts to solve specific use cases with regards to sharing data across components that they may not be related in the React tree.
This article explains how that abstraction layer works, and how the platform players are rendered where you want them to be rendered to get the best user experience possible.
Each platform supported by You.i Engine One comes with a native player implementation that works for the platform being built. Typically this is the de-facto standard for those platforms if you were to build a native app in that platform’s framework. Two common platforms that demonstrate this integration are Apple platforms and Android…
You.i Engine One is a cross-platform SDK and rendering engine that utilizes React Native and Adobe After Effects to create single code base applications across a large number of supported platforms.
Since the Engine is responsible for rendering, we need to discuss how your application is rendered when you write your application, and ways that you can proactively prevent performance hiccups by being aware of a concept called Overdraw.
You.i Engine One renders using the Painter’s Algorithm. This means it draws one layer at a time, starting at the back and moving towards the front. The result is that some areas of the screen, or canvas, are drawn over multiple times. When this happens, we say that this area has been overdrawn. …
When building an application that will ultimately be rendered by You.i Engine One, the JSX (Facebook Components or After Effects Compositions) that you create will ultimately be represented as a Scene Tree. This Scene Tree is a collection of nodes with relationships (parent-child-sibling) to each other that represent the structure of your application.
When constructing a Composition in After Effects, the relationships are defined by which compositions are nested in other compositions.
When writing Facebook React Native applications, a typical pattern is to use the Platform to split out code you want to isolate to either iOS or Android — Facebook documentation has great information on it here. In a similar fashion to both iOS and Android, which are represented by
android respectively, You.i Engine One applications identify (as of 5.9+) as the platform
youi. Prior to 5.9, You.i applications identified as
All platforms supported by You.i Engine One will report as
youiwhen building with the You.i Engine One Solution.
This means that when using third party native modules, or even code that you write yourself, if a code path is decided upon based on Platform.OS, it will choose the path of
youi. If that path does not exist, it will follow whatever default behaviour has been defined. …
A major value gained by using You.i Engine One is creating a single codebase to service all supported platforms. The reason this is possible is because You.i Engine One is a rendering engine, written in C++, that operates cross-platform.
Platform specific code that does exist is presented through abstractions. These abstractions allow the code that you write to remain platform agnostic. With the introduction of React Native to the You.i Engine One stack, developers can also write JSX code treating the engine as a single platform.
This article will broach the subject of writing platform specific code for those situations where you have no choice: Native Modules that require specific platform SDK integrations. …
All JSX Components written in a React Native application are ultimately translated to platform level nodes understood by the underlying rendering engine. The representation of these nodes can be described as a Scene Tree. It contains the relationships and contextual information needed by the engine to render the application.
This article will describe how to minimize the changes on the scene tree, which may be expensive in certain situations on low end devices, in order to provide the best user experience possible while managing memory constraints.
A common pattern when building an application in either ReactJS or React Native is the use of Conditional Rendering to quickly change the stateful representation of a screen. …
This article will discuss how to bring React Navigation into your You.i Engine One application and how to customize the experience to take advantage of animation capabilities of the After Effects Workflow.
You.i Engine One is a cross-platform rendering engine that supports building apps using React Native and After Effects. For a refresher on how these three technologies come together check out this article on the design and development approaches available to you when building a You.i Engine One React Native application.
The React Navigation library is a great way to manage navigation within your application by providing tools to create, manage, and customize Switch or Stack Navigators. If you are unfamiliar with them, a Switch Navigator works on the principle that only one screen will be shown at a time . The history and state of the previous screen will be lost. …
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.
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 …
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.
A Native Module is a communication bridge between JS to specific C++ code. …