React native does not support screen refresh rate
See original GitHub issuePlease 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:
Issue Analytics
- State:
- Created 3 years ago
- Reactions:64
- Comments:37 (4 by maintainers)
Top Results From Across the Web
React native does not support screen refresh rate - GitHub
A framework for building native applications using React - React native does not support screen refresh rate ...
Read more >Performance Overview - React Native
A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and...
Read more >Is 120hz animations enabled by default on React Native on ...
To then answer OP more technically; no. React native doesn't have proper support for 120hz anything. It can however do 60Fps & 60hz....
Read more >Behavior changes: all apps - Android Developers
Previously, if the display did not support a seamless transition, it would typically continue using the same refresh rate after setFrameRate() is called....
Read more >Flutter vs. React Native: Which one is better - Brocoders
While React Native invokes the OEM widgets, Flutter is shipped with its own widgets. After the installation, the Flutter engine draws the UI ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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