add react-strict-animated library #399

vincentriemer · 2025-09-30T20:50:34Z

This introduces a new package to the RSD repo that provides a subset of React Native's API that works on both web and native, and built with integration of react-strict-dom in mind. The native implementation is largely a thin passthrough to the proper Animated API and some settings pre-configured (such as useAnimatedDriver always being enabled).

The web side is a new Animated implementation that ends up being driven by the Web Animations API.

github-actions · 2025-09-30T20:52:23Z

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.

Results	Base	Patch	Ratio

react-strict-dom/dist/web/index.js
· compressed	3,251	3,251	1.00
· minified	10,375	10,375	1.00

react-strict-dom/dist/web/runtime.js
· compressed	1,645	1,645	1.00
· minified	4,131	4,131	1.00

react-strict-dom/dist/native/index.js
· compressed	16,232	16,232	1.00
· minified	62,962	62,962	1.00

react-strict-animated/dist/web/index.js
· compressed		6,896
· minified		23,698

react-strict-animated/dist/native/index.js
· compressed		586
· minified		1,801

github-actions · 2025-09-30T20:56:31Z

workflow: benchmarks/perf (native)

Comparison of performance test results, measured in operations per second. Larger is better.

Results	Base	Patch	Ratio

css.create
· small	1,142,268	1,146,256	1.00	+
· small with units	492,431	494,718	1.00	+
· small with variables	668,880	672,392	1.01	+
· several small	352,288	354,471	1.01	+
· large	202,182	200,826	0.99	-
· large with polyfills	148,034	149,301	1.01	+
· complex	102,183	103,124	1.01	+
· unsupported	211,894	213,841	1.01	+

css.createTheme
· simple theme	228,835	226,694	0.99	-
· polyfill theme	216,403	214,832	0.99	-

css.props
· small	231,931	230,923	1.00	-
· small with units	187,373	189,235	1.01	+
· small with variables	112,861	112,824	1.00	-
· small with variables of units	82,309	82,446	1.00	+
· large	96,865	96,936	1.00	+
· large with polyfills	37,959	38,365	1.01	+
· complex	21,932	22,025	1.00	+
· unsupported	139,215	140,146	1.01	+
· simple merge	160,013	160,071	1.00	+
· wide merge	16,885	16,890	1.00	+
· deep merge	16,605	16,646	1.00	+
· themed merge	32,372	32,301	1.00	-

necolas · 2025-10-01T03:47:20Z

Thanks for bringing the animation library you've made to the OSS project! Want a hand with the build and package parts?

vincentriemer · 2025-10-02T20:21:30Z

Thanks for bringing the animation library you've made to the OSS project! Want a hand with the build and package parts?

So I recreated the build system that's basically exactly like how RSD is built but I'm running into some issues related to the generate-types utility:

As you can tell from the checks the generate-types output contains flow errors
I had to update my implementation to stop using the hook syntax as that broke the generate-types script.
Upon inspection of the typescript output of generate-types it looks like its outputting a bunch of anys because it says that features like React.PropsOf and React.RefOf is unsupported.

vincentriemer · 2025-10-06T16:47:05Z

I've tried digging into how to resolve the type generation issues but haven't had any luck yet :/

necolas · 2025-10-06T17:34:42Z

We can try upgrading the translator package. And if that doesn't work, report the issues to the flow team

Note: still working on the build/package structure so not quite ready for review yet This introduces a new package to the RSD repo that provides a subset of React Native's API that works on both web and native, and built with integration of react-strict-dom in mind. The native implementation is largely a thin passthrough to the proper Animated API and some settings pre-configured (such as `useAnimatedDriver` always being enabled). The web side is a new Animated implementation that ends up being driven by the Web Animations API.

vincentriemer · 2025-10-06T20:56:30Z

Okay I updated the flow-api-translator which didn't seem to do much but I did find a way to reorganize the exports so that there were no more flow errors after building.

necolas

Any ideas on how we might have some unit test coverage for the library?

We could also add a couple of e2e examples in the platform-tests app

necolas · 2025-10-20T23:34:48Z

packages/react-strict-animated/src/web/nodes/AnimatedInterpolation.js

+  let normalizedColor = normalizeColor(input);
+
+  if (normalizedColor != null && typeof normalizedColor === 'object') {
+    throw new Error('PlatformColors are not supported');


This error message probably doesn't make sense in an XPR/RSD/Web context

necolas · 2025-10-20T23:35:21Z

packages/react-strict-animated/src/web/nodes/AnimatedInterpolation.js

+):
+  | { components: [number, number, number, number], isColor: true }
+  | { components: $ReadOnlyArray<number | string>, isColor: false } {
+  let normalizedColor = normalizeColor(input);


Is there any way we could avoid the need for normalizeColor?

necolas · 2025-10-20T23:36:40Z

packages/react-strict-animated/src/native/components.js

+        return (
+          <Animated.View
+            {...nativeProps}
+            style={[nativeProps.style, animatedStyle]}


Can animatedStyle be passed to compat.native so it picks up any relevant polyfills?

necolas · 2025-11-05T22:43:11Z

Hey @vincentriemer, what's the plan here? Did you make any progress on incorporating the viewport scaling polyfill into the animated values?

axyz · 2025-11-12T12:23:48Z

@necolas @vincentriemer great to see progress on cross-platform animations.

Was wondering and trying to understand better how this relates to: #3

having a polyfill for css.keyframes seems more in line with the overall "web first" API of react-strict-dom?
Would it eventually be possible to build polyfill similar to the one for CSS transitions by internally using react-strict-animated?

Also curious about what was touched on this comment: #3 (comment) I assume the Animated vs reanimated topic can be controversial, but finding a way to make the animation library opt-in may help in quicker adoption (I'm guessing here that in the long term Animated on react-native will want to address the issues that reanimated tries to fix?)

The whole JS thread vs UI thread topic is also quite interesting in relation to react-strict-dom: in a way having something like a UI thread is in sync with what happens on web where css animations runs on the gpu.

Probably some of those comments have already been discussed in depth in the RN community, and for sure I lack some context, but I'm trying to gauge the position and vision of RSD on this.

necolas · 2025-11-12T17:55:16Z

This animation library enables different things to CSS keyframes

The plan is for Animated and Reanimated to share the same C++ backend. We use the C++ Animated internally; no need to switch out for Reanimated. That will make its way to OSS eventually

meta-cla bot added the cla signed label Sep 30, 2025

vincentriemer force-pushed the pr399 branch 2 times, most recently from a998fec to cd4733c Compare October 2, 2025 20:04

vincentriemer force-pushed the pr399 branch from cd4733c to 188aae5 Compare October 2, 2025 20:40

vincentriemer changed the title ~~[wip] add react-strict-animated library~~ Add react-strict-animated library Oct 6, 2025

vincentriemer marked this pull request as ready for review October 6, 2025 16:47

vincentriemer requested a review from necolas as a code owner October 6, 2025 16:47

vincentriemer force-pushed the pr399 branch from 188aae5 to 3bc05d2 Compare October 6, 2025 20:55

vincentriemer changed the title ~~Add react-strict-animated library~~ [wip] add react-strict-animated library Oct 6, 2025

vincentriemer changed the title ~~[wip] add react-strict-animated library~~ add react-strict-animated library Oct 6, 2025

necolas reviewed Oct 20, 2025

View reviewed changes

add react-strict-animated library #399

Are you sure you want to change the base?

add react-strict-animated library #399

Conversation

vincentriemer commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/size

Uh oh!

github-actions bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/perf (native)

Uh oh!

necolas commented Oct 1, 2025

Uh oh!

vincentriemer commented Oct 2, 2025

Uh oh!

vincentriemer commented Oct 6, 2025

Uh oh!

necolas commented Oct 6, 2025

Uh oh!

vincentriemer commented Oct 6, 2025

Uh oh!

necolas left a comment

Choose a reason for hiding this comment

Uh oh!

necolas Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

necolas Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

necolas Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

necolas commented Nov 5, 2025

Uh oh!

axyz commented Nov 12, 2025

Uh oh!

necolas commented Nov 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vincentriemer commented Sep 30, 2025 •

edited

Loading

github-actions bot commented Sep 30, 2025 •

edited

Loading

github-actions bot commented Sep 30, 2025 •

edited

Loading