Why is my React Native App janky and irresponsive ?

In one of the projects that I worked the TL of a client said to me that our module feels janky, navigation and action items are not much responsive can u pls look into it? Then I looked into their code and got the culprit. They were using TouchableOpacity for every action item on the screen. So I proposed to use Pressable instead of TouchableOpacity. One of their devs said that there should be feedback to users when they touch! So let’s analyse this

Why we should not use TouchableOpacity?

The animation for adjusting opacity runs in the same Js thread where other operations are also running. This causes some frame rate drop which results in jankier and irresponsive ui. If you are running some expensive operations such as calling an api, setting multiple states and such this will leave a very bad impression. To avoid this we can wrap our Pressable action in requestAnimationFrame per se

function handleOnPress() {
    requestAnimationFrame(() => {
         //your actions
    });
}

But Do we need to do this?

We can go for Pressable instead of TouchableHighlight/TouchableOpacity cuz our brain got trained enough now to detect pressable items on a screen. Again if u give much faster results than spending an extra second to show feedback users will never complain.

Regardless if you need to use Touchables use them minimally and responsibly.