React Native Navigation
- Description
- Curriculum
- FAQ
- Reviews
The React Native Complete Navigation Course will let learn several different types of navigation options by building in a React Native App.
Navigation through pages is a corner stone of Web Applications and Mobile Applications for the same reason.
In this course we will learn how to make use of different types of navigations like Drawer Navigation, Bottom Tab Navigation, Material Top Tab Navigation, Stack Navigation and to navigate to a single screen dynamically with Route Parameters.
We will also learn how to nest 2 different kinds of Navigators in each other.
We will build and see how menus and navigation works both on Android and IOS platforms.
By the end of this course you will have a deep understanding how navigation works in React Native.
React Native is javascript framework that allows us to build cross-platform application both for iOS and Android and also for Web. This framework allied with Expo offers us several out of the box methods to build Mobile application for any case that we want.
React Navigation is third party library that we can make use to navigate between screens in our app by a gesture like press, long press or swipe, or by an action method that will run in our code.
In this course we will use React Navigation version 5.x so you should be able to follow using the latest version of this library.
This course will also be updated regularly, either with new content or updates to code itself.
LEARNING OUTCOMES
-
Over 2.5 hours of content.
-
Learn to navigate through your React Native Application with React Navigation 5.x.
-
Drawer Navigation.
-
Bottom Tab Navigation.
-
Material Top Tab Navigation.
-
Stack Navigation.
-
Nested Navigators
-
And navigate through Route Parameters.
-
1
OverviewWhat will we use and build in this course.
-
2
Join our Slack Channel -
3
Expo
Learn about Expo and it's CLI and install it's dependencies for generating a project.
-
4
Android Studio
Learn to install and configure Android Studio to run the Android Simulator.
-
5
XCode
Learn to run Xcode simulator to run the React Native App in iOS system.
-
6
Section introduction: Component and Dependencies
What is a drawer navigation how to make use of it.
-
7
Custom Drawer
Creating our Custom Drawer component.
-
8
Generate Screens
Create the Screen that will be used to navigate to.
-
9
Drawer Navigator
Build and Configure our Drawer Navigator.
-
10
Header
Add an Header to our App to show open Drawer controls.
-
11
Drawer Navigation Exercise
-
12
Drawer Icons
Learn to Add icons to our Drawer Navigation commands.
-
13
Section Code
-
14
Section introduction
What is a Bottom Tab Navigator and how to build it.
-
15
Set up Component
Setting up initial components.
-
16
Screens
Create the Screens that will be used for Navigation.
-
17
Navigation Tabs
Create the Navigation Tabs.
-
18
Tab Options
Learn and modify the Tab options for our Bottom Tab Navigator.
-
19
Section Code
-
20
Section introduction
What is Stack Navigation and how to use it.
-
21
Set up Component
Setting Up initial component.
-
22
Screens
Build the Screens where we will navigate to.
-
23
Stack Navigator
Build and make use of our Stack Navigator.
-
24
Animations
Add and use animations to transition between screens.
-
25
Section Code
-
26
Section Intro
What is Material Top Bar Tab Navigation and how to use it.
-
27
Set Up Component
Setting up initial components.
-
28
Components
Create the components that we will navigate to.
-
29
Safe Area Insets
Create safe area Insets to avoid the mobile phones top notch.
-
30
Nested Navigators
We will learn how to nest a navigator inside another navigator.
-
31
Section Code
-
32
Section Intro
What are route params and how to make use of them.
-
33
Set Up Component
Setting up initial component.
-
34
Data and Home Component
Create main components and add some data.
-
35
Custom Card
Create our own custom clickable card.
-
36
Single Page
Navigate to Single Page
-
37
Route Params
Navigate and consume data from our route params.
-
38
Section Code
