react-native-paper: Paper's button seems to be slower
Current behaviour
The button seems to be not as responsive as expected. It just feels laggy. The onPress function seems to be fired after the animation is finished? Please take a look at the gif below where compare the Paper’s button with Element’s button. The logic in the onPress is exactly the same code.
This only occur on mid/low end device. FYI, my device is running on SD 636.
Expected behaviour
Button should be responsive.
Code sample
https://snack.expo.io/@elabar/paper-button-slow
Screenshots (if applicable)
Highlight:
- The button seems to be hold on at the ‘pressIn’ state for awhile? (I did not hold the button)
Highlight:
- The button seems to be hold on at the ‘pressIn’ state for awhile? (I did not hold the button) And start the loading afterwards.
What have you tried
The problem was found in one of my production apps first. I tried creating a reproduce with a clean npx react-native init, and I can confirm this is a valid issue. The gif above is run on development mode on purpose to show the sluggishness easily.
Strange thing is, this problem is more severe with RN CLI. It feels much better with expo.
I then check on react-native-elements codebase. The main difference I found is Paper is using requestAnimationFrame. Not sure if this is related tho.
Your Environment
| software | version |
|---|---|
| ios or android | Android 11 |
| react-native | 0.64.2 |
| react-native-paper | 4.9.2 |
| node | 14.16.1 |
| yarn | 1.22.10 |
| expo | 42.0.1 |
| react-native-vector-icons | 8.1.0 |
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 36 (2 by maintainers)
@lukewalczak @Trancever Is there any update on that? Using the new arch works better but still having issues. It is terrible slow on old devices.
So it is safe to close the issue because this is not due to react native paper but an issue from react native side.
P.S. you can read this blog post, https://dev.to/paddy57/why-app-gets-slow-in-debug-mode-react-native-191d
Flipper is one of the best option for debugging for react native apps.
To clarify, whether the problem being discussed can be replicated or reproduced on the most recent version of the library?
@raajnadar Uploaded a repo in which I can reproduce with my Galaxy J5 (2016) (SM-J510MN) Android’s version 7.1.1.
You can checkout from here: https://github.com/fgagneten/react-native-paper-performance-test
I said the application is in debug mode (to make the difference between debug/release). When you run an application for every-day development, you run on debug mode. It does not mean I was using the debugger (Chrome Debugger). I just run the code with npx react-native run-android, nothing else and I face the same issue that @Elabar reported