Skip to content

Commit 5f15ea8

Browse files
zeyapfacebook-github-bot
authored andcommitted
Document the Native Animated architecture (#58106)
Summary: Document the cross-platform C++ implementation of Native Animated, including its purpose, execution model, core components, prop application paths, and relationship with the shared Animation Backend. Changelog: [Internal] ___ Differential Revision: D116797721
1 parent a2f0a43 commit 5f15ea8

2 files changed

Lines changed: 101 additions & 0 deletions

File tree

__docs__/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ TODO: Explain the different components of React Native at a high level.
5050
- Layout
5151
- Mounting
5252
- [Animation Backend](../packages/react-native/ReactCommon/react/renderer/animationbackend/__docs__/AnimationBackend.md)
53+
- [Native Animated](../packages/react-native/ReactCommon/react/renderer/animated/__docs__/NativeAnimated.md)
5354
- Native Modules / TurboModules
5455
- JS Runtime
5556
- [Event Loop](../packages/react-native/ReactCommon/react/renderer/runtimescheduler/__docs__/README.md)
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Native Animated
2+
3+
[🏠 Home](../../../../../../../__docs__/README.md)
4+
5+
Native Animated is the cross-platform C++ native driver for React Native's
6+
`Animated` API. The JavaScript library sends a graph of values, operations,
7+
styles, and transforms through the `NativeAnimatedModule` TurboModule. Native
8+
Animated evaluates that graph off the JavaScript thread and applies the
9+
resulting props to views.
10+
11+
The main purpose of this C++ implementation is to let platforms share the graph
12+
and driver logic instead of maintaining separate native implementations. It
13+
integrates Native Animated with the shared
14+
[Animation Backend](../../animationbackend/__docs__/AnimationBackend.md), which
15+
updates layout and non-layout props through Fabric and keeps those updates
16+
synchronized with React commits.
17+
18+
## 🚀 Usage
19+
20+
Application code uses the public JavaScript `Animated` API rather than this
21+
package directly. A typical animation:
22+
23+
1. Creates and connects animated nodes.
24+
2. Starts a time-based animation or attaches an event mapping.
25+
3. Evaluates affected nodes each frame, applies props, and invokes the
26+
completion callback.
27+
28+
JavaScript batches graph operations with `startOperationBatch` and
29+
`finishOperationBatch` so they are applied together on the native side.
30+
`queueAndExecuteBatchedOperations` is specific to the legacy Android
31+
implementation and is not implemented by this C++ module.
32+
33+
## 📐 Design
34+
35+
Native Animated maintains a directed acyclic graph. Animation drivers and native
36+
events update value nodes, changes propagate through dependent nodes, and
37+
`PropsAnimatedNode` collects the props to apply to a view. Dirty tracking limits
38+
each frame to nodes affected by changed values.
39+
40+
### Core components
41+
42+
- `AnimatedModule` (`AnimatedModule.h`) implements the `NativeAnimatedModule`
43+
spec. It buffers graph operations from JavaScript and schedules them on the
44+
render thread.
45+
- `NativeAnimatedNodesManager` (`NativeAnimatedNodesManager.h`) owns the graph,
46+
animation drivers, and event drivers. It evaluates updates, schedules prop
47+
commits, and invokes listeners and completion callbacks.
48+
- `NativeAnimatedNodesManagerProvider` (`NativeAnimatedNodesManagerProvider.h`)
49+
creates one shared manager per runtime, connects it to `UIManager`, selects
50+
the prop-application path, and registers native event delivery.
51+
52+
### Animated nodes
53+
54+
All nodes derive from `AnimatedNode` (`nodes/AnimatedNode.h`). The main groups
55+
are:
56+
57+
- `ValueAnimatedNode`, which stores the scalar values written by animations and
58+
events.
59+
- Operator, interpolation, and color nodes, which derive values from other
60+
nodes.
61+
- `StyleAnimatedNode`, `TransformAnimatedNode`, and `ObjectAnimatedNode`, which
62+
assemble structured output.
63+
- `TrackingAnimatedNode`, which follows another value through an animation.
64+
- `PropsAnimatedNode`, which collects output for a view or `ShadowNodeFamily`.
65+
66+
### Animation and event drivers
67+
68+
Drivers derived from `AnimationDriver` (`drivers/AnimationDriver.h`) update a
69+
single `ValueAnimatedNode` on each frame. Native Animated supports frame-based
70+
timing, spring, and decay drivers.
71+
72+
`EventAnimationDriver` (`event_drivers/EventAnimationDriver.h`) maps a path in a
73+
native event payload, such as `contentOffset.y`, to a value node. This lets
74+
events drive the graph without a JavaScript round trip.
75+
76+
### Applying props
77+
78+
Native Animated supports two prop-application paths:
79+
80+
- The default path directly updates non-layout props and uses a Fabric commit
81+
for layout props. `MergedValueDispatcher` coalesces updates, while
82+
`AnimatedMountingOverrideDelegate` prevents React commits from overwriting
83+
animated values.
84+
- The shared Animation Backend path delegates per-frame mutations to the
85+
[Animation Backend](../../animationbackend/__docs__/AnimationBackend.md),
86+
which applies them and coordinates with React commits.
87+
88+
### Threading
89+
90+
The JavaScript thread only buffers TurboModule operations. Graph mutation,
91+
driver updates, evaluation, and prop commits run on the render thread using the
92+
platform frame callback. The manager uses locks for state shared between the two
93+
threads.
94+
95+
## 🔗 Relationships
96+
97+
- The JavaScript `Animated` library drives Native Animated through the
98+
`NativeAnimatedModule` TurboModule.
99+
- Native Animated can delegate prop application to the shared
100+
[Animation Backend](../../animationbackend/__docs__/AnimationBackend.md).

0 commit comments

Comments
 (0)