React Native Animations

Software architect & consultant

Web / Mobile / VR / AR / IoT / AI

GDE, author, engineer

CTO & Co-founder

creating a robust, performant, and feature-rich online conferencing experience

Why do we need to Animate?

Why do we need to Animate?

  • Make your app stand out
  • Provide visual hints
  • Define "story" of your app
  • Reduce cognitive load
  • Reduce cognitive friction

Cognitive load

The total amount of mental effort that is required to complete a task involving processing of information.

Cognitive friction

Cognitive friction occurs when a user is confronted with an interface that appears to be intuitive but delivers unexpected results

So how do animations work?

Let's get into React Native architecture first

React

JavaScript

JSC

Bridge

Shadow tree

JSON

Native Modules

Native

Threading model

  • UIManager Thread - Responsible for the native side.
    • The main thread where app is running.
    • Has access to UI
  • JS Thread - Run all bundled main.bundle.js file
  • Shadow Thread - Does the whole recalculation
  • Native modules thread - platform apis

Execution flow

Start

Main Thread

load .js bundles and send to JS thread

React

Reconciler generates new VDOM layout

JS Thread

layout calculations

using Yoga

UI

updates

Shadow thread

Native modules

Debugging

Let's get into coding!

The Future is already here

 

Thank you

@VladimirNovick

 

React Native Animations

By Vladimir Novick

React Native Animations

Everything in the world is animated and animating our apps is a key to make them look compelling, "telling a story" of your app as well as reducing cognitive load for your users. Animations can be as simple as bouncing buttons or complex like full screen transitions, gesture based animations and multi layered animations. Not only animations sometimes are not that straightforward to implement, they have to look "realistic" as well as to be performant. In this workshop we will get from the very basics of creating compelling animations in React Native to complex gesture animations, custom transitions, purely native animations and so on. We will discuss performance bottlenecks and work around them to get 60FPS animations. This workshop is targeted towards developers already familiar with the basics of React Native and want to level up their knowledge understanding all the intricacies of animating in React Native.

  • 1,121