Human Pose Detection in React Native: Develop a mobile application to count squats in real-time

Hey, beautiful people across the Internet. I’m Himanshu Saini, a full-stack developer, today going to integrate the capabilities of Machine Learning in a React Native project to develop a simple mobile application to count the squats of a person in real-time.

The NPM package we are going to use for our project is react-native-human-pose, which is a lightweight yet performative package that gives almost 20+ fps in modern mobile devices

react-native-human-pose

Lets get started

First create a react native project using following command

npx react-native@latest init SquatsCounter

Next, lets add our package to the project using

yarn add react-native-human-pose react-native-webview

Or

npm i react-native-human-pose react-native-webview

Android

Go to android/app/src/main/AndroidManifest.xml and add this line

<uses-permission android:name="android.permission.CAMERA" />

iOS

cd ios && pod install

Then go to ios/SquatsCounter/Info.plist and these lines

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

After installing and configuring the package, lets head over to the App.tsx and add this piece of code

Then run your project on a real Android Device and see your Squats Counter in effect.
Hooray!!

Reach me out

LinkedIn: https://www.linkedin.com/in/himanshu--saini/

Email: himanshu.saiini.91@gmail.com