Have you ever used more than 10 fingers on your React Native Application? Chances are you never needed to. Surprisingly, our application received many fingers than we anticipated.

Yes, that may sound odd, but it's very likely to attract many fingers (touch points) depending on your application's use case. For most applications, interacting with two fingers are more than enough, but imagine you are building a Whiteboard application in React Native with a large touchscreen device, building an interactive educational application, chances are you will have many users interacting with your application at the same time, or your device is in a place where people can easily touch the device while application is running.

How We Found!

During our regular Crashlytics monitoring we suddenly started seeing more crash reports from a small number of devices in a short time range. This looked odd, as there was no fixed pattern and the application has been running fine at this location for the past few months.

Looking at the stack trace report we found that most of these errors are related to just one particular issue. The https://github.com/software-mansion/react-native-gesture-handler library was complaining about ArrayIndexOutOfBoundsException exception. If you are a Java developer, this is pretty easy to understand that the trace is referring for element access outside of the actual array length.

What Happened!

Trying to find the root cause, it turned out that, our dashboard application which is running in large 75" touch screen Android devices were actually attracting a lot of curious users to interact with the application.

This is a good thing and a bad thing at the same time. Good thing is that more users are interacting with our application, bad thing obviously was that our application was crashing instantly without any warnings. Our best guess is that there are a bunch of kids around the device ;) and our application runs in the MDM Kiosk Mode, so they might be trying to switch application or something.

Once we figured this, we tried to replicate the issue on several of our testing devices and the application was immediately crashing. For an unexpected issue like this, it was pretty easy to replicate once you identify the access pattern.

Our Solution

It turned out that the library has a limit of only 12 touch points. 12 touch points is good enough for a regular one-user application, but not practical if your application and device allows many touch points. Similar to our use case, someone faced a similar problem just a while back.

https://github.com/software-mansion/react-native-gesture-handler/issues/1246

https://github.com/software-mansion/react-native-gesture-handler/pull/1175

The simple solution was to patch the library with our own limit.

How Many Fingers ✋🤚

We ended up setting the limit to 100 ✋🤚✋🤚 because we don't know how many people will try to interact with our application and the available device is too big.

When developing React Native applications for large touchscreen devices, it's crucial to consider the potential for multiple touch points. Identifying and addressing issues related to touch point limits can help ensure your application performs well in single-screen multi-user environments.

By adjusting the touch point limit in library, you can make your application more robust and user-friendly, even in scenarios where it attracts many curious users. This proactive approach to managing touch points will contribute to a smoother and more reliable user experience on large touchscreen devices.

Stay tuned for more technical insights and solutions to common challenges in mobile application development!