The React

Native Guide
Created by JS Mastery

Visit jsmastery.pro for more

Introduction

React Native - a framework used to build

amazing Android and iOS native mobile

applications using the library you already know

all about - React.js.

React Native is a cross-platform library that

allows you to build native mobile apps using

React & JavaScript. This differs from frameworks

like Cordova, where you use HTML to create the

UI, which will then just be displayed within the

device’s integrated mobile browser (WebView).

React Native has built-in components compiled

to native UI components, while your JavaScript

code is executed through a virtual machine. This

makes React Native more performant than

Cordova.

https://jsmastery.pro JavaScript Mastery

Prerequisites
Here are the Prerequisites before learning

React Native:

1 JavaScript

If you are a complete beginner with no idea

about programming, you must first learn

JavaScript and understand working with it

before learning React or React Native. Without

essential concepts of JavaScript, you’ll

understand nothing.

Start learning the basics of JavaScript at first,

and once you are comfortable with that, then

move to learn some advanced concepts of

JavaScript.

Things you should consider learning →

https://jsmastery.pro JavaScript Mastery

Prerequisites

Basic Syntax

ES6+ features

Template literals

Array Methods

Object property shorthand

Destructuring

Rest and Spread operator

Promises

Async/Await syntax

Import and export syntax

https://jsmastery.pro JavaScript Mastery

Prerequisites

2 Learn React.js

Learn React.js. It’s not officially mandatory to

learn React.js before learning React Native but

a solid knowledge of React concepts will give

you a big advantage in learning React Native.

So I highly recommend learning React first

before learning React Native. You don't have

to master React.js; you’re good to go with the

basics concepts.

Concepts you should know in React.js →

File & Folder structure

Components

https://jsmastery.pro JavaScript Mastery

Prerequisites

JSX

Props

State

Styling

Conditional Rendering

If you haven’t learned React yet, I suggest

watching my React crash course video.

Video Link

https://jsmastery.pro JavaScript Mastery

Prerequisites

3 Terminal

You should at least know the primary use of

the terminal. In React Native, you’ll work with

CLI tools such as expo-cli or react-native-cli.

I highly recommend learning how to use the

terminal. Also, it will be beneficial for you in the

long run.

One more reason to learn terminal is using

NPM, NPM does not have a GUI. Every package

must be installed manually via the npm

command in a terminal window.

This may seem annoying to non-shell users but

it actually offers much more control.

https://jsmastery.pro JavaScript Mastery

Roadmap
Now that you have completed the prerequisites,
you can finally start learning React Native.

Environment Setup
You’ll have two options to set up a React Native
environment.

1 Expo CLI

2 React Native CLI

So which one should you choose? Let’s see

what React Native recommends.

React Native recommends using the React

Native CLI if you are already familiar with Mobile
App Development.

https://jsmastery.pro JavaScript Mastery

Roadmap
However, if you are new to mobile app
development and want to get the project
quickly set up, Expo CLI is recommended.
Expo is built on top of the react-native CLI and
provides many built-in APIs and tools which will
take your good time to set up in the react-
native CLI.
But why do we have react-native CLI if Expo is
that useful? Many native APIs are not yet
supported in Expo, like Bluetooth and more. Not
all iOS and Android APIs are available. Read
more expo limitations here.
Still, I’d strongly suggest that you use Expo as

it’ll be more than enough for almost all of your

projects.
https://jsmastery.pro JavaScript Mastery
Roadmap
Learn the core components

of React Native
Once you set up the environment, you can learn
about the core components of React Native.
Most apps will end up using one or more of
these essential components.

The core components are:

1 View

In React Native, View is a built-in component. If

you are familiar with div in HTML, the view is like
div; it is used in mobile apps. The view is a
content area where you display your content.

https://jsmastery.pro JavaScript Mastery

Roadmap
2 Text
Text is an essential built-in component; it
displays text in the application. The Text
component supports nesting, styling, and

touch handling.

3 Image
A component for displaying different images,
including network images, static resources,
temporary local images, and images from local
disks, such as the camera roll.

https://jsmastery.pro JavaScript Mastery

Roadmap
4 TextInput
A foundational component for inputting text
into the app via a keyboard. Props provide
configurability for several features, such as
auto-correction, auto-capitalization,
placeholder text, and different keyboard types,
such as a numeric keypad.

5 ScrollView
Scrollview renders the extensive list or
meaningful content in view with a scrollbar. It
helps to view the critical content. It wraps
platform ScrollView while providing integration
with touch locking "responder" system.

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn to style your components

1 Style props

You can add styling to your component

using style props. You add style props to your
element. It accepts an object of properties.

2 StyleSheet

If you have a large codebase or want to set

many properties to your elements, writing our
styling rules directly inside style props will make
our code more complex. For that reason, React
Native gives us another way to write concise
code using the StyleSheet method.

https://jsmastery.pro JavaScript Mastery

Roadmap
3 Styled Components

You can use styled-components with React

native to write your styles in React Native as you
write regular CSS.

Styled-components is a library built for React

and React Native developers. It allows you to
use component-level styles in your applications.

Styled-components leverage a mixture of

JavaScript and CSS using a technique called
CSS-in-JS.

https://jsmastery.pro JavaScript Mastery

Roadmap
Flexbox
React Native uses Flexbox to handle the layout.
Flexbox makes it easy to distribute the UI
elements in the container. If you don’t know it
already, then you must learn it. Flexbox is useful
in designing your UI and an essential Roadmap
component to Learning React Native.

Defining the layout in React Native, it’s not that

hard; there are a lot of libraries out there that
can help you deal with layout, but If you know
how to use Flexbox, you won’t need to use any
libraries.

https://jsmastery.pro JavaScript Mastery

Roadmap
Navigation
There are multiple screens in almost all the
apps; you’ll barely find an app with just a single
screen. Managing the presentation of screens
and transitions between them is handled by
what is known as a navigator.

So if you have more than a couple of screens,

you need to define routing and navigation that
is scalable and easy to maintain.

If you’re a beginner, it is recommended to

use React Navigation. It’s the best navigation
library. It provides a straightforward approach
to navigation solutions.

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn Handling Touch
Users interact with mobile apps mainly through
touch. They can use a combination of gestures,
such as tapping on a button, scrolling a list, or
zooming on a map.

React Native provides components to handle

all sorts of common gestures and a

comprehensive gesture responder system to
allow for more advanced gesture recognition.

There are three touchable components.

TouchableOpacity, TouchableHighlight, and
TouchableWithoutFeedback. Among them,
TouchableOpacity is the most widely used one.

https://jsmastery.pro JavaScript Mastery

Roadmap
Forms
If you’re building an app, it’s almost a guarantee
that you’ll have to make at least one form.

You’ll probably build sign-ins, sign-ups, and

similar. We need a better way of working with
forms that are easy to write, maintainable, and,
more importantly, developer-friendly.

Developers in the React community build some

excellent libraries that make it possible to
create complex forms quickly. You can consider
the following options:

1 Formik

2 React Hook Form

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn different ways of debugging

Learn to debug using console.log

Learn debugging with Chrome

Learn debugging in VSCode

Familiarize yourself with debugging tools

https://jsmastery.pro JavaScript Mastery

Roadmap
State Management
If the application you’re working on is a bigger
application, you need a better strategy for
managing the state and sharing it across
components. To implement a better plan, you’ll
need to use a state management library.
A state management library is simply a way to
engender communication and sharing of data
across components. You can consider learning
the following options:

1 Redux
2 Mobx

https://jsmastery.pro JavaScript Mastery

Roadmap
Animations
Animations are essential for a good user
experience; in React Native, you have plenty of
options to work with energy and work things out
of your creativity.

They are mainly used to interact with users’

actions, which keeps the user more engaged
with your app. Animations can quickly become
one of the key factors that users love engaging
with on your mobile app.

Some excellent animation libraries are:

react-native-reanimated
react-native-motion
https://jsmastery.pro JavaScript Mastery
Roadmap
Animations
react-native-animatable

Popmotion

React Spring

React Native Shared Element

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn to implement
Authentication in your app
Almost everywhere, you will need to
authenticate users in your application.
Authentication allows us to secure our apps or
limit access for non-user members.

Authentication can also be used, for example,

to restrict access to a paid service or specific
service. So it’s helpful to learn how to implement
Authentication in React Native apps.

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn Testing
Quality unit testing is super important if you
want your application to be more stable. Jest,
enzyme, and Detox are great options.

https://jsmastery.pro JavaScript Mastery

Roadmap
Learn more about different
essential components and APIs

Button

Switch

FlatList

SectionList

Alert

Toast

Modal

StatusBar

https://jsmastery.pro JavaScript Mastery

Roadmap
Deployment
You finally made a react native app, and you
want your friends and family to be able to use it,
or maybe you even want to make a few dollars
off it! Publishing your application on the app
store and play store takes a bit of time, but I’d
still recommend that you learn how to do that.
In the meantime, there’s a much better solution.
You can have your application online and
accessible with everyone, in a matter of
minutes! The only thing you need to do is run
the command expo publish! After running it,
you’ll terminal with immediately give you the
link that you chare share with your friends, and
potential employers to get a job.
https://jsmastery.pro JavaScript Mastery
Roadmap
Optional — Good to know stuff

LESS, SASS
Style your applications in a better way

Typescript
Define your code in a better way

ESLint
Write clean, industry-standard and
maintainable code

And much more, there is no end of learning in web/app

development there’s always something to learn.

https://jsmastery.pro JavaScript Mastery

Project Ideas

Food Delivery App

Music App

Chat App

Recipes app

News App

Fitness App

Dating App

Tutor Finder App

https://jsmastery.pro JavaScript Mastery

Project Ideas

Job Finder App

Grocery Delivery App

Health Video Chat App

Note-Taking App

Travel-Planning app

Subscription Alert App

Car Sharing App

Learning App

https://jsmastery.pro JavaScript Mastery

Project Ideas

Cryptocurrency Tracker App

Medicine Delivery App

E-commerce App

Social Media App

Voice Translation App

Productivity App

Book Review App

Hotel Booking App

https://jsmastery.pro JavaScript Mastery

The End
Congratulations on reaching the end of our guide! But
hey, learning doesn't have to stop here.
If you're eager to dive deep into something this specific
and build substantial projects, our special course on
Next.js has got you covered.

The Ultimate

Next 14 Course

If you're craving a more personalized learning

experience with the guidance of expert mentors, we
have something for you — Our Masterclass.

JSM Masterclass Experience

If this sounds like something you need, then don’t stop
yourself from leveling up your skills from junior to senior.
Keep the learning momentum going. Cheers!

https://jsmastery.pro JavaScript Mastery