React native does not support screen refresh rate

[tdekoning]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

When running a react native app on a device that has a refresh rate other than 60, react native apps still run at 60 fps.
This means that if you have a device like a Samsung Galaxy S20, which runs at 120 fps, every react native app will feel sluggish, slow and underperforming.

React native should honor the screen's refresh rate and use that for rendering.

React Native version:

Run react-native info in your terminal and copy the results here.

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 791.56 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 25.0.0, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.2
      System Images: android-16 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-P | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: Not Found
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_152 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Use a phone with a higher refresh rate than 60 (e.g. Samsung Galaxy S20, Oneplus 7T (or higher))
2. Start any react native app
3. See that the app is slower than every app on the phone

Expected Results

I expect that the app runs smooth on all refresh rates above 60.

Snack, code example, screenshot, or link to a repository:

[Guuz]

This is very visible with apps that use something like React Navigation that has screen transitions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Guuz]

I believe it still requires attention!

[tdekoning]

Sadly, it still isn't supported :(

[enahum]

Anything new that address this in 0.64?

[juliendeveloper]

Is there anything new?
In my opinion it's a recommend feature

[Jojr]

On Android, the frame rate settings are available from API level 30 or higher. Currently, React Native 0.64 is using API level 29. It will be available only on further versions of RN, I guess.

https://developer.android.com/guide/topics/media/frame-rate

[juliendeveloper]

Anything new here?!?!

[Jojr]

Anything new here?!?!

Not yet. The RN 0.65 has launched with API level 29 (the same as the 0.64).

[matapo]

On Android, the frame rate settings are available from API level 30 or higher. Currently, React Native 0.64 is using API level 29. It will be available only on further versions of RN, I guess.

https://developer.android.com/guide/topics/media/frame-rate

what about ios?

[andresribeiro]

On Android, the frame rate settings are available from API level 30 or higher. Currently, React Native 0.64 is using API level 29. It will be available only on further versions of RN, I guess.
https://developer.android.com/guide/topics/media/frame-rate

what about ios?

I think that iPhone 12 only supports 60 Hz

[matapo]

iPad Pro has 120Hz. There are rumors that iPhone 13 will have 120Hz as well, which we'll see in a few weeks.

https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

UPDATE: iPhone 13 has 120Hz

[alexfoxy]

This would be really great to get this uncapped. Perhaps it will be on a system level on iOS?

[zachgibson]

I think this will work on iOS already without RN core changing anything.

[zachgibson]

According to the WWDC talk “Optimize for variable refresh rate displays”:

“Most apps will work (with ProMotion) without any changes, but if your app performs frame-by-frame custom drawing then you will need to pay attention to these frame rate changes…”.

[swrobel]

Apple's docs for enabling ProMotion on iPhone 13 Pro & iPad Pro. It seems it's as simple as adding this plist entry, although I don't have such a device to test whether or not it works with an RN app:

<key>CADisableMinimumFrameDurationOnPhone</key><true/>

[tastafur]

Apart from all this, there are a few places where 60 frames are hardcoded.

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

Line 81 in 1465c8f

const frameDuration = 1000.0 / 60.0;

react-native/packages/rn-tester/RNTesterUnitTests/RCTNativeAnimatedNodesManagerTests.m

Line 286 in 1465c8f

for (NSUInteger i = 0; i < 3 * 60; i++) {

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

Line 13 in 1465c8f

static CGFloat RCTSingleFrameInterval = (CGFloat)(1.0 / 60.0);

this?

react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/FabricViewStateManager.java

Line 65 in 1465c8f

if (numTries > 60) {

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java

Line 38 in 657c48c

private static final float FRAME_DURATION_MS = 1000.f / 60.f;

react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

Line 217 in 8d0a2e7

CGFloat msPerFrame = 1.0 / 60.0;

react-native/Libraries/Animated/__tests__/Easing-test.js

Line 84 in 1465c8f

const tickCount = Math.round((DURATION * 60) / 1000);

react-native/React/Base/RCTMultipartStreamReader.m

Line 73 in feae814

// Throttle progress events so we don't send more that around 60 per second.

react-native/ReactAndroid/src/main/java/com/facebook/react/animated/SpringAnimation.java

Line 19 in 1465c8f

// maximum amount of time to simulate per physics iteration in seconds (4 frames at 60 FPS)

react-native/ReactAndroid/src/test/java/com/facebook/react/animated/NativeAnimatedNodeTraversalTest.java

Line 460 in 1465c8f

for (int i = 0; i < 3 * 60 * 5; i++) {

[andresribeiro]

so... any news? an app that runs at 60fps for someone who uses a 120fps smartphone is a little strange

[Pajn]

With adaptive frame rate, issues with not syncing with vsync are even more pronounced. On my S21 when "flicking" a list so that it continues scrolling after the finger is lifted the list starts to "jelly scroll" after lifting the finger, with content basically taking 2 steps forward 1 step back until the list completely stops. Locking the refresh-rate to 60Hz gets rid of that.

[MANTENN]

Apple's docs for enabling ProMotion on iPhone 13 Pro & iPad Pro. It seems it's as simple as adding this plist entry, although I don't have such a device to test whether or not it works with an RN app:

<key>CADisableMinimumFrameDurationOnPhone</key><true/>

I tried that and it doesn't work; I'm using react navigation and the transitions are choppy and don't appear smooth.

[MANTENN]

Apple's docs for enabling ProMotion on iPhone 13 Pro & iPad Pro. It seems it's as simple as adding this plist entry, although I don't have such a device to test whether or not it works with an RN app:

<key>CADisableMinimumFrameDurationOnPhone</key><true/>

I tried that and it doesn't work; I'm using react navigation and the transitions are choppy and don't appear smooth.

I'm also using react native reanimated and they aren't 120fps.

[leejunhui]

Now 14th March 2022, does react native support high refresh rate now?

[billnbell]

what is the latest status on CADisableMinimumFrameDurationOnPhone ?

[mittallakshayy]

Is there an update on this issue ?

[okalil]

Is there some fork that implements a solution?

[kylegillen]

Bump

[Developeranees]

BUMP

[MrSimmmons]

Discord just transitioned their android app over to react native, and this issue has absolutely ruined the app for all devices with high refresh rate screens. All animations within the app now just look awful and stutter so much. high refresh rate screens have been in phones for almost half a decade and are pretty main steam now days (its even in apple products now which is when you know the tech has matured enough to be truly main steam) so I'm surprised that this is not much higher in the TODO list for future versions. It really does make that much of a difference.

[Developeranees]

BUMP

[mittallakshayy]

BUMP

[juliendeveloper]

BUMP

[SimpleCreations]

I don't think spamming "bump" here is a good idea. Usually when there is a lot of spam in an issue, the maintainers close and lock it.

[matapo]

It seems that you can have 120fps with reanimated 2

software-mansion/react-native-reanimated#2636

[milksense]

bump

[djendacott]

Is there any official comment on 120fps support?

It is now over 12 months since iOS implemented promotion, and our react native animations stutter and feel juttery and low quality in comparison to every native app.

Has react native hit a wall?

[billnbell]

Did you try it. It works Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: djendacott ***@***.***> Sent: Thursday, October 13, 2022 6:03:16 PM To: facebook/react-native ***@***.***> Cc: William Bell ***@***.***>; Comment ***@***.***> Subject: Re: [facebook/react-native] React native does not support screen refresh rate (#29333) Is there any official comment on 120fps support? It is now over 12 months since iOS implemented promotion, and our react native animations stutter and feel juttery and low quality in comparison to every native app. Has react native hit a wall? — Reply to this email directly, view it on GitHub<#29333 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGBTSQLO2LMUV6GPEFYFBL3WDCPMJANCNFSM4OWSXROA>. You are receiving this because you commented.Message ID: ***@***.***>

[djendacott]

What version of RN are you running?

Are you talking about Reanimated or are you saying that the built-in Animated library works for you at 120fps?

[Norcy]

bump

[julientietkem]

Any update?

[wmonecke]

I am using Reanimated v3 but my app still runs at max 60fps with RN 0.72.2.

Has anyone been able to run RN at over 60fps?

[darioarias]

Still no updates?

[atultiwaree]

I tried running my app, in my device it runs on 120hz, while in some other devices it runs in default 60hz

[devGuerra]

some updates or plans to build it ?

[fabOnReact]

I can build it, but the issue is from 3 years ago. Somebody still interested in this issue?

#29333 (comment)

[michelle-chiang]

Still very interested in this issue!

[coder-xiaomo]

It does not seem to be optimized on Android until the current version of 0.73.5.

I tried to create a new React Native project and run it on a real device, again up to 60 fps.

Anything new that can address this in the recent version?

By the way, I found that the Xiaohongshu(小红书) App in China can reach 120 fps, does anyone know how they did it?

[lindboe]

@fabOnReact if you're looking to work on this but need input, I believe the way forward would be to submit an RFC at https://github.com/react-native-community/discussions-and-proposals/, in case that's helpful.

[muelsyse-az]

Any status update on this?