Lead Mobile Developer (iOS & Android)· 2022

Triwi

React NativeGraphQLHealthcareIoTReact NavigationContext APIBluetooth

Overview

Triwi is a healthcare app built with React Native that connects to a wearable IoT device for self breast exams. Users can view the data the wearable collects on a data grid in the app, record any unusual findings, and log their examination history. A reminder function follows the user's menstrual cycle to support early detection.

I led development for both the iOS and Android apps as the sole mobile developer, using React Native with GraphQL for all data requests and Context API for app state. Stack navigators and a fully custom bottom tab navigator (not an off-the-shelf component) structure the app, with animations throughout. Almost the entire UI was built from scratch without third-party component libraries.

Mehmet Mutlu - The Breast Examination App - Part 1

Mehmet Mutlu - The Breast Examination App - Part 2

Onboarding and profile setup

A sign-up flow leads into a three-screen animated onboarding carousel introducing the wearable device, built with React Native's FlatList. From there, a questionnaire builds the user's profile, collecting details like number of children, last period date, and average cycle length through Context API, including a separate path for users who don't have periods. Custom components built from scratch for this flow include a scroll picker (also built on FlatList and reused as a custom date picker) and an app-wide custom toast messaging system.

Triwi onboarding animation introducing the wearable device — Animated onboarding, introducing the wearable device.

Triwi onboarding questionnaire intro screen — Leading into the profile questionnaire.

Home and examination history

The home screen shows the countdown to the next self-exam and a shortcut to start one. The examinations screen tracks history at a glance: total checks completed versus checks where something was tagged as a finding.

Triwi main screen showing next check countdown and start examination — Home: next check countdown, start examination.

Triwi examinations screen showing total and tagged check history — Examination history: total checks versus tagged findings.

The self-exam flow

Starting an examination opens a short tutorial with small animations, then a bottom sheet modal walks the user through the exam. When the wearable (the Bluetooth-enabled, touch-sensitive bra) is connected, touching an area twice marks that location on the app's data grid, tracked through an animated progress bar across the multi-step exam pattern. Users can add findings per area via the bottom sheet, choosing from a set of finding types, working through a vertical examination pattern for each side, then add free-text notes before saving. Past examinations are kept in history with their recorded areas, findings, dates, and notes, alongside a settings screen and an in-app tutorial explaining how the process works.

Triwi exam started with the Bluetooth wearable connected, first touch marked on the grid — Bluetooth device connected, examination started.

Triwi findings selection bottom sheet with finding type icons — Selecting a finding type from the bottom sheet.

Triwi exam grid with multiple findings marked — Findings marked across the grid.

Triwi completed exam summary with findings and notes — Exam completed: findings and notes saved.

Live at triwiglobal.com. A walkthrough with my own commentary is on Loom: https://www.loom.com/share/d7bd1928fdd045f88b08aa2009ee51fc