Accelerating Thriva’s Health App Time-to-Market

CLIENT INFO

Thriva provides personalized home blood tests, allowing users to track and improve their health with GP-reviewed results.

Industry

Health care

Company type

SME

Region

United Kingdom

tech INFO

Thriva partnered with us to remarkably improve their mobile health app.

Technologies

React Native

Platforms

Mobile

Tech Stack

Expo & EAS | GrahpQL

highlights

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

months of work

800

code commits

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

Instant Preview

Developers can instantly preview code changes on real devices without a complex setup.

Let's connect

Thriva Project highlights

Robust architecture
High code coverage
Comprehensive testing strategy
Faster time-to-market
Mobile process automation
New features: biometrics, health kit integration

Let's connect

CHALLENGE

Thriva sought our expertise in React Native development, app redesign, and developer training. The goal was to elevate Thriva's healthcare app, streamline the development pipeline, and enhance the capabilities of the in-house dev team. Thriva's app, built with Expo CLI and libraries, faced challenges in maintaining dependencies, ensuring smooth Expo operations, and incorporating new features. The release process was primarily manual, involving command-line building and manual Expo dashboard uploads.

‍

work done

Callstack engineers proactively addressed these challenges, partnering with Thriva for staff augmentation.

Our developer, Adam Trzciński, worked with our client’s development team as a senior developer and React Native mentor. We helped Thriva in the following:

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

Ensuring your app meets the latest standards often involves crucial updates.

React Native upgrade

To comply with recent Android SDK API requirements, your app must be on React Native version 0.70 or higher, or Google Play will block releases.

The Thriva team encountered challenges during the React Native version upgrade, prompting their collaboration with Callstack for expert support. The initial state of the app was based on RN 0.70.5 and Expo 48, and the plan was to move to React Native 0.72.4 and Expo 49.

The process included:

Upgrading required dependencies
Fixing build problems and runtime crashes
Conducting exploratory tests
Final verification and post-testing fixes

We seamlessly transitioned to the new React Native version, upgrading dependencies, libraries, and incompatible packages. Additionally, we provided recommendations for further improving Thriva's development, shaping its codebase, and enhancing overall quality.

RESULTS

Thriva's application is now in exceptional condition

as the collaborative efforts between Thriva and Callstack led to transformative solutions. Thriva's healthcare mobile app now boasts:

Loosely Coupled Mini-Apps

Ensuring independence between mini-apps while maintaining necessary communication was a priority. The team addressed this by:

Isolating client states and minimizing shared states.
Allowing server state sharing through a centralized query client.

Navigation Complexity

Balancing centralized and decentralized navigation posed challenges. A centralized approach was chosen to simplify integration during initial development, with flexibility for future changes.

Dependency Maintenance

Managing native and JavaScript dependencies required meticulous configuration, streamlined by tools like rnx-align-deps and Re.Pack’s shared fields.

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

linking

Sorted out links, integrated content, and implemented html rendering.

We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

This information will be used only to contact you. For details, check our Privacy Policy.

As we embarked on our mobile app journey, Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem allowing us to build upon our app with speed and confidence. Their support through training and workshops made sure we could successfully grow our mobile team and know-how.

Donovan Isherwood

Engineering Manager

In brief

Thriva is a healthcare testing provider that offers personalized home blood tests. They are on a mission to help people worldwide to easily track and improve their health, knowing what’s going on in their bodies. With a simple finger-prick blood test, users can measure their liver function, HbA1c levels, vitamin D level, cholesterol level, thyroid profile, testosterone, and many more. The results are GP-reviewed.

Table of contents:

Heading 2

Challenges

Thriva sought our expertise in React Native development, app redesign, and developer training. The goal was to elevate Thriva's healthcare app, streamline the development pipeline, and enhance the capabilities of their in-house development team. In short, Thriva partnered with us to help them remarkably improve their mobile health app.

Work done

Thriva's application was initially built with Expo CLI and leveraged Expo's libraries. The challenge at hand included maintaining up-to-date dependencies, ensuring the smooth operation of Expo-related features (e.g., app building and release), and incorporating new features as they emerged. The release process was primarily manual, involving command-line building and manual Expo dashboard uploads.

Callstack engineers took a proactive approach to address these challenges. We cooperated with the Thriva team as a staff augmentation partner. Our developer, Adam Trzciński worked with our client’s development team as a senior developer and React Native mentor.

We helped Thriva in the following:

Managing dependencies, including Expo, react-native packages, and their associated dependencies, for each new release
Implementing custom GitHub Actions to automate the release process, including the creation of a QA Staging release for internal testing and the production release for the App Store and Google Play
Providing extensive training to Thriva's React Native team through pair-programming, code reviews, and workshops covering performance optimization and native code development.

thriva mobile healthcare app welcome screen and article

Solutions & Results

Thriva's application is now in exceptional condition as the collaborative efforts between Thriva and Callstack led to transformative solutions.

Thriva's healthcare mobile app now boasts:

A robust architecture with professional maintenance practices and a continuous flow of feature updates
A high level of code coverage, featuring quality-compliant unit and integration tests
Implementation of a comprehensive testing strategy, including the integration of end-to-end testing
Faster time-to-market and added automation around the mobile process to further speed up development and mobile releases
Implementation of new PoC features into the app such as biometrics and integration with a mobile health kit.

Last but not least, Thriva's development team has significantly advanced their knowledge in React and React Native as a result of our collaboration.

Latest React Native upgrade

As per the recent Android SDK API requirements, your app must run on the upgraded React Native version (at least 0.70). Otherwise, Google Play will block a release process when you publish a new app or an app update.

The process included:

Upgrading required dependencies
Fixing build problems and runtime crashes
Conducting exploratory tests
Final verification and post-testing fixes

It was a seamless switch to the new React Native version, and we carried it out holistically. We upgraded all the dependencies, libraries, and any packages that could be incompatible with new React Native.

Also, we shared a lot of recommendations for onward development improvements. The recommendations lay out the next steps for enhancing the Thriva project, shaping its codebase and boosting overall quality.