Fixing the most annoying RN bug I know

This unwanted and extremely annoying behavior happens in almost 100% of the React Native apps I encounter. It used to happen in all of the ones I created myself, but I was bitten by this bug enough times that I decided to adopt a particular default approach for using a widely popular element in React Native: ScrollView.

The bug in question happens when you try and tap an element inside of a ScrollView. You do it the first time and, for some reason, the tap doesn’t work. Then, you click again — usually thinking you might have not tapped it properly the first time. The second click works.

Except this happens every. single. time.

After sometime you start questioning why is it that you can never, ever hit that button right the first time ?

The answer is because ScrollView, the outmost component which wraps the button component in this example, is actually catching the first tap event.

According to the docs, the reason it does this is to dismiss the keyboard in case it is up. Straight from the official documentation:

tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won’t receive the tap.

To prevent this from happening, and fixing the most annoying RN bug I know, set keyboardShouldPersistTaps to "always".

Like this:

<ScrollView
 keyboardShouldPersistTaps="always">// tappable elements go here</ScrollView>

Personally, I always set this prop when using ScrollView. Perhaps I haven’t faced a situation where I’d prefer the other behaviors. So if you are like me, remember to set this prop every time you use ScrollView.

You might disagree with me referring to this behavior as a bug when in fact, it is documented to work this way. You are not wrong. However, I’ve found that this is never the intended behavior in apps I come across and simply yields a frustrating experience.

To read more about this, check out the official documentation for ScrollView.

‍