react-native-reanimated 4.6.0

Reanimated - 4.6.0

on Node.js Yarn

Key changes

React Native 0.87 support

Reanimated 4.6 supports React Native 0.83 – 0.87 and pairs with Worklets 0.12.x. See the compatibility table.

• fix(Reanimated): background_image prop for RN 0.87 by @tjzel in #9768
• chore: upgrade React Native to 0.87.0 by @pawicao in #10236

CSS animation and transition callbacks on native

onCSSAnimationStart, onCSSAnimationEnd, onCSSAnimationIteration, onCSSAnimationCancel, onCSSTransitionRun, onCSSTransitionStart, onCSSTransitionEnd and onCSSTransitionCancel now fire on iOS and Android.

• feat: web support for CSS animation callbacks by @MatiPl01 in #9605
• feat: report CSS animation events from the engine by @MatiPl01 in #10070
• feat: CSS animation callbacks on native by @MatiPl01 in #10071
• feat: batch CSS events and deliver them to JS by @MatiPl01 in #10108
• feat: deliver batched CSS events to JS by @MatiPl01 in #10107
• feat: report CSS transition events from the engine by @MatiPl01 in #10119
• feat: CSS transition callbacks on native by @MatiPl01 in #10124
• feat: report the lifecycle milestones a transition crosses by @MatiPl01 in #10271
• chore: prefix the CSS lifecycle callbacks with onCSS by @MatiPl01 in #10273
• feat: take the CSS lifecycle callbacks as props by @MatiPl01 in #10252
• fix: deliver the CSS animation cancel emitted while a view unmounts by @MatiPl01 in #10255

contrastColor utility

New contrastColor worklet, a port of CSS contrast-color(). It returns 'white' or 'black', whichever has the higher WCAG contrast ratio against the given color. It works inside useAnimatedStyle and other worklets as well as on the JS thread. See the docs.

• feat: add contrastColor function by @tomekzaw in #10320

Experimental: platform-driven CSS transitions on Android

opacity CSS transitions can now run on the Android platform with ObjectAnimator, off the animation loop. This is the Android counterpart of iOS Core Animation transitions.

The feature is off by default. Enable it with the ANDROID_CSS_PLATFORM_TRANSITIONS feature flag.

• feat: Add the Android animator for CSS platform transitions by @MatiPl01 in #10090
• feat: Keep platform-driven CSS transition values alive across React Native writes by @MatiPl01 in #10092
• feat: Resolve CSS transition timelines for Android and bridge them over JNI by @MatiPl01 in #10060
• feat: Route opacity CSS transitions to the Android platform path by @MatiPl01 in #10240
• fix: Play CSS transition delays inside the animation by @MatiPl01 in #10242
• fix: Drop Android CSS transition animators when the React context goes by @MatiPl01 in #10241
• perf: Intern easings and route properties by id across the transition JNI by @MatiPl01 in #10269
• perf: Batch transition commands into one main-looper message by @MatiPl01 in #10213
• perf: Retry pending transition starts from one shared frame callback by @MatiPl01 in #10214
• fix: run transitions with callbacks on the loop instead of the platform by @MatiPl01 in #10228
• fix: Prime platform transitions before the first frame draws by @MatiPl01 in #10326
• docs: document the feature flags for platform-routed CSS transitions by @MatiPl01 in #10328

Other changes

• fix: Only reject empty-object style values for supported props by @MatiPl01 in #9746
• fix: Pass -fno-pch-timestamp so ccache can reuse the Android PCH by @lukmccall in #9749
• fix: prevent recursive loops when setting values in callbacks by @Titozzz in #9769
• fix: animate react-native-svg via CSS on web in minified builds by @MatiPl01 in #9773
• fix: Re-register pseudo selectors after a component remount by @MatiPl01 in #9765
• fix: Add re-attach to android in pseudoselectors by @wisniewskij in #9743
• fix: Support :hover on touch devices by @MatiPl01 in #9720
• fix(android): prevent useAnimatedKeyboard crash "Can't change insets on an animation that is cancelled" by @piaskowyk in #9670
• fix: restore opacity for flaky entering animations under Reduce Motion on iOS by @tomekzaw in #9772
• fix: hit-test the topmost view for touch :hover by @MatiPl01 in #9731
• Fix: Scrolling after :hover on iOS by @wisniewskij in #9791
• feat: support pseudo selectors on SVG elements on Android by @MatiPl01 in #9796
• feat: Prioritize pseudoselectors over renders by @wisniewskij in #9775
• fix: Android crash on empty CSS strokeDasharray from the default keyframe endpoint by @MatiPl01 in #9845
• fix: support touch :hover on opacity:0 views on iOS by @MatiPl01 in #9872
• fix(deps): declare @babel/generator and @babel/traverse as dependencies by @0xyy in #9873
• fix(babel): Strip filename queries when injecting source maps by @NiGhTTraX in #9576
• fix: Match mobile-web :hover behavior on touch by @MatiPl01 in #9793
• fix: web _updatePropsJS crash under strict ESM and on prop-less component refs by @MatiPl01 in #9870
• fix: Dismiss touch :active once a press moves past the tap slop by @MatiPl01 in #9877
• fix: guard handleHoverGesture behind !TARGET_OS_TV to unbreak tvOS build by @MatiPl01 in #9917
• fix: Clear touch :hover on a blank tap inside an Android Modal by @MatiPl01 in #9878
• fix: crash in handleRawEvent on stale EventTarget with null InstanceHandle by @tomekzaw in #9926
• fix: patch react-native-screens web Screen typing for RN Strict API compatibility by @tjzel in #9938
• Fix: type safety in Android build configuration for React Native directory resolution by @benjaminpeters in #9652
• fix: Prevent animated views from reverting to stale values after app pause or re-animation by @tomekzaw in #9527
• Fix crash from withheld exiting layout animations in legacy proxy by @tomekzaw in #9821
• fix(android): broaden malformed-JSON catch in NativeProxy handleEvent by @raid5 in #9989
• fix: make Animated component instance types and type tests Strict API compatible by @tjzel in #9960
• fix(Reanimated): use Reanimated Keyframe declaration types by @pawicao in #10046
• fix: unfreeze settled pseudo-selector values on re-registration by @MatiPl01 in #9851
• fix: deactivate active pseudo selectors on unregistration by @MatiPl01 in #9852
• fix: alternating animations settle on the wrong keyframe by @MatiPl01 in #10075
• Fix crash from withheld exiting layout animations in experimental proxy by @tomekzaw in #10073
• fix(Reanimated): jumping sticky header on Android during scroll by @piaskowyk in #10052
• fix(reanimated): restart inline props mapper after remount by @tshmieldev in #10127
• chore: update Android build config to use compileSdkVersion 37 and kotlin 2.2.0 by @pawicao in #10137
• fix(Reanimated): fix shared values passed as inline top-level props by @pawicao in #10151
• Fix leaking settled animated styles to component props by @tomekzaw in #10140
• fix(Reanimated): Allow narrow SharedValues in optional props by @pawicao in #10156
• fix(Reanimated): Accept text prop in animated TextInput types by @tomekzaw in #10158
• fix: forward the default of pseudo selector values in animatedProps by @MatiPl01 in #10123
• fix: getNodeHandle on ref children of layoutanimationconfig by @tshmieldev in #10174
• feat: Support :hover and :active on SVG elements by @MatiPl01 in #9879
• fix(Reanimated): missing mocks by @tjzel in #10194
• feat: hit-test animated SVG shapes without a responder prop by @MatiPl01 in #10116
• fix(iOS): guard against nil _performOperations block in REANodesManager by @tomekzaw in #10229
• fix: Derive the persistent CSS transition hold from the pseudo lock by @MatiPl01 in #10243
• fix: read array-typed style props from the view's own style by @MatiPl01 in #10253
• perf: Skip the pre-draw repair on frames without React mounts by @MatiPl01 in #10263
• fix(LayoutAnimations): deadlock in ReanimatedCommitHook surface initialization by @bartlomiejbloniarz in #9903
• refactor(LayoutAnimations): stop taking over UIManagerAnimationDelegate by @bartlomiejbloniarz in #9901
• fix: experimental LA - parent cleanup after nested exit animations by @pawicao in #10103
• Avoid exception-based nativeID parsing by @zxrl in #9966
• fix(CSS): interpolate values with the context they declare by @MatiPl01 in #10281
• fix(Reanimated): fix Android entering animation flash in experimental LA proxy by @pawicao in #10198
• fix(Reanimated): use one start time for all layout animations in the same frame by @pawicao in #10317
• fix: observe Modal windows created before the first pseudo selector registration by @MatiPl01 in #10306
• fix: transition triggered from default values when config is attached to a mounted view by @MatiPl01 in #10311
• fix(Reanimated): preserve layout animations final updates during batch sync by @pawicao in #10171
• fix: Stop re-injecting stale values after a CSS transition changes routing by @MatiPl01 in #10309
• fix: initialize the light tree from the base revision on attach by @bartlomiejbloniarz in #10313
• fix(Reanimated): stop throwing in LayoutAnimationConfig with non-element children by @pawicao in #10334
• fix: commit the values a transition settles within its starting frame by @MatiPl01 in #10338
• fix(Reanimated): route per-view updates through one path by @pawicao in #10339
• fix: Text losing its trailing word after a CSS fontSize transition on Android by @MatiPl01 in #10342
• fix: correct the cubic-bezier x-derivative used to solve CSS easings by @MatiPl01 in #10344
• fix: correct the control points of the predefined ease easing function by @tjzel in #10353

New Contributors

• @0xyy made their first contribution in #9779
• @abulenok made their first contribution in #9503
• @NiGhTTraX made their first contribution in #9576
• @acarlson33 made their first contribution in #9818
• @DoctorJohn made their first contribution in #9934
• @benjaminpeters made their first contribution in #9652
• @shawnthye-guru made their first contribution in #9949
• @raid5 made their first contribution in #9989
• @bvonheid made their first contribution in #10032
• @zxrl made their first contribution in #9966
• @luccasfraga made their first contribution in #10274
• @shubhamdeol made their first contribution in #10278
• @senicko made their first contribution in #10270
• @Sullyvahnn-v2 made their first contribution in #10299

Full Changelog: 4.5.3...4.6.0