callstack / callstack/react-native-paper
Menu opening animation only 60 fps
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
When opening or closing a Menu component, the animation is capped at 60 fps, which is very obvious on my Redmi note 11, a 90 hz screen device.
### Expected behaviour
The animation framerate should adjust to the device's refresh rate.
### How to reproduce?
1. Create a Menu component that is openable
2. Run the app on a device with a high refresh rate screen.
3. Observe that the opening and closing animations are running at 60 fps
### Preview
The Android screen recorder is capped at 60 fps, this has to be experienced on a real high refresh rate device (or maybe an emulator on a high refresh rate monitor)
### What have you tried so far?
I thought that this is an issue of all React Native, but things like the ActivityIndicator or TextInput seem to be running 90 fps just fine. So this is likely an issue specifically the Menu animation.
### Your Environment
| software | version
| --------------------- | -------
| ios | x
| android | 13
| react-native | 0.72.7
| react-native-paper | 5.11.1
| node | 18.17.1
| npm or yarn | npm 9.6.7
| expo sdk | x.x.x
Contributor guide
Research direction
No source file or test is named. First reproduce the Menu opening and closing animation on Android 13 with a high-refresh-rate device or emulator, then trace the Menu animation implementation in the repository. Done means the animation visibly runs at the device's refresh rate rather than being capped at 60 fps, with existing behavior preserved on standard displays.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100