The newline Guide to React Native for JavaScript Developers using TypeScript

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.


5.0 108 students started

6h 42m

Published |Updated

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.

What You Will Learn

How to build real world apps. Code along.

Build a Design System for your app

How to do state management in React Native

Storyboarding - Build apps from a Product perspective

Understand the React Native ecosystem, the right way

Jumpstart using a template that has ~200 github stars

Architecture that separates design and development

Learn UX best practices and troubleshoot performance bottlenecks

With React Native, the most important thing is to understand the ecosystem and how it comes together to create an app. By understanding the overall architecture, we will be able to take the full of advantage the platform.

The course will start by covering the fundamentals like setting up the navigation, setting up the screens, styles, and the UI elements, before moving on to more advanced topics such as state management, crash/error reporting, setting up analytics and middlewares, debugging, and performance optimizations. We will also learn how to avoid/fix frame drops - possibly the most watched parameter of any UI application.

We will also build a Design System and will follow the Atomic Design Pattern of building layouts. A Design System primarily consists of three parts:

  • UI Inventory and Patterns
  • Typography
  • Spacing and Styles

We will cover these in detail through the modules of the course. We will also learn about the React Native best practices, how to avoid rabbit holes, and focus on building a performant app.

This is an opinionated way of building apps with React Native. The fundamentals discussed in the course, like Atomic Design Pattern and Design System, can be applied to building any UI application, not just ones using React Native.

One Complete App

The course comes with one complete eCommerce sample app that is discussed through the modules of the course.


The course builds on an open-source boilerplate template and is kept up to date with React, React Native and dependent library versions. It is also updated with the latest APIs and libraries that are introduced, like Hooks, hermes, flipper etc.

Why this course

React Native for JavaScript Developers using TypeScript is based on years of experience in building React Native apps on production. The open-source boilerplate code discussed in the course is the platform for multiple apps on App Store and Play Store today. One of them being a Unicorn.

We will take a Product based development approach to building apps. React Native abstracts out a lot of platform specific nuances, so wouldn't focusing on building the app as an experience make the most sense. The design pattern will help us exactly with that, and we will put together a structure that is both scalable and extensible. This architecture also helps keep the design separate from the development.

At the end of this course, you will not only be able to build real-world apps with React Native, but also have the fundamentals of building any enterprise UI application.

Discord channel

Course Content

9 modules32 lessons6h 42m total

Getting Started

5 lessons 53m total

About this Course

For JavaScript developers who want to learn React Native. Learn how to build not just an app, but a Product.


3:40 minutes

Real-World Apps

Where does React Native fall within app categories? Should you invest in it?


12:08 minutes


Once you get the hang of the ecosystem around React Native, building apps will be the easy part. We need to consider storyboarding - the art of the right way to build apps.


8:19 minutes

Project Structure

Starting from the ground up? We'll look at the structure of the boilerplate code. An opinionated way to build apps, inspired by several apps in production.


15:42 minutes

Jumpstart App - Build and Run

Set up, build and run the boilerplate code, with a battle-hardened template and all the necessary tools already integrated.


13:08 minutes

Navigation and Screens

3 lessons1h 14m total


Stacked app or tabbed navigation, drawer menus and modals, and what's the best place to load user sessions, and other application data.


28:25 minutes

Icons and Badges

Set the app's launch screen and icons. Learn what image to put in native and what to bundle with React Native. Set the tab bar icons.


21:45 minutes


Learn about the screen lifecycle, and customize the app bar and the back button. We will also look at perceived load time and how to manage it.


24:09 minutes

Design System

7 lessons1h 58m total

Atomic Design Pattern

Atomic design is a mental model of how the UI should be built and laid out. It is at the core of how we are going to build our apps.


14:35 minutes


To build a design system we need to start by defining a typography; defining the fonts, colors and icons of the app.


13:22 minutes


Global styles help lay the design structure the app should follow. We'll extend our typography from the previous lesson to define styles, mainly for atoms, molecules and organisms.


8:36 minutes

Images and SVGs

Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.


13:32 minutes


We'll look at the Atomic design pattern's atoms and molecules; what they are and how they help build the design system of the app.


16:14 minutes


Built using atoms and molecules, Organisms are the complex components that deliver specific features. They are at the core of an app that delivers a consistent UX.


38:08 minutes

User Experience

What happens when we press a button on an app vs when we press a button on a web page? That difference is User Experience.


14:25 minutes

State Management

3 lessons1h 14m total


State Management in React Native has similar options to React.


31:21 minutes

React Context API

Context API provides a way to pass data through the component tree - no more prop-drilling!


12:18 minutes


Let's learn about Flux and Redux.


30:38 minutes

API calls and Middlewares

3 lessons1h 20m total

Making API calls

The very reliable "fetch". Learn the best practices for structuring the app's services and APIs to make them resilient to change.


39:13 minutes


Middleware allows for side-effects to be executed without blocking state updates. Logger and Analytics make for perfect use cases.


17:56 minutes

Async Storage

AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system for React Native.


22:58 minutes


3 lessons


How to debug a React Native app and a look at a working combination of tools and techniques. Remote Debugger, DevTools and error boundaries.


React Native Debugger

React Native Debugger and Flipper; the evolution of debugging options at React Native.


Running on a Real Device

Running on a real device is imperative to testing how the app will actually perform.



2 lessons

Best Practices

How JavaScript works. Learn best practices, find the node that is taking time to render, improve FPS performance, learn when to do image caching and find out about Hermes.



Does your app have lot of images or tabs? Thousands of items or an endless scroll? Let's look at how to handle it best in React Native.


CodePush and Error Reporting

3 lessons


CodePush is Microsoft's App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users' devices.


Error Reporting

Error reporting in JavaScript and native code


Bonus Content

3 lessons 1m total


The one-stop solution for micro-animations in a React Native app.


React Native SVG

Look no further than React Native SVG for your SVG solution.


1:27 minutes

Cheat Sheet

Some common references and special components supported by React Native, Android back handler, and a bit of know-how!


Your Instructors

Profile image for AmitM30

Amit Mangal

Front-end. Startup Contributor. Web / Cross platform apps.

👋 Hi! I'm Amit, a Senior User Experience engineer at Expedia Group. I have been working on React Native since the past 5 years and have built enterprise apps with React Native for multiple eCommerce orgs and a Unicorn startup. I've been a developer for nearly 15 years and love working on the front-end, most recently on React and React Native.

Frequently Asked Questions

What kind of approach to app development is followed?

We will be following the Atomic design pattern closely along with building a Design System for the app. These concepts are not tribal to React Native and are critical to building any UI application.

Who is this course for?

The course is designed for developers who have been working with JavaScript for a long time, and now want to build apps using React Native. The course does not assume any native app development experience.

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.

Are there any prerequisites?

The course assumes you are comfortable with JavaScript. We can learn React and Redux (state management) as we go, though some basic knowledge is required.

OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo



Student Review

Yushan Fernando

4 months ago


Before the beginning of this course, I never installed Android Studio, XCode. Actually didn't think about to move in developing in Mobile Apps because I thought Mobile App development is much complex than Web. But after start engaging with this course, I started to being comfortable in Mobile Development. I want to highlight that this course not just taught me about React Native but also Mobile Development. It's different than Web & this course very nicely teach that to me. I really enjoyed learning everything in this course. Really like to thank Amit to create such a great a course for Web Developers like us to move to the Mobile Development within a short period of time. Also I would like to thank to the Newline Team for creating along with the authors & providing these courses that covers much more different content than the other Platforms.

Luis Carrión

6 months ago


Excellent course, very good about atomic design pattern, UX, among other things. Course recommended

The newline Guide to React Native: A Product based development approach