From 96f73033b7fcada2ee0684da4895110d3a2f1bd1 Mon Sep 17 00:00:00 2001 From: Martin Booth Date: Mon, 7 Jul 2025 15:50:51 -0700 Subject: [PATCH] Fix occasional flicker when transitioning a property If transitionStyleHasChangedResult is true, the code in useLayoutEffect should run synchronously without rendering the style being transitioned to, but this doesn't appear to be the case 100% of the time because I've got one transition that momentarily shows the target style before running the transition. Even this doesn't repro reliably. Even though I'd expect returning the current style if transitionStyleHasChangedResult is true to be a no-op (because the useLayoutEffect should cause a synchronous render with a new value), it doesn't seem to always be that way and this PR fixes the issue --- .../react-strict-dom/src/native/modules/useStyleTransition.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-strict-dom/src/native/modules/useStyleTransition.js b/packages/react-strict-dom/src/native/modules/useStyleTransition.js index e0b6e285..0533e8c6 100644 --- a/packages/react-strict-dom/src/native/modules/useStyleTransition.js +++ b/packages/react-strict-dom/src/native/modules/useStyleTransition.js @@ -400,6 +400,10 @@ export function useStyleTransition(style: ReactNativeStyle): ReactNativeStyle { } }, [currentStyle, style, transitionStyleHasChangedResult]); + if (transitionStyleHasChangedResult) { + return currentStyle ?? style; + } + if ( _delay == null && _duration == null &&