react-native-reanimated

What's Changed

This release includes stability fixes for Layout Animations and Shared Element Transitions, fixes several crashes on Android, and stops synchronously updated props from going back to old values.

Bug fixes

• Fix a reset of synchronously updated props to old values when a commit moves a view to another position in its parent, for example after a zIndex change of a sibling, on iOS and on Android with enableAccumulatedUpdatesInRawPropsAndroid.

• Fix an Android crash with [Reanimated] Unknown sensor type. in useAnimatedSensor on devices that deliver sensor events labeled with a sensor other than the registered one.

• Fix an Android crash with react-native-screens before 4.27 when a native stack screen that holds a nested stack with header buttons is removed.

• Fix shared element transitions casting the props of a nested <Text> with a sharedTransitionTag on Android to view props.

• Fix a native crash on Android caused by reading opacity from the props of a <Text> nested in another <Text> as if they were view props.

• Fix withTiming extrapolating its easing when the first frame reports a timestamp earlier than the animation's startTime, which happens when the animation is started outside a frame flush. With an easing whose first control point is x1 = 0 the Newton-Raphson solver in Easing.bezier diverges just outside its domain, so the animated value could land orders of magnitude out of range for a single frame.

• Flush completed exiting view removals in the legacy layout animations proxy when Android's mounting coordinator pull model is enabled.

• Fix exiting Layout Animations leaking their views on Android under the mounting coordinator pull model, where the structural cleanup of a finished animation was never flushed.

• Fix a crash of the Layout Animations proxy (shadowIndex is out of range, Indices are wrong in Remove mutation, or memory corruption in release builds) when a view flattens in the same commit in which its parent unflattens.

• Fix an Android crash in performOperations when the React host is torn down while a CSS or layout animation runs in the background, for example on an expo-updates restart.

• Fix an animated view that showed an older value for one frame when a React commit mounted over a newer synchronous write, with ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS or IOS_SYNCHRONOUSLY_UPDATE_UI_PROPS on.

• Fix a crash in useAnimatedKeyboard on iOS when the app delegate does not declare window, as in apps that use the UIScene lifecycle.

• Skip synchronous Android prop updates for unmounted views to avoid throwing and logging mounting-layer exceptions on the UI thread.

Others

• Initialize the layout animations light tree root from the committed root shadow node.

• Simplify the light tree based Layout Animations proxy so that every view React deletes waits for one decision of how it exits, and name the states of a light node after what they mean.

• Rename the DEAD exiting state of the light tree based Layout Animations proxy to COMPLETED.

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.

• Reanimated: make light-tree based layout animations proxy default

• Reanimated: carry registry values in Reanimated commits

• LayoutAnimations: separate progress transition states

• LayoutAnimations: update Android view hierarchy only during JS pulls

• LayoutAnimations: serialize config updates with pullTransaction

• Reanimated: keep exiting views at their host position in experimental LA proxy

• reanimated: skip preserveMountedTags_ on pull model

• LayoutAnimations: keep animated views on their final layout after config or order changes

• LayoutAnimations: properly animate reparented views

• LayoutAnimations: skip exiting animations when a surface is torn down in the light tree proxy

• LayoutAnimations: don't crash when a view is flattened while one of its children is removed

• LayoutAnimations: skip the Android raw props merge when a commit keeps the props object

• LayoutAnimations: merge the Android raw props of a light node only when it is read

• LayoutAnimations: stop crossing the scale axes in the web SequencedTransition

• LayoutAnimations: walk web keyframe offsets in order when shifting easings

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.

• Reanimated: publish react-native.config.js

• SharedElementTransitions: make native gestures work inside SharedTransitionBoundary on Android

• SET: route synchronous prop updates to the light tree

• Reanimated: keep transitioning views hidden across commits

• SET: start a transition from the frame of a running layout animation

• Fix shared transition boundaries blocking sibling touches

• Fix Android shared transitions restoring stale colors

• resolve a percent translate with the size of its owner in shared element transitions

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.

• rnre: background image support (useAnimatedStyle)

• Reanimated: unprocessor for backgroundImage

• CSS: validate gradient color stops before they reach the renderer

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.

• Animate color and radius CSS transitions on the Android platform path

• CSS: route shadowColor transitions to the Android platform path

• honor slow animations on the CSS platform transition paths

• CSS: resume shadowOffset from its in-flight value when it leaves the platform path

• CSS: keep borderWidth transitions on the loop on iOS

• revert a property removed from transitionProperty to the committed style on Android

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.

• add fontVariationSettings to style properties config

• nightly TypeScript compatibility job

Breaking changes

• breaking

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

• breaking

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

• breaking

  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.

• breaking

  Reanimated: always use Synchronizable for mutables

• breaking

  Reanimated: back AnimatedRef with a Shareable instead of a handle

Other changes

• use Synchronizable Fixed for mutables

• prevent sticky headers from freezing animated styles

• look up named colors as own properties

• CSS: tolerate leading whitespace in a transform string

• CSS: clamp linear() input progress at both ends of the point list

• CSS: parse fractional millisecond time values

• treat an empty animationName array as no animation

• enable JavaScript fallback on Windows

• animation: reset IN_STYLE_UPDATER even when a style updater throws

• restore Jest support in consumer projects

• crash when obtaining props of an unmounted view in runtime tests

• rnre+worklets: add support for SPM

• metro: use the public MetroConfig type export

• CSS: leave the second component at zero for single-argument translate and skew

• CSS: accept the kebab-case filter function names

• CSS: repeat a short animation-delay list on web

• reanimated: add custom callback to logger

• iOS: report an error on a failed reload instead of installing a dummy proxy

• Reanimated: trim padded string values in the props builder

• CSS: restore styles after cancelling animation

• drop zIndex from the synchronous props

• release the shadow tree of a stopped surface

• Reanimated: stop passing forwardedRef and nativeID to wrapped components on web

• cancel a CSS transition removed from transitionProperty while it runs to or from undefined

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.

• Reanimated: background_image prop for RN 0.87

CSS animation and transition callbacks on native

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

• web support for CSS animation callbacks

• report CSS animation events from the engine

• CSS animation callbacks on native

• batch CSS events and deliver them to JS

• deliver batched CSS events to JS

• report CSS transition events from the engine

• CSS transition callbacks on native

• report the lifecycle milestones a transition crosses

• take the CSS lifecycle callbacks as props

• deliver the CSS animation cancel emitted while a view unmounts

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.

• add contrastColor function

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.

• Add the Android animator for CSS platform transitions

• Keep platform-driven CSS transition values alive across React Native writes

• Resolve CSS transition timelines for Android and bridge them over JNI

• Route opacity CSS transitions to the Android platform path

• Play CSS transition delays inside the animation

• Drop Android CSS transition animators when the React context goes

• Intern easings and route properties by id across the transition JNI

• Batch transition commands into one main-looper message

• Retry pending transition starts from one shared frame callback

• run transitions with callbacks on the loop instead of the platform

• Prime platform transitions before the first frame draws

Other changes

• Only reject empty-object style values for supported props

• Pass -fno-pch-timestamp so ccache can reuse the Android PCH

• prevent recursive loops when setting values in callbacks

• animate react-native-svg via CSS on web in minified builds

• Re-register pseudo selectors after a component remount

• Add re-attach to android in pseudoselectors

• Support :hover on touch devices

• android: prevent useAnimatedKeyboard crash "Can't change insets on an animation that is cancelled"

• restore opacity for flaky entering animations under Reduce Motion on iOS

• hit-test the topmost view for touch :hover

• Scrolling after :hover on iOS

• support pseudo selectors on SVG elements on Android

• Prioritize pseudoselectors over renders

• Android crash on empty CSS strokeDasharray from the default keyframe endpoint

• support touch :hover on opacity:0 views on iOS

• babel: Strip filename queries when injecting source maps

• Match mobile-web :hover behavior on touch

• web _updatePropsJS crash under strict ESM and on prop-less component refs

• Dismiss touch :active once a press moves past the tap slop

• guard handleHoverGesture behind !TARGET_OS_TV to unbreak tvOS build

• Clear touch :hover on a blank tap inside an Android Modal

• crash in handleRawEvent on stale EventTarget with null InstanceHandle

• patch react-native-screens web Screen typing for RN Strict API compatibility

• type safety in Android build configuration for React Native directory resolution

• Prevent animated views from reverting to stale values after app pause or re-animation

• Fix crash from withheld exiting layout animations in legacy proxy

• android: broaden malformed-JSON catch in NativeProxy handleEvent

• make Animated component instance types and type tests Strict API compatible

• Reanimated: use Reanimated Keyframe declaration types

• unfreeze settled pseudo-selector values on re-registration

• deactivate active pseudo selectors on unregistration

• alternating animations settle on the wrong keyframe

• Fix crash from withheld exiting layout animations in experimental proxy

• Reanimated: jumping sticky header on Android during scroll

• reanimated: restart inline props mapper after remount

• Reanimated: fix shared values passed as inline top-level props

• Fix leaking settled animated styles to component props

• Reanimated: Allow narrow SharedValues in optional props

• Reanimated: Accept text prop in animated TextInput types

• forward the default of pseudo selector values in animatedProps

• getNodeHandle on ref children of layoutanimationconfig

• Support :hover and :active on SVG elements

• Reanimated: missing mocks

• hit-test animated SVG shapes without a responder prop

• iOS: guard against nil _performOperations block in REANodesManager

• Derive the persistent CSS transition hold from the pseudo lock

• read array-typed style props from the view's own style

• Skip the pre-draw repair on frames without React mounts

• LayoutAnimations: deadlock in ReanimatedCommitHook surface initialization

• experimental LA - parent cleanup after nested exit animations

• Avoid exception-based nativeID parsing

• CSS: interpolate values with the context they declare

• Reanimated: fix Android entering animation flash in experimental LA proxy

• Reanimated: use one start time for all layout animations in the same frame

• observe Modal windows created before the first pseudo selector registration

• transition triggered from default values when config is attached to a mounted view

• Reanimated: preserve layout animations final updates during batch sync

• Stop re-injecting stale values after a CSS transition changes routing

• initialize the light tree from the base revision on attach

• Reanimated: stop throwing in LayoutAnimationConfig with non-element children

• commit the values a transition settles within its starting frame

• Reanimated: route per-view updates through one path

• Text losing its trailing word after a CSS fontSize transition on Android

• correct the cubic-bezier x-derivative used to solve CSS easings

• correct the control points of the predefined ease easing function

What's Changed

• cherry-pick(4.5-stable): CI fail on build

What's Changed

• cherry-pick(4.5-stable): crash in handleRawEvent on stale EventTarget with null InstanceHandle

• cherry-pick(4.5-stable): jumping sticky header on Android during scroll

• cherry-pick(4.5-stable): Fix crash from withheld exiting layout animations in experimental proxy

• cherry-pick(4.5-stable): Stop taking over UIManagerAnimationDelegate

• cherry-pick(4.5-stable): Guard against nil _performOperations block in REANodesManager

What's Changed

• cherry-pick(4.4-stable): Fix crash from withheld exiting layout animations in legacy proxy

• cherry-pick(4.4-stable): Prevent animated views from reverting to stale values after app pause or re-animation

What's Changed

• cherry-pick(4.3-stable): Spring jitter

• cherry-pick(4.3-stable): crash in handleRawEvent on stale EventTarget with null InstanceHandle

• cherry-pick(4.3-stable): Fix crash from withheld exiting layout animations in experimental proxy

• cherry-pick(4.3-stable): jumping sticky header on Android during scroll