Getting Started

Welcome!
What is React Native?
Join our Online Learning Community
How React Native Works
Expo vs React Native CLI
Node.js Download
Creating Our First React Native App
Working on Our First App
React Native Apps Are Hard Work!
React Native Alternatives
Course Requirements
Course Requirement Refreshers
Running the App on an Android Emulator
Running the App on an iOS Simulator
Course Outline
How to get the Most out of This Course
Useful Resources & Links

Diving into the Basics [COURSE GOALS APP]

Module Introduction
How to work with React Native Components
Setting Up A New Project
Planning the App
Working with Core Components
Getting Started with Styles
Flexbox & Layouts (Intro)
React Native Flexbox Deep Dive
Inline Styles & StyleSheet Objects
Components, Styles, Layouts
Working with State & Events
Outputting a List of Items
Styling List Items
Making it Scrollable with ScrollView!
A Better List: FlatList
More Components & Lists
Splitting the App Into Components
Passing Data Between Components
Working with Touchable Components
Deleting Items
Adding a Modal Overlay
More Flexbox Styling
Closing the Modal & Clearing Input
Finishing the Modal Styling
Wrap Up
Useful Resources & Links

Debugging React Native Apps

Module Introduction
What To Debug & How To Debug?
Running the App on a Real Device & Debugging
Handling Error Messages
Understanding Code Flow with console.log()
Using the Remote Debugger & Breakpoints
Working with the Device DevTools Overlay
Debugging the UI & Using React Native Debugger
Wrap Up
Useful Resources & Links

Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

Module Introduction
Setup & App Planning
Adding a Custom Header Component
Adding a Screen Component
Working on the Layout
Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
React Native Styling vs CSS Styling
Extracting a Card Component (Presentational Component)
Components & Styling
Color Theming with Constants
Configuring & Styling a TextInput
Cleaning User Input & Controlling the Soft Keyboard
Resetting & Confirming User Input
Configuring Components
Showing an Alert
Time to Finish the "Confirmation Box"
Adding Random Number Generation
Switching Between Multiple "Screens"
Adding Game Features: Hints & Validation
Checking the "Win" Condition with useEffect()
Finishing the Game Logic
Adding AppLoading
Adding Custom Fonts
Installing expo-font
A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
Adding Local Images
Styling Images
Working with Network (Web) Images
A Closer Look at the "Text" Component (and what you can do with it)
<View> vs <Text> - A Summary
Building a Custom Button Component
Adding Icons
Exploring UI Libraries
Managing Past Guesses as a List
Styling List Items & Lists
ScrollView & Flexbox (Yes, that works!)
Using FlatList Instead of ScrollView
Wrap Up
Useful Resources & Links

Responsive & Adaptive User Interfaces and Apps

Module Introduction
Finding Improvement Opportunities
Working with More Flexible Styling Rules
Introducing the Dimensions API
Using Dimensions in "if" Checks
Calculating Sizes Dynamically
Problems with Different Device Orientations
Controlling Orientation & Using the KeyboardAvoidingView
Listening to Orientation Changes
Rendering Different Layouts
Fixing the GameOver Screen
Updating All Code to Update Dynamically
The Dimensions API & Responsive UIs
Expo's ScreenOrientation API
Introducing the Platform API
Working with Platform.select() and Platform in "if" Checks
Using Platform-specific Code Files
The Platform API
Using the SafeAreaView
Wrap Up
Useful Resources & Links

Navigation with React Navigation [THE MEALS APP]

Module Introduction
Planning the App
Adding Screens
Adding AppLoading
Adding Fonts
React Navigation Docs
Installing React Navigation & Adding Navigation to the App
MUST READ: Installing Different Navigators
Creating a StackNavigator
React Navigation & Code Attachments
Navigating Between Screens
Alternative Navigation Syntax
Navigation Basics
Navigation to the "Meal Details" Screen
Pushing, Popping & Replacing
Outputting a Grid of Categories
Configuring the Header with Navigation Options
Passing & Reading Params Upon Navigation
Setting Dynamic Navigation Options
Default Navigation Options & Config
Navigation Params & Configuration
Grid Styling & Some Refactoring
Adding Meal Models & Data
Loading Meals for Categories
Rendering a Meals List
Passing Data to the Meal Detail Screen
Header Buttons: Using the Correct Version
Adding Header Buttons
Fixing the Shadows
Adding Tabs-based Navigation
Setting Icons and Configuring Tabs
navigationOptions inside of a Navigator
Adding MaterialBottomTabs
Adding a Favorites Stack
Adding a Menu Button & Drawer Navigation
Configuring the Drawer
More Navigation Config & Styling
Adding a DefaultText Component
Adding the MealDetail Screen Content
Time for the "Filters" Screen Content!
Passing Data Between Component & Navigation Options (Header)
[React Refresher] useEffect() & useCallback()
Wrap Up
Useful Resources & Links

State Management & Redux

Module Introduction
What is State & What is Redux?
Redux & Store Setup
Selecting State Slices
Redux Data & Navigation Options
Dispatching Actions & Reducer Logic
Switching the Favorites Icon
Rendering a Fallback Text
Adding Filtering Logic
Dispatching Filter Actions
Debugging Redux in React Native Apps
Wrap Up
Useful Resources & Links

Time to Practice - THE SHOP APP

Module Introduction
Planning the App
Creating the Basic Project Setup
The Products Overview Screen
Setting Up a Navigator
Styling the Product Items
Adding Touchable Components
Working on the Product Details Screen
Using Custom Fonts
Adding Items to the Cart
Implementing Header Buttons
Outputting Cart Items
Adding Logic to Delete Items
Adding Redux Logic for Orders
SideDrawer & The Orders Screen
Clearing the Cart
Styling Order Items
Making the "Show Details" Button Work
Building the "User Products" Screen
Reorganizing the ProductItem Component
Deleting Items
Adding Basic Editing & Navigation Logic
Handling User Input
Using Params to Submit User Input
Dispatching Actions for Creating & Updating
Time to Improve the App!
Wrap Up
Useful Resources & Links

Handling User Input

Module Introduction
Configuring TextInputs
Adding Basic Validation
Getting Started with useReducer()
Finishing the Merged Form & Input Management
Moving Input Logic Into A Separate Component
Connecting Input Component & Form
Tweaking Styles & Handling the Soft Keyboard
Alternatives & Wrap Up
Useful Resources & Links

Http Requests & Adding a Web Server + Database

Module Introduction
Setup & How To Send Requests
Installing Redux Thunk
Storing Products on a Server
Fetching Products from the Server
Displaying a Loading Spinner & Handling Errors
Setting Up a Navigation Listener
Updating & Deleting Products
Handling Additional Errors
Storing Orders
Displaying an ActivityIndicator
Fetching Stored Orders
Adding "Pull to Refresh"
Wrap Up
Useful Resources & Links

User Authentication

Module Introduction
How Authentication Works
Implementing a Basic Login Screen
Adding User Signup
Logging Users In
Managing the Loading State & Errors
Using the Token
Mapping Orders to Users
Improved Mapping (Scoping)
Using AsyncStorage
Implementing "Auto Login"
Adding Logout
Implementing "Auto Logout"
Auto-Logout & Android (Warning)
Wrap Up
Useful Resources & Links

Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]

Module Introduction
Planning the App
Navigation Setup in Next Lecture
Screen & Navigation Setup
Getting Started with the Form
Redux & Adding Places
Outputting a List of Places
Accessing the Device Camera
Configuring the Camera Access
Using the Picked Image
Storing the Image on the Filesystem
Changed SQLite Import
Diving into SQLite for Permanent Data Storage
Storing Data in the Local Database
Fetching Data from the Local Database
Getting the User Location
Showing a Map Preview of the Location
More on Environment Variables
Displaying an Interactive Map
Adding a Marker
Making the Picked Location "Saveable"
Storing Picked Places
Updating the Location Screen When the Location Changes
Storing the Address
Displaying the "Details" Screen
Finishing the "Map" Screen
Running the App on iOS
Running the App on Android
Wrap Up
Useful Resources & Links

Building Apps Without Expo

Module Introduction
Alternatives to Expo
Building Apps with Just the React Native CLI
Live Reload and RN CLI Apps
Important: Using React Native Image Picker
Adding Native Modules to Non-Expo Apps
Understanding Expo's "Bare Workflow"
Ejecting from Expo's "Managed Workflow"
When To Use Which?
Useful Resources & Links

Publishing React Native Apps

Module Introduction
Deployment Steps
Configuring the App & Publishing
Configuring Icons & The Splash Screen
Working with Offline Asset Bundles
Using "Over the Air Updates" (OTA Updates)
Building the Apps for Deployment (iOS & Android)
Publishing iOS Apps without Expo
Publishing Android Apps without Expo
Configuring Android Apps
Useful Resources & Links

Updating to React Navigation 5+

Module Introduction
What Changed?
Preparing the Project
More Information & Updating the Project Dependencies
Moving from the "Registry-like" to the "Component-based" Navigation Config
First Migration Steps
Converting More Stack Navigators to the New Config
Migrating the Drawer Navigation
Replacing the "Switch" Navigator & Auth Flow
Logout & Further Fixes/ Adjustments
Extracting Screen Params
Setting Screen Options Dynamically
Remaining Migration Steps & Roundup
A Summary Of All Important Changes
Useful Resources & Links

Push Notifications

Module Introduction
Understanding Notifications
Sending Local Notifications
Getting Permissions
Controlling How Notifications Are Displayed
Reacting to Foreground Notifications
Reacting to Background Notifications
How Push Notifications Work
Expo & Push Notifications
Getting a Push Token
Sending Push Notifications
Using Expo's Push Server
More on Push Tokens
Adding Push Notifications to the Shop App (1/3)
Adding Push Notifications to the Shop App (2/3)
Adding Push Notifications to the Shop App (3/3)
Push Notifications in non-Expo Managed Apps
Module Resources

Course Roundup & Next Steps

Roundup & Next Steps

Bonus: JavaScript Refresher

Module Introduction
JavaScript - A Summary
Project Setup
Core Syntax Refresher
let & const
Arrow Functions
Objects: Properties & Methods
Arrays & Array Methods
Arrays, Objects & Reference Types
Spread Operator & Rest Parameters
Destructuring
Async Code & Promises
Wrap Up
Module Resources

Bonus: React.js Refresher

Module Introduction
What is React
A Starting Project
Understanding JSX
Understanding Components
Working with Multiple Components
Working with Props
Rendering Lists of Data
Handling Events
Parent-Child Communication
Managing State
More on State
User Input & Two-Way Binding
Wrap Up
Module Resources

Bonus

Bonus: More Content

Popular Searches

React Native - The Practical Guide

Online

₹ 4999

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus

Getting Started

Diving into the Basics [COURSE GOALS APP]

Debugging React Native Apps

Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

Responsive & Adaptive User Interfaces and Apps

Navigation with React Navigation [THE MEALS APP]

State Management & Redux

Time to Practice - THE SHOP APP

Handling User Input

Http Requests & Adding a Web Server + Database

User Authentication

Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]

Building Apps Without Expo

Publishing React Native Apps

Updating to React Navigation 5+

Push Notifications

Course Roundup & Next Steps

Bonus: JavaScript Refresher

Bonus: React.js Refresher

Bonus

Instructors

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone