When building a modern utility app, a gorgeous interface inside the application isn t enough anymore. The real battleground for user retention is the home screen.

When I was building WaterPaw, my minimalist hydration tracker, native iOS Widgets were a non-negotiable feature. Users should be able to glance at their home screen, check their hydration rings.

However, if you work in the React Native / Expo ecosystem, you know the historical dread of this task: iOS widgets require writing native Swift, configuring custom App Extensions, and managing code-signing targets in Xcode. Doing this manually completely breaks the seamless, managed Expo workflow.

Hey everyone!
If you ve ever tried to build a health, fitness, or utility feature in a cross-platform React Native app, you know the pain: you aren't writing one feature-set, you're fighting two entirely separate, heavy native ecosystems.

1. Beginning

On iOS, you have the mature Apple HealthKit API. On Android, you have Health Connect, Google s unified API framework that replaced the legacy Google Fit SDK. When I was building the hydration tracking architecture for my new app, WaterPaw, I wanted a completely modular solution.
I didn't want platform conditional checks (`Platform.OS === 'ios'`) messy up my UI layer. I wanted a single, abstract custom React hook that handled availability, permissions, and data fetching under one hood. Here is the clean design pattern I used to unify them, utilizing Expo Config Plugins to handle the native configurations automatically.