Solution for Navigation Lab | Learn to Build a Mobile App in 30 days

Autoplay
Autocomplete

Previous Lesson Complete and Continue

(Day 4-12) React Native Part 1: The Basics

Reactive Design Paradigm

XML UI Introduction (4:46)
Chrome Demo HTML UI (2:50)
React Web Hello World Introduction To JSX (4:02)
React Web Hello World Snippet

JSX and Virtual DOM

JSX Embedding Lecture Part 1 (6:47)
JSX Expression Embedding Code
Lecture Treating JSX Like A Variable (5:50)
JSX Can Treated Like Variables
Virtual Dom Lecture (8:17)
Virtual Dom Demo

Class Based Components

Your First Component (2:57)
Your First Component
Video on Properties (3:44)
Properties Code Example

React Native

First Lecture of React Native (1:14)
Expo Introduction Video
Expo Architecture Explained (3:35)
Setting Up Your Development Environment (5:31)
Instructions for installing Expo CLI
Building An Expo React Native App (5:12)
Broken Clock App
React Native Life Cycle Methods (6:58)
Manually Forcing Render (7:49)
Working Clock - Bad State Management
Working Clock App - Bad Component Architecture
Working Clock- Good Component Architecture

Your First Native App

Joke HW Instructions
Lab Solutions Video Lecture (16:40)
Solution To Joke Lab

CSS layout & Flexboxes

Introduction To CSS Box Model (3:58)
Introduction to Sketch (2:50)
Download Sketch or Figma
Flex Box Layouts Explained (3:39)
Live Coding With Flex Boxes (11:58)
Flex View Snack
Flex Froggy Lab Instructions
Flex Froggy Lab Interaction

Build Screens Part 1

Download Sketch Files
Implement Your First Screen Linear Gradient (14:08)
Linear Gradient Snack
Screen Number 2 Part 1 (40:45)

Lab 0 Layout Lab

Layout Lab Instructions
Layout Lab Snack

Building Screen Part 2

Powering Screens with Data (21:04)
Scroll View Snack
Implementing the Pod Cast Scroll View (15:33)

Scroll Lab

Scroll Lab
Scroll Lab Solution
Scroll Lab Solution Full

Debugging

Debuggging React Native Expo (15:02)
Configuring Android Emulator (Optional) (2:46)

React Navigation

Stack Navigation Lecture (29:04)
Stack Navigation Snack 5.x
Stack Navigation Snack 4.x
Tab Navigator Lecture (25:10)
Tab Navigator 5.X
Tab Navigator Snack 4.X
Tab Navigator With Icon 5.x
Tab Navigator With Icons 4.x
Draw Navigator 5.x (Popular)
Styling Navigator

Enabling Facebook Loggin

OATH Overview (10:25)
Get a Facebook Developer Account
Facebook Login Lecture (18:53)
Facebook LogIn Snack
Secure Storage Lecture (7:43)
Secure Storage
React Navigation and Secure Storage Flow (13:08)
React Navigation Authentication flow

Navigation Lab

Navigation Lab
Solution for Navigation Lab

Teach online with

Solution for Navigation Lab

If the snack does not load refresh the page.

Complete and Continue