react-native-reanimated 4.7.0

Reanimated - 4.7.0

on Node.js NPM

Key changes

New layout animations engine is the default

Layout animations now run on the new engine by default.

If the new engine causes a regression in your app, enable the USE_LEGACY_LAYOUT_ANIMATIONS_PROXY feature flag to go back to the previous engine, and please report an issue. The previous engine does not support shared element transitions, so you cannot enable this flag together with ENABLE_SHARED_ELEMENT_TRANSITIONS.

• feat(Reanimated): make light-tree based layout animations proxy default by @pawicao in #10423
• fix(Reanimated): carry registry values in Reanimated commits by @pawicao in #10416
• refactor(LayoutAnimations): use one proxy instance per surface by @bartlomiejbloniarz in #10368
• refactor(LayoutAnimations): centralize animation lifecycle and UI operations by @bartlomiejbloniarz in #10369
• refactor(LayoutAnimations): make shared container ownership explicit by @bartlomiejbloniarz in #10370
• fix(LayoutAnimations): separate progress transition states by @bartlomiejbloniarz in #10371
• fix(LayoutAnimations): update Android view hierarchy only during JS pulls by @bartlomiejbloniarz in #10372
• fix(LayoutAnimations): serialize config updates with pullTransaction by @bartlomiejbloniarz in #10373
• fix(Reanimated): keep exiting views at their host position in experimental LA proxy by @pawicao in #10392
• fix(reanimated): skip preserveMountedTags_ on pull model by @piaskowyk in #10481
• fix(LayoutAnimations): keep animated views on their final layout after config or order changes by @bartlomiejbloniarz in #10537
• fix(LayoutAnimations): properly animate reparented views by @bartlomiejbloniarz in #10538
• fix(LayoutAnimations): skip exiting animations when a surface is torn down in the light tree proxy by @bartlomiejbloniarz in #10586
• fix(LayoutAnimations): don't crash when a view is flattened while one of its children is removed by @bartlomiejbloniarz in #10628
• perf(LayoutAnimations): skip the Android raw props merge when a commit keeps the props object by @pawicao in #10566
• perf(LayoutAnimations): merge the Android raw props of a light node only when it is read by @pawicao in #10570
• fix(LayoutAnimations): stop crossing the scale axes in the web SequencedTransition by @dennytosp in #10384
• fix(LayoutAnimations): walk web keyframe offsets in order when shifting easings by @dennytosp in #10386

Shared element transitions fixes

This release fixes more shared element transition bugs and brings the feature closer to a stable release. The feature is still experimental. Enable it with the ENABLE_SHARED_ELEMENT_TRANSITIONS feature flag.

• fix(Reanimated): publish react-native.config.js by @dennytosp in #10375
• fix(SharedElementTransitions): make native gestures work inside SharedTransitionBoundary on Android by @bartlomiejbloniarz in #10430
• feat(SET): route synchronous prop updates to the light tree by @pawicao in #10522
• fix(Reanimated): keep transitioning views hidden across commits by @pawicao in #10425
• fix(SET): start a transition from the frame of a running layout animation by @pawicao in #10556
• Fix shared transition boundaries blocking sibling touches by @bartlomiejbloniarz in #10600
• Fix Android shared transitions restoring stale colors by @bartlomiejbloniarz in #10601
• fix: resolve a percent translate with the size of its owner in shared element transitions by @pawicao in #10617

backgroundImage in animated styles

useAnimatedStyle now supports backgroundImage. You can give linear and radial gradients as objects or as CSS strings. Reanimated processes them on the UI thread.

• feat(rnre): background image support (useAnimatedStyle) by @tshmieldev in #10486
• fix(Reanimated): unprocessor for backgroundImage by @tshmieldev in #10542
• fix(CSS): validate gradient color stops before they reach the renderer by @MatiPl01 in #10589

More CSS transition properties on the Android platform path

With the ANDROID_CSS_PLATFORM_TRANSITIONS feature flag on, CSS transitions of backgroundColor, borderColor, numeric borderRadius and shadowColor (Android 9 and newer) now run on the Android platform instead of on the Reanimated animation loop. Before, only opacity did.

The flag is experimental and off by default.

• feat: Animate color and radius CSS transitions on the Android platform path by @MatiPl01 in #10310
• feat(CSS): route shadowColor transitions to the Android platform path by @MatiPl01 in #10547
• fix: honor slow animations on the CSS platform transition paths by @MatiPl01 in #10548
• fix(CSS): resume shadowOffset from its in-flight value when it leaves the platform path by @MatiPl01 in #10564
• fix(CSS): keep borderWidth transitions on the loop on iOS by @MatiPl01 in #10569
• fix: revert a property removed from transitionProperty to the committed style on Android by @MatiPl01 in #10614
• docs: state since which version each CSS transition property is routed to the platform by @MatiPl01 in #10549

React Native 0.88 support

Reanimated 4.7 supports React Native 0.86 – 0.88 and pairs with Worklets 0.13.x. We test React Native 0.88 with 0.88.0-rc.1. Reanimated 4.7 no longer supports React Native 0.83, 0.84 and 0.85. See the compatibility table.

• chore: upgrade React Native to 0.88.0-rc.1 by @pawicao in #10582
• fix: add fontVariationSettings to style properties config by @tjzel in #10239
• fix: nightly TypeScript compatibility job by @tjzel in #10354

Breaking changes

• The new layout animations engine is the default. See above.

• Mutables always use Synchronizable state. The USE_SYNCHRONIZABLE_FOR_MUTABLES feature flag is gone.

• AnimatedRefOnUI is now a Shareable that you read with .value, not a function that you call. AnimatedRefOnJS is now AnimatedRefOnRN. measure on an unmounted ref now returns null and shows a warning.

• feat(Reanimated): always use Synchronizable for mutables by @tjzel in #10298

• refactor(Reanimated): back AnimatedRef with a Shareable instead of a handle by @tjzel in #10413

Other changes

• feat: use Synchronizable Fixed for mutables by @tjzel in #10393
• fix: prevent sticky headers from freezing animated styles by @ngocdevv in #10389
• fix: look up named colors as own properties by @dennytosp in #10387
• fix(CSS): tolerate leading whitespace in a transform string by @dennytosp in #10388
• fix(CSS): clamp linear() input progress at both ends of the point list by @dennytosp in #10380
• fix(CSS): parse fractional millisecond time values by @dennytosp in #10381
• fix: treat an empty animationName array as no animation by @MatiPl01 in #10432
• fix: enable JavaScript fallback on Windows by @hsjoberg in #10117
• fix(animation): reset IN_STYLE_UPDATER even when a style updater throws by @alexey-khatskelevich in #10445
• fix: restore Jest support in consumer projects by @huextrat in #10377
• fix: crash when obtaining props of an unmounted view in runtime tests by @tjzel in #10443
• feat(rnre+worklets): add support for SPM by @kacperzolkiewski in #10472
• fix(metro): use the public MetroConfig type export by @sneakykiwi in #10454
• fix(CSS): leave the second component at zero for single-argument translate and skew by @dennytosp in #10385
• fix(CSS): accept the kebab-case filter function names by @dennytosp in #10383
• fix(CSS): repeat a short animation-delay list on web by @dennytosp in #10442
• feat(reanimated): add custom callback to logger by @douglowder in #10482
• fix(iOS): report an error on a failed reload instead of installing a dummy proxy by @tjzel in #10508
• fix(Reanimated): trim padded string values in the props builder by @MatiPl01 in #10422
• fix(CSS): restore styles after cancelling animation by @MatiPl01 in #10528
• chore(rnre): Warn once per hook caller for native dependencies by @tshmieldev in #10562
• fix: drop zIndex from the synchronous props by @pawicao in #10602
• fix: release the shadow tree of a stopped surface by @MatiPl01 in #10579
• fix(Reanimated): stop passing forwardedRef and nativeID to wrapped components on web by @tjzel in #10605
• fix: cancel a CSS transition removed from transitionProperty while it runs to or from undefined by @MatiPl01 in #10613

New Contributors

• @ralph1233 made their first contribution in #10365
• @dennytosp made their first contribution in #10375
• @ngocdevv made their first contribution in #10389
• @halskiszymon made their first contribution in #10332
• @hsjoberg made their first contribution in #10117
• @alexey-khatskelevich made their first contribution in #10445
• @majkpal made their first contribution in #10446
• @kacperzolkiewski made their first contribution in #10472
• @sneakykiwi made their first contribution in #10454
• @LKuchno made their first contribution in #10513
• @douglowder made their first contribution in #10482

Full Changelog: 4.6.0...4.7.0