Activity recognition in React Native app

This tutorial will cover how to recognize user activity such as driving, walking, running and cycling in a React Native application. This is for Android and iOS both. Let’s start.

Assuming that you already have React Native installed in your pc. If you don’t have it, check this to install it.

Now create a new React Native project, let’s name it ActivityApp.

react-native init ActivityApp

To implement activity recognition, we will use react-native-activity-recognition package. This package uses Android Activity Recognition API for Android and CMMotionActivity for iOS.

To install react-native-activity-recognition package, use below command -

npm i -S react-native-activity-recognition

Now we will link this package with our project -

react-native link react-native-activity-recognition

Above method of linking is Automatic. if it doesn’t work, you can use Manual linking. Steps are given here.

Now we will take permission to use this Activity recognition service in app.

For Android -

Add activityrecognition service in android/app/src/main/AndroidManifest.xml

…
<application …>
…
<service android:name=”com.xebia.activityrecognition.DetectionService”/>
…
</application>
…

For iOS -

Add NSMotionUsageDescription key to your Info.plist with strings describing why your app needs this permission.

Now we will add code to recognize activity in index.js -

First add import statement -

import ActivityRecognition from ‘react-native-activity-recognition’

To start Activity detection -

startActivityDetection( ) {
// Interval (in ms) for Activity detection updates
const detectionIntervalMillis = 100;
ActivityRecognition.start(detectionIntervalMillis);

// Subscribe to updates
this.unsubscribe = ActivityRecognition.subscribe(detectedActivities => {
const mostProbableActivity = detectedActivities.sorted[0];
// mostProbableActivity will contain user’s current activity

alert(mostProbableActivity.type);
});
}

In Android,

detectedActivities is an object with keys for each detected activity, each of which have an integer percentage (0–100) indicating the likelihood that the user is performing this activity.
For example:
{
ON_FOOT: 8,
IN_VEHICLE: 15,
WALKING: 8,
STILL: 77
}

In iOS,

detectedActivities is an object with key to the detected activity with a confidence value for that activity given by CMMotionActivityManager.
For example:
{
WALKING: 2
}

detectedActivities.sorted getter will return it in the form of an array.
[
{type: “WALKING”, confidence: 2}
]

The following activity types are supported:

RUNNING
WALKING
STATIONARY
AUTOMOTIVE
CYCLING
UNKNOWN

To close activity detection -

closeActivityDetection() {
// Stop activity detection and remove the listener
ActivityRecognition.stop();
this.unsubscribe();
}

This is all about activity recognition in React Native application.
Reference: https://www.npmjs.com/package/react-native-activity-recognition

I implemented Activity recognition in my Google Summer of Code 2017 project.

Activity recognition screen of my GSoC project

Thank you for reading this article. If you have any suggestions or queries related to this project, you can comment below.