How to Create a React Native App Using Typescript

At Cheesecake Labs, we recognize that business requirements, budget constraints, and set timelines inherently drive application development. These factors provide the essential backdrop for the development of value in applications.

Whether you’re dealing with an MVP or an app with mature business rules, we know how important it is to have a structured approach from the start.

This structure is built based on principles of evolutionary architecture, optimizing team productivity, adhering to robust standards to ensure code quality, and is highly flexible to facilitate technological evolution and scalability. This approach drives efficient project delivery and sustains continuous evolution and maturity of business rules over time.

One of the ways we make this happen is by building cross-platform mobile apps using tools like React Native and TypeScript. Let’s get into the details.

What is React Native?

React Native is a JavaScript framework you can use to build mobile apps on multiple platforms using the same base code. That means you can create web applications that also work natively as iOS apps and Android apps.

React Native is based on React, a JavaScript framework Meta developed to build user interfaces. Because React Native is based on React and JavaScript, it’s a great option for web developers looking to dive into mobile application development.

What is TypeScript?

TypeScript is an open-source programming language created by Microsoft. It is a superset of JavaScript meant to add more features and functionality for using JavaScript at scale. TypeScript adds syntax to JavaScript, letting developers add type definitions to data in their code.

These clearly defined types make developing larger-scale apps easier in a few important ways:

Documentation: TypeScript automatically builds documentation for your code by letting you specify types.
Better debugging: TypeScript can check if your code works before execution, making it easier to spot errors.

Essentially, TypeScript helps fill in JavaScript’s gaps, making it more useful for scaling applications.

Why build a React Native app with TypeScript?

There are a couple of reasons why putting these two tools together works so well for mobile app development.

Native cross-platform apps: React Native lets you create a single codebase that works natively across multiple platforms, including web, iOS, and Android.
Built-in type checking: TypeScript double-checks your React Native code, helping you ensure you’re using the right types.
Friendlier code: TypeScript makes your code more readable and easier to understand, which is helpful if you’re working with other developers or expect your code to be revisited later.
Changes are easier: Because you have defined types, refactoring is easier if you decide to make changes.
Easier to scale: TypeScript’s defined typing helps you expand projects quickly as needed, letting you create scalable applications from the start.

We’ve used React Native and TypeScript to build a starting point for our mobile app development projects. A componentized, Atomic approach to app development lets us speed up development and ensure our clients have robust, scalable applications that can grow with them.

The philosophy behind the code

We start all our projects with a set structure that we’ve refined through 10 years of tackling challenges at Cheesecake Labs. This approach reflects our accumulated experience and underscores our commitment to delivering technological solutions that exceed expectations and stand out as industry benchmarks.

Here’s what we’ve put together as our standard methodology.

Architecture

Our methodology for application development is based on Atomic Design principles, which involve efficient componentization of visual elements and layered structuring of the architecture. This approach uses interfaces responsible for the entire transport layer.

At the application layer, we use a Package-by-feature concept to organize modules in an independent and scalable way. In addition, we introduced the Core layer, centralizing common resources and services throughout the application.

Here is a representation of the ideal structure where our projects begin, providing a solid foundation for continuous development and improvement.

Components

We use the concepts of Atoms, Molecules, and Organisms present in Atomic Design. If you want to dive deep into these concepts and how we use them, check out our previous blog post, Rethinking Atomic Design for React projects.

Application

In the application layer, we concentrate on modules responsible for all business logic.

We adhere to the Package-by-feature concept, which involves creating independent and self-contained modules. This approach makes the codebase more readable and less prone to errors.

We also use services and repositories to help us distribute responsibilities and achieve better code reusability.

For state management, we employ Zustand. Due to its lack of boilerplate code, it is a fast and simple tool that enables clean and scalable code.

application layer react native app typescript

Testing

For our applications, we run unit tests as standard. This ensures satisfactory coverage of our components and how they render. We can guarantee that the Store facilitates the expected flow for state transitions.

For repositories, we test whether all exceptions are properly handled and if all behaviors align with expectations.

Here’s an example of the tests for the SignIn Store, where a desired sequence in state change is expected.

example test for signin store react native app

Pipeline CI/CD

For customizable and flexible deployment processes, we use Fastlane. This tool automates the creation of builds and the publication of applications in a personalized manner. It stands out for its efficient integration with GitHub actions, streamlining our workflow during continuous development.

A jumping-off point for further customization

This structure is our ideal starting point for most cross-platform app projects. It gives us a solid jumping-off point to work from at the outset of a project that we’ll then modify and evolve based on the context of the project. This approach lets us bake scalability into apps from the start and prepare our code for future technological developments.

Learn more about how we build apps at Cheesecake Labs

If you found this look behind the curtain at Cheesecake Labs interesting, you should check out the rest of our blog to learn more about our processes and approach to development.

We’ve got lots of posts covering all sorts of topics, including building scalable systems with Django, how we conduct market research, and how product managers can make effective decisions — to name just a few!

And if you’re looking for an experienced partner to help you build robust, scalable applications, let’s chat! We have the right team, the right skills, and a proven process to help you bring your ideas to life.

About the author.

Natam Oliveira

VP of Engineering at Cheesecake Labs - IA / IoT enthusiast. Go bravely where no one have never gone before!