feat: support 120fps for Animated on iOS

Author: okwasniewski

packages/react-native/Libraries/Animated/animations/TimingAnimation.js

@@ -15,9 +15,22 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
+import NativeAnimatedModule from '../NativeAnimatedModule';
+import NativeAnimatedTurboModule from '../NativeAnimatedTurboModule';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
+const Platform = require('../Utilities/Platform').default;
+
+const singleFrameInterval =
+  Platform.OS === 'ios'
+    ? NativeAnimatedTurboModule?.getConstants().singleFrameInterval
+    : NativeAnimatedModule?.getConstants().singleFrameInterval;
+
+const frameDuration = singleFrameInterval
+  ? singleFrameInterval * 1000
+  : 1000.0 / 60.0;
+
 export type TimingAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
@@ -88,7 +101,6 @@ export default class TimingAnimation extends Animation {
     platformConfig: ?PlatformConfig,
     ...
   }> {
-    const frameDuration = 1000.0 / 60.0;
     const frames = [];
     const numFrames = Math.round(this._duration / frameDuration);
     for (let frame = 0; frame < numFrames; frame++) {

packages/react-native/Libraries/NativeAnimation/Drivers/RCTAnimationDriver.h

@@ -9,8 +9,30 @@
 #import <Foundation/Foundation.h>
 
 #import <React/RCTBridgeModule.h>
-
-static CGFloat RCTSingleFrameInterval = (CGFloat)(1.0 / 60.0);
+#import <React/RCTUtils.h>
+
+#ifdef __cplusplus
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+
+static CGFloat RCTSingleFrameInterval(void)
+{
+  if (facebook::react::ReactNativeFeatureFlags::disableHighRefreshRateAnimations()) {
+    // Fallback to 60 fps if disabled.
+    return 1.0 / 60;
+  }
+  
+  static CGFloat maximumFramesPerSecond;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    RCTUnsafeExecuteOnMainQueueSync(^{
+      maximumFramesPerSecond = [UIScreen mainScreen].maximumFramesPerSecond;
+    });
+  });
+
+  return 1.0 / maximumFramesPerSecond;
+};
+
+#endif
 
 @class RCTValueAnimatedNode;
 

packages/react-native/Libraries/NativeAnimation/Drivers/RCTDecayAnimation.mm

@@ -85,7 +85,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
 
   if (_frameStartTime == -1) {
     // Since this is the first animation step, consider the start to be on the previous frame.
-    _frameStartTime = currentTime - RCTSingleFrameInterval;
+    _frameStartTime = currentTime - RCTSingleFrameInterval();
     if (_fromValue == _lastValue) {
       // First iteration, assign _fromValue based on _valueNode.
       _fromValue = _valueNode.value;

packages/react-native/Libraries/NativeAnimation/Drivers/RCTFrameAnimation.mm

@@ -95,10 +95,12 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
 
   _animationCurrentTime = currentTime;
   NSTimeInterval currentDuration = (_animationCurrentTime - _animationStartTime) / RCTAnimationDragCoefficient();
+  
+  CGFloat singleFrameInterval = RCTSingleFrameInterval();
 
   // Determine how many frames have passed since last update.
   // Get index of frames that surround the current interval
-  NSUInteger startIndex = floor(currentDuration / RCTSingleFrameInterval);
+  NSUInteger startIndex = floor(currentDuration / singleFrameInterval);
   NSUInteger nextIndex = startIndex + 1;
 
   if (nextIndex >= _frames.count) {
@@ -121,8 +123,8 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
   // Do a linear remap of the two frames to safeguard against variable framerates
   NSNumber *fromFrameValue = _frames[startIndex];
   NSNumber *toFrameValue = _frames[nextIndex];
-  NSTimeInterval fromInterval = (double)startIndex * RCTSingleFrameInterval;
-  NSTimeInterval toInterval = (double)nextIndex * RCTSingleFrameInterval;
+  NSTimeInterval fromInterval = (double)startIndex * singleFrameInterval;
+  NSTimeInterval toInterval = (double)nextIndex * singleFrameInterval;
 
   // Interpolate between the individual frames to ensure the animations are
   // smooth and of the proper duration regardless of the framerate.

packages/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.mm

@@ -441,6 +441,7 @@ - (void)startAnimationLoopIfNeeded
 {
   if (!_displayLink && _activeAnimations.count > 0) {
     _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(stepAnimations:)];
+    _displayLink.preferredFramesPerSecond = [UIScreen mainScreen].maximumFramesPerSecond;
     [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
   }
 }

packages/react-native/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -11,9 +11,12 @@
 #import <React/RCTNativeAnimatedNodesManager.h>
 #import <React/RCTNativeAnimatedTurboModule.h>
 #import <react/featureflags/ReactNativeFeatureFlags.h>
+#import <React/RCTAnimationDriver.h>
 
 #import "RCTAnimationPlugins.h"
 
+using namespace facebook::react;
+
 typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
 
 @interface RCTNativeAnimatedTurboModule () <NativeAnimatedModuleSpec, RCTInitializing>
@@ -28,13 +31,14 @@ @implementation RCTNativeAnimatedTurboModule {
   NSMutableArray<AnimatedOperation> *_preOperations;
 
   NSSet<NSString *> *_userDrivenAnimationEndedEvents;
+  ModuleConstants<JS::NativeAnimatedModule::Constants> _constants;
 }
 
 RCT_EXPORT_MODULE();
 
 + (BOOL)requiresMainQueueSetup
 {
-  return NO;
+  return YES;
 }
 
 - (instancetype)init
@@ -43,6 +47,10 @@ - (instancetype)init
     _operations = [NSMutableArray new];
     _preOperations = [NSMutableArray new];
     _userDrivenAnimationEndedEvents = [NSSet setWithArray:@[ @"onScrollEnded" ]];
+    
+    _constants = typedConstants<JS::NativeAnimatedModule::Constants>({
+      .singleFrameInterval = RCTSingleFrameInterval()
+    });
   }
   return self;
 }
@@ -371,6 +379,18 @@ - (void)eventDispatcherWillDispatchEvent:(id<RCTEvent>)event
   });
 }
 
+#pragma mark -- Constants
+
+- (ModuleConstants<JS::NativeAnimatedModule::Constants>)constantsToExport
+{
+  return _constants;
+}
+
+- (ModuleConstants<JS::NativeAnimatedModule::Constants>)getConstants
+{
+  return _constants;
+}
+
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params
 {

packages/react-native/React/CoreModules/RCTFPSGraph.mm

@@ -100,7 +100,8 @@ - (void)onTick:(NSTimeInterval)timestamp
     });
 
     CGFloat previousScale = _scale;
-    CGFloat targetFps = MAX(_maxFPS, 60.0);
+    CGFloat screenRefreshRate = [UIScreen mainScreen].maximumFramesPerSecond;
+    CGFloat targetFps = MAX(_maxFPS, screenRefreshRate);
     _scale = targetFps / (CGFloat)_height;
     for (NSUInteger i = 0; i < _length - 1; i++) {
       // Move each Frame back one position and adjust to new scale (if there is a new scale)

packages/react-native/React/CoreModules/RCTPerfMonitor.mm

@@ -300,6 +300,7 @@ - (void)show
   [RCTKeyWindow() addSubview:self.container];
 
   _uiDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(threadUpdate:)];
+  _uiDisplayLink.preferredFramesPerSecond = [UIScreen mainScreen].maximumFramesPerSecond;
   [_uiDisplayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
 
   self.container.frame =

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/animated/AnimationDriver.kt

@@ -10,6 +10,20 @@ package com.facebook.react.animated
 import com.facebook.react.bridge.Callback
 import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import android.content.Context
+import android.view.WindowManager
+
+public fun getSingleFrameInterval(context: Context): Double {
+  if (ReactNativeFeatureFlags.disableHighRefreshRateAnimations()) {
+    return 60.0
+  }
+
+  val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
+
+  val refreshRate = windowManager.defaultDisplay.supportedRefreshRates.maxOrNull()
+  return refreshRate?.toDouble() ?: 60.0
+}
 
 /**
  * Base class for different types of animation drivers. Can be used to implement simple time-based

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/animated/FrameBasedAnimationDriver.kt

@@ -7,18 +7,23 @@
 
 package com.facebook.react.animated
 
+import android.content.Context
 import com.facebook.common.logging.FLog
+import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.ReadableType
 import com.facebook.react.common.ReactConstants
 import com.facebook.react.common.build.ReactBuildConfig
+import kotlin.math.roundToInt
 
 /**
  * Implementation of [AnimationDriver] which provides a support for simple time-based animations
  * that are pre-calculate on the JS side. For each animation frame JS provides a value from 0 to 1
  * that indicates a progress of the animation at that frame.
  */
-internal class FrameBasedAnimationDriver(config: ReadableMap) : AnimationDriver() {
+internal class FrameBasedAnimationDriver(config: ReadableMap,
+                                         private var context: ReactApplicationContext?
+) : AnimationDriver() {
   private var startFrameTimeNanos: Long = -1
   private var frames: DoubleArray = DoubleArray(0)
   private var toValue = 0.0
@@ -62,7 +67,8 @@ internal class FrameBasedAnimationDriver(config: ReadableMap) : AnimationDriver(
       }
     }
     val timeFromStartMillis = (frameTimeNanos - startFrameTimeNanos) / 1000000
-    val frameIndex = Math.round(timeFromStartMillis / FRAME_TIME_MILLIS).toInt()
+    val frameTime = getFrameTimeMillis(context)
+    val frameIndex = (timeFromStartMillis / frameTime).roundToInt()
     if (frameIndex < 0) {
       val message =
           ("Calculated frame index should never be lower than 0. Called with frameTimeNanos " +
@@ -98,7 +104,11 @@ internal class FrameBasedAnimationDriver(config: ReadableMap) : AnimationDriver(
   }
 
   companion object {
-    // 60FPS
-    private const val FRAME_TIME_MILLIS = 1000.0 / 60.0
+    fun getFrameTimeMillis(context: Context?): Double {
+      if (context == null) {
+        return 1000.0 / 60.0
+      }
+      return 1000.0 / getSingleFrameInterval(context)
+    }
   }
 }