Modernizing React Native codebase and adding platform features

The client reach out to Callstack to asses performance of the existing application, improve overall UX and prepare codebase for future features. During our initial research, we have identified the following challenges:

Code base

The code base was in poor shape and as such needed refactoring. The previous socket implementation wasn’t working correctly and there were a lot of issues with code quality (i.e. massive copy-paste repetitions, a poor static code analysis, duplicates in stylesheets).

Payment methods

For users considering a professional therapy, there were no payment methods available in the app, which was a serious inconvenience. Payment options had to be added to enable paying by credit card for an online therapy and making an in-app purchase for digital content.

In-app linking

There were internal links in the app going to the web platform. Following them, the user left the application and ended up on 7 Cups website. That was definitely something to fix. Implementing an in-app linking feature is one of the ways to keep the user in the app. And the user should stay in the app.

For maximum effect, we decided to adopt an agile collaboration model in which our team closely cooperated with the client and his team. It allowed us to make swift adaptations to the original scope of work and, this way, meet the always changing needs and requirements.

Code refactoring

First, we had to improve overall shape of the codebase. It wasn't initially planned, but was required to reduce time needed to build and maintain new features in the future.

Overall, we took care of the following:

• Socket refactoring
• Migration to Typescript
• In-app linking
• Major dependencies upgrade (e.g. Expo, React Native, React Navigation, React Query)
• Restructuring and re-organizing code for easier maintenance
• New design with dark mode support

Payments

Another biggie was taking care of the app payment methods. We created two options for users who want to get access to an extended version of the app or to pay for an online therapy:

• In-app purchases which use Google Play or App Store to process payments for the extended app content
• Credit card payments which allows for charging the user card on a regular basis (as long as their therapy lasts)

In-app linking

We added support for deep links, enabling users to switch between web and mobile version of the app.

Throughout the project, we closely collaborated with the client who took care of backend work, designs and tests. Our mutual efforts and successful partnership resulted in a fresh look and improved functionality.

A new version of 7 Cups app already came out in January and is available in both Google Play and App Store.

Since 7 Cups provides therapy and counseling, it was especially important for us to ensure the upgraded version is up and running. As it definitely is, we are happy with the job done. Our solutions were practical and effective, and so are the ongoing improvements in the app maintenance phase.