A few months ago, we at G2i had the opportunity to work on a client project using something I’ve never seen before. We were told that we would be using React Native to create a truly cross-platform application. As an RN engineer, I thought… sure, Android and iOS. But I was shocked when I heard it was also meant for Fire TVs, Roku devices, and even PlayStation, Xbox, and pretty much anything else you can plug into a TV.

My first thought was, “Oh boy this is going to be a native integration nightmare.” However, to our surprise, it really wasn’t…

Let me introduce to you the You.i Engine One product. A video experience framework that delivers cross-platform user interfaces from a single codebase. Made by the awesome fellows at You.i TV.
‍

You.i Engine One is a truly multi-platform solution which lets you build and run your app from a single codebase. And as you may guess. Not so long ago, they just released a React Native bridge. Giving us React Native developers, the power to reach those platforms. Isn’t that just amazing?

Wanna know how it works? Great, stick around and check out how this whole thing looks and feels.

Overview

In a nutshell, you can think of You.i Engine being responsible for ultimately rendering your components natively into all the target platforms. It does this by taking your components, passing them through the RN component tree and then rendering them natively on its Engine which then runs on each platform.

How does it work?

There are two main ways to work with You.i Engine One: By using Vanilla React Native components or by using Adobe After Effects Compositions (yeah I know, you must be wondering what am I talking about… just keep reading it will all make sense, I promise).

Vanilla React Native

‍This is what we are all used to. We use JSX to write our components and probably use RN’s StyleSheet (or Styled Components if that is your thing) to style them. And as many of us have done it, if we want to create an animated UX… well, we have to use RN’s Animated.

In my own experience, ReactNative.Animated is a great API. However, mastering it and fluidly adjusting it to changes on the required animations isn’t as powerful as some other tools available. Here is where the next way of working with You.i Engine One really shines.

Adobe After Effects Compositions

‍On this approach, we are able to work along motion designers, where they basically craft and animate all the visuals for us. All we are left to do is wrap and reference the visuals around React components on which we will build the app logic around.

Digging deeper on Compositions and Ref Components

This workflow is unique to You.i Engine One. Honestly, it takes a bit to get used to, but once you get it, you’d be thankful for how much time it takes away from having to animate and style all the intricate aspects of the UI/UX by hand.

After Effects (AE) is a video editing software. It is used as a motion graphics tool to create layouts and animate content. You.i Engine One extends After Effects capabilities and produce data files. AE layout and timeline data are then exported and consumed by You.i Engine One at runtime.

How does it look?

‍Luckily the team at You.i TV have put together a great guide on how to create a new You.i Engine One React Native app. After some dependencies and local setup, you’ll eventually be running a:

The above command, as we might expect, will generate the basic scaffolding to get us started.
‍

On the image above, there are some folders I’d like to point out:

• app: here is where our javascript and JSX files go. Pretty much like in any other CRA-generated application.
• youi/AE: inside the youi folder, we have the AE folder. This is where all the visuals (layouts and timelines) go after the motion designer has exported them from Adobe After Effects. Most of the time we, as React developers, won’t be looking at this folder often. For all we know, we could (and should) treat that folder as an assets folder. We just need to make sure that whatever we will be later referencing by code is in fact on that folder.
• youi/build: this is where each platform generated code goes. For instance, on the Android platform, we will have a Gradle script to help us with the heavy lifting of building and installing on Android-powered devices (like Android phones, tablets, and even TVs like the Amazon Fire Stick).

Referencing After Effects Compositions

As we saw before, running create-youi-react-native-app will create a working application for us. After building it for a target platform, we will be greeted with the following app:

On this simple example, we can already appreciate the power of the Engine. There is no React.Animated code in this, and you can see how smooth those animations are. Let’s break down how it is referenced.

Compositions

‍You can think of compositions as a root component for a whole layout. In essence, it is the canvas on which the rest of the AE components would be placed on. To reference a composition, all you need to do is import the Composition module, create an instance, and add the proper name prop like this:

ViewRefs

‍ViewRefs are similar to React Native Views. They serve as a container to group other elements together and apply certain styling or animations to the group as a whole.

ImageRefs, ButtonRefs and TextRefs

‍
If you are getting the hang of it, References are just like any other React Component. Import them and load them with proper props. Therefore, in order to make the previous sample app, all we need to do is reference an image, some text, and two buttons for going back and forth.

For a complete list of all available references take a look at the You.i RN ref components list.

Animations and Timelines

So far we’ve been covering mostly referencing components. But what about animations?

With You.i Engine One, instead of using React.Animated, we are introduced to the concept of timelines. Each timeline is an animation of one or a group of references which can be played at will at any given point of the execution. All we need to do is reference the timeline and then call the “.play()” method on it.

On the above example, we can see how as soon as we move from one item to the other, the whole UI comes to life. The button gets pushed, which drops a nice shadow. The previous cover image scrolls down while the next one scrolls up. While all that is happening, the background also changes smoothly.

Believe it or not, this is all possible by simply referencing the Timeline like this:

TimelinesRefs are extremely powerful. It is what makes working with You.i Engine One a breeze when compared to Vanilla React.Animated. After referencing the Timeline, using a TimelineRef, and getting the instance reference at its onLoad hook, we get access to all these instance methods:

• start: plays the animation from the start.
• pause: we can actually use this method to pause the animation at any given time.
• play: as the name says, it plays the animation, resuming it from where we left it.
• stop: halts the animation and moves it back to the beginning.
• seek: yes, we can actually select at which point in time we want the animation to be played onwards.

Moreover, they actually provide many hooks to control the animation like:

• onComplete: if we want to do something as soon as the animation has been played, useful for chaining animations sequentially.
• onPlay: do something as soon as the animation started, useful to execute animations on parallel.
• onPaused: to do something when the animation just paused.

Wrapping it all up

You.i Engine One, when paired with React Native, gives us React developers the freedom to deploy our applications in many platforms. Many that were simply not reachable for us. While also providing a new toolset to make those apps as dynamic and rich as our users might expect.

From a React developer point of view, the process — although a bit unfamiliar at first — is fairly simple and straightforward. After a couple of days of understanding how compositions and timelines work, any React developer could be saving hundreds of hours of UI/UX work by just using the You.i Engine One. All while maintaining just a single codebase for all platforms. A great selling proposition for any time-starved team looking to reach a broader audience as efficiently as possible.

Our journey with You.i Engine One

We at G2i are constantly building great React Native backed products for our clients. While doing so, it is pretty common for us to reach and push the boundaries of what it is possible in React Native.

You.i Engine One is a great example of that. It is really pushing React Native forward to fairly unexplored territory. While also making a great product out of it.

We are currently building an amazing application as part of the You.i TV team, and we are eager to share our experiences once this app hits production. I’ll be updating this post to reference our upcoming findings and formal case study, to share our experiences. In the meantime feel free to read along G2i’s blog to know more about us.

Originally published at www.youi.tv on December 13, 2018.

‍