Skip to main content

【Foxconn】 Architecting a React Native Telemedicine App for iOS and Android

Project Overview​

Foxconn Telecare Platform

I architected and independently built the patient-facing React Native telemedicine app for iOS and Android for Foxconn (Hon Hai). The app brought third-party sign-in, payments, appointment booking, real-time video consultations, and health readings from Bluetooth-connected medical devices into one patient experience. The product generated NT$8M+ in revenue.

The patient app was part of a broader telehealth platform that also included a physician reporting system and a bedside tablet for clinical vitals. My responsibility was the patient app, which I delivered end-to-end over a six-month project using React Native and Redux-saga.

Foxconn telemedicine app — patient experience · Download MP4

The Patient Experience​

The app gave patients a way to manage their remote-care journey from their phone:

  • Sign in with Facebook, Google, or Apple.
  • Book appointments through a doctor appointment calendar.
  • Pay for consultations using an integrated third-party payment service.
  • Meet doctors remotely through real-time video consultations.
  • Receive health readings from a Bluetooth-connected blood-oxygen meter during supported consultations.
  • Link family member accounts by scanning a QR code.

Architecture and Integrations​

As the sole developer of the patient app, I owned its frontend architecture and implementation across both mobile platforms. React Native provided the shared application layer, with Redux-saga supporting the app's asynchronous workflows.

Real-Time Video Consultations​

I integrated the Jitsi React Native SDK to let patients join video consultations with doctors from the app. To control when a consultation ended, I used polling rather than relying solely on SDK event callbacks. That introduced some latency, but provided a more reliable way to determine consultation state.

Bluetooth Medical-Device Readings​

I integrated a Bluetooth blood-oxygen meter using react-native-ble-manager, enabling the app to receive real-time readings during supported consultations. This connected the patient experience to a physical medical device, alongside the video consultation flow.

Keeping Bluetooth Sessions Reliable​

Bluetooth reliability mattered because patients needed to measure their blood oxygen before or during a consultation. I managed the Bluetooth flow with Redux Saga, adding a 10-second discovery timeout, a 30-second measurement timeout, and automatic retries of up to five total attempts when connection or measurement failed.

To avoid endless loading, the app showed clear connection and measurement states. When a step failed, we cleaned up the previous session before retrying. After the attempt limit, the flow stopped and gave the user a clear way to try again.

For performance, I kept Bluetooth operations isolated from unnecessary UI updates and updated application state only when meaningful connection or measurement data changed.

Reducing Updates from Repeated Bluetooth Scan Results​

One performance consideration was how we handled Bluetooth scan results: the same device could be detected many times during a scan. Updating the device list for every result could cause unnecessary screen updates, even when no new device was found.

The project collected scan results, removed duplicates, and updated the device list once the 10-second scan finished. This avoided updating the list for each repeated signal. The trade-off was that patients had to wait until the scan ended to see available devices.

A further improvement would be to show the first device immediately, then add new devices at short intervals. I would compare the number of device-list updates and the time it takes to show the first device before deciding whether to change the approach.

The demo below compares all three strategies using the same simulated scan. The interval-based strategy illustrates a possible improvement; it is not presented as an optimization already shipped in the product.

Interactive performance demo

One scan. Three update strategies.

Ready to scan0.00 / 10s · 0 signals · 0 unique devices

The same three simulated devices broadcast repeatedly during a scan.

Comparison baseline
Every scan result
✚ Telecare Bluetooth
Nearby devices
  • Waiting for scan results…
Device-list updates
0
First device visible
—
Unique devices shown
0
Possible improvement
First device + batches
✚ Telecare Bluetooth
Nearby devices
  • Waiting for scan results…
Device-list updates
0
First device visible
—
Unique devices shown
0

All strategies receive the same simulated signals and show devices without duplicates. The proposed approach shows the first device immediately, then adds new devices at 1-second intervals. Counts represent device-list state updates, not measured React renders or native-app benchmarks. Timing uses a 10-second simulated scan at normal speed.

Third-Party Sign-In and Payments​

I integrated Facebook, Google, and Apple sign-in, along with third-party payments. I also implemented QR-code scanning to link family member accounts, supporting patients who manage care with their families.

Appointment Booking and Rendering Performance​

I built the doctor appointment calendar and optimized the appointment list with React.memo to reduce unnecessary re-renders. A component-level optimization addressed the rendering bottleneck while keeping the existing data flow intact.

Engineering Tradeoffs​

The main challenge was bringing several third-party SDKs together across iOS and Android: video, Bluetooth connectivity, identity providers, payments, and QR-code scanning. Working independently meant owning how those integrations fit into a consistent patient experience.

I made focused tradeoffs where reliability or performance needed attention. Polling gave consultation-ending behavior a more dependable source of truth, while React.memo improved list rendering without requiring a broader state-management change.

Outcome​

The app shipped, enabling patients to book appointments, pay for care, consult doctors by video, and receive readings from a connected blood-oxygen meter. The product generated NT$8M+ in revenue.

This project demonstrates my ability to architect and deliver a cross-platform mobile product, integrate native and third-party capabilities, and connect engineering work to a measurable business result.

Project Details​

FieldDetail
RoleSole patient-app developer; frontend architecture and implementation
PlatformsiOS and Android
Tech StackReact Native, Redux-saga, Jitsi SDK, react-native-ble-manager
Core FeaturesThird-party sign-in, payments, appointment booking, video consultations, Bluetooth health readings
DeliverySix-month project
Product RevenueNT$8M+
Year2023 – 2024
ClientHon Hai Precision Industry Co., Ltd. (Foxconn)