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 vladimirnovick
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.
