React Native BPM Chart Demo

Proof of concept for a React Native implementation of HeartBond, my heart rate monitoring app currently on the iOS App Store. It shows that calendar-based heart rate graphs can ship in React Native with an infinite-scroll experience that starts on the most current day: scroll down to load more history, scroll back up to return to today.

That UI can run on iOS and open a path to viewing Apple Health data on Android, or Google Fit data, when readings live in a shared store both platforms can reach, yielding a cross-platform health monitoring application. A macOS prototype is also included. Back ends include Rust and Go.

More detail: doc/architectural_overview.md, doc/build notes from readme.md.

Demo

Infinite scroll through daily heart-rate charts (iPad mini Simulator): two bottom page loads, then a slow return to today (~46s):

demo-scroll.mp4

How to re-record: doc/recording-scroll-demo.md.

Development server (Metro)

If the app shows Could not connect to development server, Metro is not reachable. Fix it as follows:

1. Start the Node / Metro packager from the React Native root (js/), not the repo root:

cd js
npm start

Confirm it is up: curl -s http://localhost:8081/status should print packager-status:running.

2. Packager URL in AppDelegate (ios/.../AppDelegate.mm):

   • Simulator: localhost:8081 (default).
   • Physical device: set packagerHost to your Mac’s LAN IP and port (e.g. 192.168.x.x:8081). Find the IP via System Settings → Network → Wi‑Fi → Details, or ipconfig getifaddr en0.

3. Same network: Wi‑Fi on for the device and Mac, both on the same LAN. Simulator only needs Metro on the Mac; device Wi‑Fi must reach the Mac’s LAN IP.

4. Reload the app after Metro is running.

Typical failing URL looks like:

http://localhost:8081/index.bundle?platform=ios&dev=true&...&app=com.ikiapps.reactnativebpmchartdemo

That means the native app is asking for Metro; start npm start in js/ first, then relaunch.

Quick run (iOS)

cd js
npm start          # terminal 1
npm run ios        # terminal 2

Or open ios/react-native-bpm-chart-demo/react-native-bpm-chart-demo.xcworkspace in Xcode with Metro already running.

React Native architecture (Fabric)

This app runs on the New Architecture with Fabric for UI rendering on iOS and Android:

• iOS: fabric_enabled => true in the Podfile
• Android: newArchEnabled=true in android/gradle.properties

Charts, scroll, and layout go through Fabric. The custom HeartRateData provider is still a classic native module (not a typed TurboModule); that does not change how the UI renders.

Stable Track Versions

This project is pinned to a stable track for Android development:

• Gradle: 8.10.2
• Android Gradle Plugin (AGP): 8.7.2
• Kotlin: 2.0.21

These versions are managed via android/gradle/wrapper/gradle-wrapper.properties and a patch script js/scripts/patch-react-native-gradle-plugin.js that aligns the React Native Gradle plugin dependencies.

Building shared frameworks

From the repo root: make or make frameworks builds all Go and Rust targets; use make go or make rust for one stack only.

Prerequisites

Android

• Android Studio
• Android SDK
• Java 21 (required for Gradle 8.10.2)

License

SPDX-FileCopyrightText: 2026 Daniel Zhang SPDX-License-Identifier: LicenseRef-Prototype-Evaluation-Only