Enlear Academy

We provide high quality content on web development and cloud technologies for developers.

Follow publication

React-Native can do amazing things

React-Native: Did you know that We Can Extract Touch Gestures?

How to Extract touch gestures using a React-Native App?

Charuka Herath
Enlear Academy
Published in
3 min readNov 17, 2020

--

Continuous User Authentication is one of the up-and-coming research areas of the decade. Researchers use many methods to extract user data to train models and evaluate them using parameters such as fault acceptance rate (FAR), False Error Rate (FER), and F1 Score for continuous user authentication.

According to a study by Heng Zhang of the Center for Automation Research, a sensor hand was used to get user touch gestures from mobile phones. But when it comes to practical scenarios, this approach is not suitable. In this article, I will discuss an easy method to extract user touch gesture data from mobile apps by only using the touch screen.

Note: If you have no idea about how to set up a React Native app, please refer to the official setup guide.

Dive Deep Into Some Coding

In many studies, researchers have been concerned with two main gestures: swipe and zoom. Under these two gestures, researchers have considered whether a given swipe gesture is left to right, right to left, up to down, down to up, or if the given zoom gesture is zoom in or zoom out.

There is a built-in React Native handler to identify and extract data to capture the touch mentioned above gesture data, but we have to do a little bit of coding.

Libraries and event handers I used:

  • panResponder
  • Swiper
  • Firebase
  • Firestore

1. Installing and configuring libraries

React-native-swiper is the library that I used to track the swipe gesture data. You can install it by using yarn or npm:

npm i react-native-swiper —-save
yarn add react-native-swiper

Here, I have used Firebase and Firestore to save my data. You can install Firebase in the same way, using npm or yarn:

npm install --save @react-native-firebase/app
yarn add @react-native-firebase/app

--

--

Published in Enlear Academy

We provide high quality content on web development and cloud technologies for developers.

Written by Charuka Herath

PhD in AI and CS at Loughborough University London, UK. EX-Senior SE Sysco Houston, USA

No responses yet

Write a response