React Native Reanimated Files

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 https://github.com/software-mansion/react-native-reanimated/pull/10423
• fix(Reanimated): carry registry values in Reanimated commits by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10416
• refactor(LayoutAnimations): use one proxy instance per surface by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10368
• refactor(LayoutAnimations): centralize animation lifecycle and UI operations by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10369
• refactor(LayoutAnimations): make shared container ownership explicit by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10370
• fix(LayoutAnimations): separate progress transition states by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10371
• fix(LayoutAnimations): update Android view hierarchy only during JS pulls by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10372
• fix(LayoutAnimations): serialize config updates with pullTransaction by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10373
• fix(Reanimated): keep exiting views at their host position in experimental LA proxy by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10392
• fix(reanimated): skip preserveMountedTags_ on pull model by @piaskowyk in https://github.com/software-mansion/react-native-reanimated/pull/10481
• fix(LayoutAnimations): keep animated views on their final layout after config or order changes by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10537
• fix(LayoutAnimations): properly animate reparented views by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10538
• fix(LayoutAnimations): skip exiting animations when a surface is torn down in the light tree proxy by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10586
• fix(LayoutAnimations): don't crash when a view is flattened while one of its children is removed by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10628
• perf(LayoutAnimations): skip the Android raw props merge when a commit keeps the props object by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10566
• perf(LayoutAnimations): merge the Android raw props of a light node only when it is read by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10570
• fix(LayoutAnimations): stop crossing the scale axes in the web SequencedTransition by @dennytosp in https://github.com/software-mansion/react-native-reanimated/pull/10384
• fix(LayoutAnimations): walk web keyframe offsets in order when shifting easings by @dennytosp in https://github.com/software-mansion/react-native-reanimated/pull/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 https://github.com/software-mansion/react-native-reanimated/pull/10375
• fix(SharedElementTransitions): make native gestures work inside SharedTransitionBoundary on Android by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10430
• feat(SET): route synchronous prop updates to the light tree by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10522
• fix(Reanimated): keep transitioning views hidden across commits by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10425
• fix(SET): start a transition from the frame of a running layout animation by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/10556
• Fix shared transition boundaries blocking sibling touches by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10600
• Fix Android shared transitions restoring stale colors by @bartlomiejbloniarz in https://github.com/software-mansion/react-native-reanimated/pull/10601
• fix: resolve a percent translate with the size of its owner in shared element transitions by @pawicao in https://github.com/software-mansion/react-native-reanimated/pull/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 https://github.com/software-mansion/react-native-reanimated/pull/10486
• fix(Reanimated): unprocessor for backgroundImage by @tshmieldev in https://github.com/software-mansion/react-native-reanimated/pull/10542
• fix(CSS): validate gradient color stops before they reach the renderer by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/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 https://github.com/software-mansion/react-native-reanimated/pull/10310
• feat(CSS): route shadowColor transitions to the Android platform path by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/10547
• fix: honor slow animations on the CSS platform transition paths by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/10548
• fix(CSS): resume shadowOffset from its in-flight value when it leaves the platform path by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/10564
• fix(CSS): keep borderWidth transitions on the loop on iOS by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/10569
• fix: revert a property removed from transitionProperty to the committed style on Android by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/10614
• docs: state since which version each CSS transition property is routed to the platform by @MatiPl01 in https://github.com/software-mansion/react-native-reanimated/pull/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 https://github.com/software-mansion/react-native-reanimated/pull/10582
• fix: add fontVariationSettings to style properties config by @tjzel in https://github.com/software-mansion/react-native-reanimated/pull/10239
• fix: nightly TypeScript compatibility job by @tjzel in https://github.com/software-mansion/react-native-reanimated/pull/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 https://github.com/software-mansion/react-native-reanimated/pull/10298

• refactor(Reanimated): back AnimatedRef with a Shareable instead of a handle by @tjzel in https://github.com/software-mansion/react-native-reanimated/pull/10413

Other changes

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

New Contributors

• @ralph1233 made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10365
• @dennytosp made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10375
• @ngocdevv made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10389
• @halskiszymon made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10332
• @hsjoberg made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10117
• @alexey-khatskelevich made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10445
• @majkpal made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10446
• @kacperzolkiewski made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10472
• @sneakykiwi made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10454
• @LKuchno made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10513
• @douglowder made their first contribution in https://github.com/software-mansion/react-native-reanimated/pull/10482

Full Changelog: https://github.com/software-mansion/react-native-reanimated/compare/4.6.0...4.7.0