The React
Native Guide
Created by JS 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 →
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
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
Prerequisites
JSX
Props
State
Styling
Conditional Rendering
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.
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 React
2
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Formik
React Hook Form
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
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:
Redux
Mobx
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
Roadmap
Animations
react-native-animatable
Popmotion React Spring React
Native Shared Element
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.
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.
Roadmap
Learn more about different
essential components and APIs
Button
Switch
FlatList
SectionLis
t Alert
Toast
Modal
StatusBar
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.
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.
Project Ideas
Food Delivery App
Music App
Chat App
Recipes app
News App
Fitness App
Dating App
Tutor Finder App
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
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
