React Native Foundation

  1. Home
  2. React-native
  3. React Native Foundation

Tags: React Native

Get Up and Running with React Native + Hooks!, Firebase Realtime Database/Storage and redux in less than 5 hours!

Last updated 2022-01-10 | 4.6

- A Solid Foundation In React Native along with learning how to integrate firebase and Redux into your app.

What you'll learn

A Solid Foundation In React Native along with learning how to integrate firebase and Redux into your app.

* Requirements

* Basic understanding of Javascript and ES6

Description

In less than 5 hours not only will you have a solid foundation in react native but you'll also be able to :

1. Create a robust navigation flow with react navigation v3 and v5

2. Integrate firebase for authentication, database management and uploading images

3. Integrate redux to for app wide state management

4. Learn how to use react hooks!

All while building a practical cross platform application from scratch without having any prior knowledge in mobile app development.

Who this course is for:

  • Developers looking to get up and running with React Native in less than 5 hours.

Course content

12 sections • 91 lectures

Introduction 4 lectures

Introduction Preview 00:24

An introduction to the course.

What is react native? Preview 00:51

Understand what react native is and how is it different from other hybrid platforms like ionic.

What we're building Preview 02:51

Project Files and Get In Touch Preview 01:20

react-native-foundation-updated  - Project files updated and tested with expo sdk 37

Setup and Installation 4 lectures

Code Editor and Plugins Preview 02:08

Expo Cli Vs React Native Cli Preview 01:44

Installing Expo Cli Preview 02:15

Expo Developer Menu Preview 03:44

The Basics 4 lectures

Understanding the App.js Preview 02:18

View Component And Intro to Styles Preview 03:20

Intro to Flexbox Preview 03:40

Testing Our Knowledge - Our First UI + SafeAreaView Preview 03:07

Building our first App - The Book Worm App 9 lectures

Setting Up The Layout Preview 05:25

Adding State Preview 02:03

Props And Custom Component Preview 04:01

Adding a Button and TextInput Preview 04:41

Modifying the State to show/hide TextInput Preview 02:55

Adding A book Preview 04:36

setState() Gotchas Preview 05:23

Flatlist to display added books Preview 04:42

Mark book as read - .filter() Preview 03:01

Cleaning Up Our Code 5 lectures

Functional or Stateless Components Preview 04:22

PropTypes and Default Props Preview 03:09

Custom Button and props.children Preview 10:36

Cleaning Up The Styles Preview 02:42

Reusing Colors Preview 02:45

Digging Deeper 7 lectures

Intro to Lifecycle Methods Preview 06:32

Intro To React Navigation Preview 05:16

First Navigator - AppSwitch Navigator Preview 08:47

Adding First Stack Navigator Preview 04:27

Configuring the header Preview 01:28

Let's Add the Drawer Navigator Preview 04:40

Customize Drawer Navigator Preview 04:20

Connect Our App To Firebase 15 lectures

Setting Up the Login Screen Preview 10:27

Setting Up Firebase Preview 03:15

Signing Up New User Preview 04:12

Signing in User Preview 05:01

Detecting if the user is logged in Preview 07:36

Installing Firebase Cloud Functions Preview 03:14

Sign Up User using Firebase Cloud Functions Preview 04:16

Sign Up User Without Cloud Functions Preview 03:09

Modifying the state for firebase Preview 04:01

Adding Books to Database Preview 08:03

Loading Books From the Database Preview 09:54

Mark Book as read in the Database Preview 07:50

Updating TextInput Styles Preview 07:12

Adding a Tab Navigator Preview 06:32

Dynamic Header Title Preview 06:09

Adding Redux To Our App 9 lectures

Intro To Redux Preview 01:11

What is Redux? Preview 12:26

Adding Redux To Our App - 1 Preview 08:30

Adding Redux to Our App - 2 Preview 04:36

Displaying Books Reading and Books Read Preview 06:29

Adding Book Count To Tab Naigator Preview 05:39

Appwide Loading Indicator Preview 06:04

Make Books List Swipeable Preview 11:22

Delete Book From List Preview 03:49

Uploading Image for the Book 6 lectures

Adding Actionsheet Preview 06:23

Opening Image Library and Camera Preview 07:17

Kindly Note : react-native-image-progress and react-native-progress will not work with expo sdk 36 and above.
Instead you can user - https://github.com/bartgryszko/react-native-circular-progress

Uploading Image To Firebase Storage Preview 09:08

Displaying the Image Preview 05:38

Updated: Loading Indicator Preview 02:16

That's a Wrap! Preview 00:26

Upgrade To React Navigation 5 - Project Files 7 lectures

Intro - DISCLAIMER & Project Files Preview 00:48

Login Stack Navigator Preview 05:17

Updated Auth Flow with Redux Preview 09:06

Drawer Navigator Preview 07:07

Tab Navigator Preview 07:19

Dynamically Updating Header Title Preview 02:10

Customizing Drawer Component Preview 01:40

Bonus : Intro To React Hooks! 9 lectures

Intro To Hooks & Project Files Preview 01:34

useState() Hook Preview 04:38

useState() vs setState() Preview 04:22

useState() - object as initial state Preview 01:42

useEffect() Hook Preview 06:05

Rules of Hooks Preview 02:28

Optional : Add Eslint Preview 01:47

Creating a Custom Hook Preview 04:51

useEffect() Cleanup Hook Preview 05:33

Recreating Book Worm App in Hooks! 12 lectures

Initial Setup And Project files Preview 02:54

BookWorm.js - useDispatch() Preview 04:38

BookWorm.js - useSelector() Preview 03:19

Custom useAuthenticateUser() Hook Preview 02:35

Welcome Screen - useNavigation() Preview 02:00

Refactoring Login Screen - useState() and useDispatch() Preview 07:20

Refactoring Home Screen part 1 Preview 05:58

Refactoring Home Screen part 2 Preview 13:09

Converting Home Screen to Functional Component - async useEffect() Preview 05:17

Converting Home Screen to Functions - addBook() Preview 07:35

BooksReading and BooksRead Preview 04:58

Settings Screen Preview 02:30