Implementing Screen Transitions on You.i Engine One With React Navigation
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, React Native, and After Effects
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.
Support for React Navigation on all You.i Engine One platforms
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 Stack Navigator maintains the history and state of the previous screen.
A Switch Navigator may be the right tool when dealing with authentication flow; when the user logs in we want to destroy the history of the flow as we have no need for it.
A Stack Navigator is useful for typical user paths that may be followed when navigating through an application and the user expects to return to the previous screen with the state intact.
Which version of React Navigation should I use?
note: An earlier version of this article recommended react-navigation@2.18.3. This is because (at the time of this writing) it is the last version that has a pure javascript implementation. Versions 3.0+, including the latest stable version of 4.0.10, have native dependencies and have a little bit more complexity (as noted below) to account for the breadth of platforms supported by You.i Engine One.
When choosing a third party library like React Navigation for use with You.i Engine One, it is important to note if there are any native dependencies. This is because React Native with You.i Engine One supports platforms that the library authors may not have initially intended to support (PlayStation4, XboxOne, Linux, or Roku Cloud for example).
Such a library may require a Native Module or Native Component in order to interact with iOS or Android platform logic. These implementations need to be replaced with You.i Engine One Modules or Components that take advantage of the capabilities of the Engine that extend to all platforms supported. Common modules core to React Native already ship with You.i Engine One, but there are some cases where third party native modules can be implemented application side.
For React Navigation, version 3.0 was the first to require a native dependency, and that continues to the current stable release 4.0.10. The last version with a pure javascript implementation was 2.18.3, which works out of the box without any native module or component customization (but is no longer officially supported by the React Navigation team).
In order to use the latest stable release, we need to address the native dependencies that are relied upon, or omit certain functionality that exploits them. The primary native module that is heavily utilized in a basic stack navigator is react-native-gestures-handler. By creating a stubbed out implementation and registering it with our React Native Bridge, we can implement this native functionality for each platform if it makes sense to do so.
The second item to address is the usage of a platform specific Native Component that is used by the default header implementation on iOS and Android. In the following sections, we will specify header: null to avoid using this, as it only makes sense for iOS and Android and not the other platforms supported (the library itself does a more basic implementation for web, but understandably did not account for other native platforms).
note: There may be more advanced functionality of React Navigation that utilizes native modules or components that need to be implemented like the above example, however this is not required for our basic integration of the library where the After Effects Workflow is utilized for complex animations and transitions.
Basic support
A Stack Navigator provides basic functionality without any customization in its most basic form. The following is an implementation of a Stack with two screens.
The default transition behaviour is a sliding animation from the right side.
Custom Transitions
React Navigation provides a way for a developer to install their own transition configuration and logic, usually by interpolating input data to some properties of an Animated.View.
Above is a sample transition from the React Navigation documentation that produces a card sliding up effect. With support for the various Animated and Easing packages, You.i Engine One applications are able to support these custom transitions.
Custom transitions can be a useful tool when looking to create an experience that is consistent and guides the user through expected flows (settings cards in Android will usually be a card sliding up).
When developing an application that not only runs on handsets but also on 10-foot platforms (tvOS, AndroidTV, Roku Cloud, PS4, Xbox One), the design may call for a more immersive experience — A design where subtle animations and custom behaviour brings the experience to life.
For these more immersive designs, just having custom transitions for set patterns may not be enough. What may be required is unique transitions depending on the context and intent of the user at that moment. While possible with a collection of transition configurations and animations on individual Components, the result is a very large amount of code written by a developer with the designers best intentions in mind.
Depending on the complexity, this code can quickly become hard to understand, and more importantly, hard to maintain.
Designer Control with After Effects Animations
By leveraging After Effects to allow designers to build transitions for various contexts and have them invoked through code, the complexity of managing the animations as a developer is removed and instead the designer is positioned to make adjustments as they see fit in After Effects.
Transitions for full screen After Effects Compositions
With an application that utilizes full screen After Effects Compositions (the entire screen is designed in After Effects), the complexity of screen transitions can be removed entirely if we disable all transitions from a stack navigator.
This produces an almost jarring experience as the screens simply flip between themselves when the user interacts with them.
A designer can take their Composition, and produce In and Out timelines that represent the full screen experience.
With In and Out timelines defined screens, the tricky part of animations in the navigation flow can be put in the hands of the designer.
In order to accomplish the above, a flow needs to be established with the absence of the Navigator configuration.
- On Lander screen loaded, play Lander Screen
Inanimation. - When photo in grid selected, play Lander Screen
Outanimation and inform Navigator of intention to navigate to the Photo Details screen. - When Photo Details Screen loads, play Photo Details Screen
Inanimation. - When back is selected, play Photo Details Screen
Outanimation and then information Navigator of intention topop()back to previous screen. - When Lander screen is back in focus, play
Inanimation to bring it back visually.
While the code to play these respective timelines is as simple as referencing a TimelineRef, calling play, and awaiting a callback that it has completed, there are a few strategies recommended for creating maintainable code when working with multiple timelines and screen navigation. The goal is to simplify code and push the complexity to After Effects.
Take control of your users intentions
The first issue to be aware of is an anti-pattern that can emerge when playing timelines prior to navigating to another screen. Due to the timeline having a callback , the temptation to store the intention of the user until the animation is complete presents itself.
The playing of timelines is an asynchronous event with a callback when completed. The trap that may be fallen into would be attempting to store what the user’s intention were prior to the transition timeline playing (not just the intention but any payload of data). This can result in some spaghetti code to check and see what the intent was, how to handle it, and how to protect against it being incorrect.
Wrapping a TimelineRef in a promise is a great way to provide a way to perform actions at the result of the invoked timeline. Example code is the easiest way to see this in action referencing a new component that provides this functionality.
The intention of the user is obtained when then the promise resolves, and the navigation event can occur with much less code and more clear intentions.
Listening to navigation life cycle events to restore state
As the screen was transitioned out, it was left in a state that it will remain in until its counter In animation is played again. This means when the navigation stack has pop() invoked and the previous page is displayed, it needs to be put back into a state where it is visible.
React Navigation provides signals to indicate that a screen has received focus or blur, and these can be used to play the appropriate timeline.
componentDidMount() {
this.props.navigation.addListener('didFocus', () => {
// play in timeline for this component as it has received focus
});
}Playing the In timeline again will not reset the state of your screen in terms of the user’s interactions. If they have have been scrolling down a list they will still be where they left off. The In timeline simply applies properties to the components such as opacity and position.
Hybrid Transitions for a Hybrid Application
A huge benefit of writing applications with You.i Engine One is the flexibility to chose how your screens are structured, leveraging both React Native libraries and After Effects Workflow. For applications written in a hybrid manner, where Facebook React Native Views and frameworks such as FlexBox are used for layout, while After Effects Compositions are used for list items or other smaller components on screen, we can combine the strategies discussed to achieve the design aspirations while limiting the amount of animations written and maintained in code.
By leveraging a custom transition to slide a card in and then play an animation as designed and implemented by a designer, a nice balance can be achieved where the developer may be responsible for more consistent animations, such as a slide in, while the designer can be responsible for how the elements of a screen come together once they are to be shown.
The flexibility of You.i Engine One provides multiple paths to success, where your designs can help dictate the approach taken.
