React Native Gesture Detector

Create and detect custom, complex gestures on React Native.

Challenge

A client approached me with a need for extremely rapid prototyping. Being on a tight schedule, he asked me to create multiple React Native prototypes, one of which needed custom gestures for user interaction.

Some low-level libraries and components will help you to handle simple gestures like regular touches, pans, flings, and pinches at most. Usually, that's plentiful (for mostly good reason).

However, it wasn't enough for the required prototype. There was no out of the box solution or even a whole lot of resources determined to provide a solution. So I was charged with the task to recognize a non-trivial gesture and assign various reactions according to user input. I had to come up with a completely original solution and do so in record time, as we were running in rapid prototyping mode.

Solution

I did my research (on surprisingly limited resources) and just started implementing a naive solution, which I gradually refined and improved until it would fit the requirements.

After successfully finishing the first version of the prototype, I started to abstract the gesture functionality away into a standalone library. In this process, I made the code modular and somewhat foolproof, optimized the performance by removing various bottlenecks, and wrote a concise API.

The basic idea is to create coordinates on the screen, that need to be visited in a particular order. Knowing the coordinates of the finger during a gesture, the library matches both sources. With this approach, you can determine if a gesture has been adequately performed.

Benefits

Because the basic idea is simple (unlike its implementation), the algorithm behind this library is incredibly fast. Equally simple is the usage of react-native-gesture-detector: Pretty much all you need to do as an app developer is to determine the coordinates of the points you want to be passed by a gesture.

To further cut the effort for library users, there are some utility components. One of which will record a gesture and create a reusable array of coordinates to plug into the detection component.

Star