question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React native does not support screen refresh rate

See original GitHub issue

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:

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:64
  • Comments:37 (4 by maintainers)

github_iconTop GitHub Comments

24reactions
tastafurcommented, Sep 30, 2021

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

13reactions
matapocommented, Sep 14, 2021

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found