diff --git a/packages/react-native/Libraries/Animated/animations/Animation.js b/packages/react-native/Libraries/Animated/animations/Animation.js index 8ee76a3dcf00bd..8152fa30bccb3b 100644 --- a/packages/react-native/Libraries/Animated/animations/Animation.js +++ b/packages/react-native/Libraries/Animated/animations/Animation.js @@ -110,7 +110,10 @@ export default class Animation { if (value != null) { animatedValue.__onAnimatedValueUpdateReceived(value); - if (this.__isLooping) { + if ( + ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() && + this.__isLooping + ) { return; } diff --git a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js index fb4ef2284803b6..cc9d10594f13c9 100644 --- a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js +++ b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js @@ -328,6 +328,11 @@ const definitions: FeatureFlagDefinitions = { description: 'Function used to enable / disabled Layout Animations in React Native.', }, + shouldSkipStateUpdatesForLoopingAnimations: { + defaultValue: false, + description: + 'If the animation is within Animated.loop, we do not send state updates to React.', + }, shouldUseAnimatedObjectForTransform: { defaultValue: false, description: diff --git a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js index dc67d6081e0c76..3e0099e4619970 100644 --- a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js +++ b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<79bdedd5a09ba284cdaa2e4f40ffd2fd>> + * @generated SignedSource<> * @flow strict */ @@ -36,6 +36,7 @@ export type ReactNativeFeatureFlagsJsOnly = { enableAnimatedPropsMemo: Getter, enableOptimisedVirtualizedCells: Getter, isLayoutAnimationEnabled: Getter, + shouldSkipStateUpdatesForLoopingAnimations: Getter, shouldUseAnimatedObjectForTransform: Getter, shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter, shouldUseSetNativePropsInFabric: Getter, @@ -146,6 +147,11 @@ export const enableOptimisedVirtualizedCells: Getter = createJavaScript */ export const isLayoutAnimationEnabled: Getter = createJavaScriptFlagGetter('isLayoutAnimationEnabled', true); +/** + * If the animation is within Animated.loop, we do not send state updates to React. + */ +export const shouldSkipStateUpdatesForLoopingAnimations: Getter = createJavaScriptFlagGetter('shouldSkipStateUpdatesForLoopingAnimations', false); + /** * Enables use of AnimatedObject for animating transform values. */