Nudge Health - now powered by Expo!

I should have put this out a while back, as we soft-launched in late May/ early June, but wanted to belatedly put something out here about the go-live our new version Nudge Health. This is the culmination of our transition from Cordova to React Native. We used ExpoKit, as we needed to support Apple Health, and we started before bare workflow was announced. We’re looking forward to going bare once OTA updates arrive, though!

You need to be working with one of our health coaches in order to most effectively use the app, so it’s not really something you can try per-se, but I can at least show off a few of my favorite things we worked on from a technical perspective.


One of the biggest UX changes was a revamped health logging screen, supporting quick entry by scrolling down the entire list as you start from the top and enter data. Perhaps one of the biggest challenges was fine-tuning the keyboard avoidance between the two platforms as you jog down the list.


One of our big goals was to provide better visualization of health trends. To that end, we used react-native-svg to create these lovely graphs, which can be expanded to show additional details and to scroll back and forth over time. iPad isn’t a major focus for us, but we do support it, and the graphs look really cool there, as we let the default view expand out to an entire month on the larger screen. We ended up building a compatibility layer to make these same graphs work on our web-based coach dashboard.


I should add that, this isn’t really one app, but actually several dozen, as we support several white label versions. Yes, Expo scales here! OTA updates make it waaaay easier to support all the different versions of the app.

Thank you so much to the Expo team for making awesome stuff, and all the help and advice along the way! The platform has grown by leaps and bounds since we started building our first managed workflow app two years ago, and we’re really happy with where everything is headed. I love telling other devs about how much this platform has changed app development for the better.

6 Likes

Looks awesome!! Congrats
Really appreciate the love for Expo, too :blue_heart:

Wow indeed looks nice congrats, as I tried to just check app size by downloading and installing but couldn’t go further as you mentioned it requires ref code.
Would be glad to know what was your technology stack on top of expo such as UI libraries, Auth frameworks etc. etc.

Thanks! We use MobX State Tree/ Axios for data/ API wrangling. For the UI, it’s pretty typical stuff, like React Navigation. react-native-snap-carousel is one of our favorite libraries for swappable views, and we use react-native-svg extensively for our visualizations. I find react-native-iphone-x-helper absolutely critical for tweaking for iPhone X on a per-view basis (SafeAreaView is not enough IMO). react-native-parsed-text was great for providing clickable links in chat and other custom text fields. Both DM and message boards use react-native-gifted-chat, though we’ve overridden parts of it extensively (which to its credit, is quite possible), and we may roll our own entirely there in the near future.

For the activity picker in the first screenshot above, we actually started with InputAccessoryView, but it doesn’t work on Android, and we even found a nasty bug with an embedded horizontal scrollview in iOS, so we built a wrapper around the main app view that will use absolute positioning to place an accessory view just above the keyboard. Toggling it on and off, and changing what accessory view to use, can be controlled using React’s Context API.

2 Likes

Thanks a lot for sharing it heps people like me who are prototyping using Expo.
Wish you and Expo a best luck :+1: