search

AndrewDongminYoo / react-native-step-counter

[리액트 네이티브 라이브러리] 사용자의 걸음 수를 계산합니다. Android는 StepCounter (or Accelerometer) 센서 API를, iOS는 CoreMotion CMPedometer 를 사용하여 걸음 수를 측정합니다.
https://andrewdongminyoo.github.io/react-native-step-counter/
MIT License
29 stars 10 forks source link
android aosp cmpedometer gasp ios pedometer react-native stepcounter typescript

readme

React-Native Step Counter Library

FOSSA Status

ko-fi

한국어 사용자는 Korean version.를 참조하십시오.

This library provides an interface for tracking the number of steps taken by the user in a React Native app. This package uses the StepCounter (or Custom accelerometer-based step-counter) Sensor API on Android and the Core Motion framework on iOS to count the steps. It's built using Turbo Module, a new module development architecture for React Native. I made this library compatible with both new and legacy architectures. (Because the turbo module is still in the experimental stage. so it is not widely used.)

Installation

# if you use pure npm (what a classic!),
npm install react-native-step-counter
# or if you prefer to use Yarn (I love it's parallel install feature),
yarn add react-native-step-counter
# or if you use pnpm (it's fast and efficient),
pnpm add react-native-step-counter

Native modules will automatically connect after React Native 0.60 version. So you don't need to link the native modules manually.

👣 if you are using the legacy architecture, you need to follow the guide below. otherwise, you can skip next step.

IF YOU WANT SEE A DEMO IN STANDALONE REACT-NATIVE APPLICATION, SEE WALKING_TRACKER EXAMPLE REPO

Thank you for your interest in my first NPM open source package! I've received a lot of issue reports on various issues, especially the react-native's NEW ARCHITECTURE backwards compatibility, and I've more or less finalized those issues by fixing the code structure across the board. We had generated an example folder from create-react-native-library's template and used it for this project, but due to the structure of that template, we found that the example folder contained a lot of code that was not suitable for reference in a working app, as it was part of the overall development process rather than a standalone application. For this reason, I'm going to independently manage the example application, which we had been developing informally as a sub-repository, as a repository named walking_tracker. I'd really appreciate it if you could take this into consideration.

Setup the New Architecture

If you prefer to read the official documentation, you can find it here.

ANDROID

3 uses-permission, 3 uses-feature

<!--  android/src/main/AndroidManifest.xml-->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.stepcounter">
  <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
  <uses-permission android:name="android.permission.BODY_SENSORS_BACKGROUND" />

  <uses-feature
    android:name="android.hardware.sensor.stepcounter"
    android:required="false" />
  <uses-feature
    android:name="android.hardware.sensor.accelerometer"
    android:required="true" />
</manifest>

iOS

set NSMotionUsageDescription

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN">
<plist version="1.0">
  ...
  <key>NSMotionUsageDescription</key>
  <string>We want to access your motion data to count your steps.</string>
  ...
</plist>

Interface

Usage

To use the Step Counter Library in your React Native app, follow these steps:

Import the library into your React Native app.

import React, { useEffect, useState } from 'react';
import {
  isStepCountingSupported,
  parseStepData,
  startStepCounterUpdate,
  stopStepCounterUpdate,
} from 'react-native-step-counter';

Use the isStepCountingSupported method to check if the device has a step counter or accelerometer sensor.

const [supported, setSupported] = useState(false);
const [granted, setGranted] = useState(false);

async function askPermission() {
  isStepCountingSupported().then((result) => {
    console.debug('🚀 - isStepCountingSupported', result);
    setGranted(result.granted === true);
    setSupported(result.supported === true);
  });
}

Call the startStepCounterUpdate method to start the step counter service.

const [steps, setSteps] = useState(0);

async function startStepCounter() {
  startStepCounterUpdate(new Date(), (data) => {
    console.debug(parseStepData(data));
    setSteps(data.steps);
  });
}

Here's an example of a complete React component that uses the NativeStepCounter.

Link to Example Application: here

Change Log

See the Release Notes for a list of changes.

Contributing

See the Contributing Guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

FOSSA Status