A Simple Method to Extract Touch Gesture Data From a React Native App

A Simple Method to Extract Touch Gesture Data From a React Native App

Collecting data for continuous user authentication from touch gestures. A Simple Method to Extract Touch Gesture Data From a React Native App

Continuous User Authentication is one of the up-and-coming research areas of the decade. Researchers use many types of 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 am going to 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 aforementioned touch gesture data but we have to do a little bit of coding as well.

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

Note: To allow the Android or IOS app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project.

react-native javascript react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

React Native Redux | How To Use Redux In React Native

React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.