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