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

[fgagneten]

@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.

[fgagneten]

@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