react-native: React native does not support screen refresh rate
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.
- Use a phone with a higher refresh rate than 60 (e.g. Samsung Galaxy S20, Oneplus 7T (or higher))
- Start any react native app
- 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:
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 74
- Comments: 48 (8 by maintainers)
Apart from all this, there are a few places where 60 frames are hardcoded.
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/Libraries/Animated/animations/TimingAnimation.js#L81
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/packages/rn-tester/RNTesterUnitTests/RCTNativeAnimatedNodesManagerTests.m#L286
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/Libraries/NativeAnimation/Drivers/RCTAnimationDriver.h#L13
this? https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/ReactAndroid/src/main/java/com/facebook/react/uimanager/FabricViewStateManager.java#L65
https://github.com/facebook/react-native/blob/657c48c21de496734716ed33c9e55d8baae3494f/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java#L38
https://github.com/facebook/react-native/blob/8d0a2e79212b77cafcc9af73e92c0f2b23f782e8/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm#L217
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/Libraries/Animated/__tests__/Easing-test.js#L84
https://github.com/facebook/react-native/blob/feae814153783a0d03d0a332917991f139c36e9f/React/Base/RCTMultipartStreamReader.m#L73
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/ReactAndroid/src/main/java/com/facebook/react/animated/SpringAnimation.java#L19
https://github.com/facebook/react-native/blob/1465c8f3874cdee8c325ab4a4916fda0b3e43bdb/ReactAndroid/src/test/java/com/facebook/react/animated/NativeAnimatedNodeTraversalTest.java#L460
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
I can build it, but the issue is from 3 years ago. Somebody still interested in this issue?
https://github.com/facebook/react-native/issues/29333#issuecomment-931405279
Now 14th March 2022, does react native support high refresh rate now?
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.
Is there an update on this issue ?
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?
so… any news? an app that runs at 60fps for someone who uses a 120fps smartphone is a little strange
meow
bump
Any update?
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.
Anything new that address this in 0.64?
This is very visible with apps that use something like React Navigation that has screen transitions.
bump
BUMP
BUMP
BUMP
I tried that and it doesn’t work; I’m using react navigation and the transitions are choppy and don’t appear smooth.
what about ios?
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
Is there anything new? In my opinion it’s a recommend feature
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.