Package Exports

react-native-daily-step-counter
react-native-daily-step-counter/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-daily-step-counter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-daily-step-counter

WIP. Definitely not production-ready. 🚧

It collects step counts and lets you query the data per date without accessing healthkit or google fitness api.

Abstract

Basically it's a CMPedometer implemented in React Native.

On ios, there's a RNReactNativeDailyStepCounter.m which is a mere implementation of CMPedometer.

On android, PedometerImple.java is as android implementation of CMPedometer. PedometerImple is actually a SenserEventListener which listens to step counter event and save daily step count to shared preferences.

Not knowing both android and ios, I'm not 100% sure if it works properly and is good to go. Any idea and opinios are welcome.

Usage

| Installing package

yarn add react-native-daily-step-counter

| Getting Permission

( not implemented yet.)

sepcify permissions needed.

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest>
    ...
    <!-- belog API ver 28 -->
    <uses-permission android:name="com.google.android.gms.permission.ACTIVITY_RECOGNITION" />
    <!-- above API ver 29 -->
    <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
    ...
    <application />

</manifest>

<!-- ios/your_build_target/info.plist -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>NSMotionUsageDescription</key>
    <string>Need Motion Permission</string>
    ...
</dict>

check and ask for permission. ( recommend using react-native-permission ). FYI, it seems to me that calling CMPedometer.queryPedometerDataFromDate for the first time force ios to request for the permission. Below is how I dealt with permission.

class Pedometer {
    ...
  private askPermissionIOS(): Promise<boolean> {
    return new Promise(res => {
      this.queryPedometerDataBetweenDates(
        new Date().getDate(),
        new Date().getDate(),
        (error, data) => {
          if (data?.numberOfSteps === null) return res(false);
          res(true);
        }
      );
    });
  }

  public async checkPermission() {
    if (Platform.OS === 'android') {
      const permission = await check(PERMISSIONS.ANDROID.ACTIVITY_RECOGNITION);
      return permission === 'granted';
    }
    if (Platform.OS === 'ios') {
      const permission = await this.ios_authorizationStatus();
      return permission === 'authorized';
    }
    return false;
  }

  public async requestPermission(): Promise<boolean> {
    if (Platform.OS === 'android') {
      const permission = await request(
        PERMISSIONS.ANDROID.ACTIVITY_RECOGNITION
      );
      return permission === 'granted';
    }
    if (Platform.OS === 'ios') {
      const granted = await this.askPermissionIOS();
      return granted;
    }
    return false;
  }
  ...
}

| Getting step count

you can get step count in 2 ways. By imperatively query for it (queryPedometerDataBetweenDates) or by listening to step count change event ( startPedometerUpdatesFromDate )

const Screen = () => {
  const [stepCount, setStepCount] = useState<number>(0);
  const [streaming, setStreaming] = useState<boolean>(false);

  const gettingStepCount = async () => {
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - 1); // getting date from yesterday
    startDate.setHours(0, 0, 0);
    const endDate = new Date();

    StepCount.queryPedometerDataBetweenDates(
      startDate.getTime(), // react native can't pass Date object, so you should pass timestamp.
      endDate.getTime(),
      (error, data) => {
        setStepCount(data?.numberOfSteps ?? 0);
      }
    );
  };

  const startStreaming = () => {
    setStreaming(true);
  }

  // android need initial listner register process.
  useEffect(() => {
    // on android, you should call StepCounter.startPedometerUpdatesFromDate once to start collecting step count.
    // make sure you get permission before you call this.
    // don't call stopPedometerUpdates unless you want to stop collecting step count.
    if (Platform.OS === "android") StepCounter.startPedometerUpdatesFromDate();
  }, []);

  useEffect(() => {
    if (streaming) {
      const startDate = new Date();
      date.setHours(0, 0, 0); // ios collects hours, minutes, seconds. but android only works for date. step counts are saved per date YYYY-MM-DD.
      StepCounter.startPedometerUpdatesFromDate(
        startDate.getTime(),
        (pedometerData) => {
          setStepCount(pedometerData.numberOfSteps);
        }
      );
    }
  }, [streaming]);

  return (
    <View>
      {stepCount}
      <TouchableOpacity onPress={gettingStepCount}>
        <Text>fetch data</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={startStreaming}>
        <Text>start data streaming</Text>
      </TouchableOpacity>
    </View>
  );
};