React Native (Online Training)

React Native is an open-source mobile application framework. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities.


Application Deadline

• July 20, 2020
• The course starts on July 21, 2020


• Tuesday – Thursday – Saturday from 18:00 – 21:00 • 7.5 hours per week* 3 times per week* in a total of 57.5 hours
About the course

This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices. We'll start by mastering the fundamentals of React, including JSX, “props", “state”, and event handling. Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects.


React Native is an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app. You'll love seeing your changes instantly appear on your own device, rather than waiting for Swift/Java code to recompile! This quick feedback loop, along with excellent cross platform support, is what has catapulted React Native to the top must-have skill for Javascript engineers.


If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.


Who is this course for?

This course is for anyone looking to make native apps with React Native. Basic knowledge of JavaScript would serve as a good starting point.

What will be learned?

• Learn how to use React's custom markup language, JSX, to clean up your Javascript code

• Master the process of breaking down a complex component into many smaller, interchangeable components

• Grasp the difference between “props" and “state" and when to use each

•  Render interactive, media-rich components in beautifully styled apps

• Develop apps that are unique, fun, and responsive

• Build on both Android and iOS platforms

• Master integration with Firebase for user authentication

• Learn the core principles of navigation with React Native

1. Getting Started

• What is React Native?

• How React Native Works?

• Development Setup

• Expo vs React Native CLI

2. Working with Content

• Overview of React Components

• Showing a Custom Component

• Common Questions and Answers

• Rules of JSX (JavaScript XML)

• One Common Error

• JSX Exercise Overview

• JSX Solution


3. List Building - With Style!

•  Building Lists

•  The FlatList Element

•  Rendering a FlatList

•  Why a Key Property?

•  Solving the Key Issue

•  A Few Props Around FlatList

4. Navigating Users Between Screens

• Button Types

• Buttons in Action

• Touchable Opacity in Action

• Navigating with React Navigation

• Destructuring Props


5. Building Reusable Components

• Component Reuse with Props

• Exercise Solution

• Parent-Child Relationships

• Communicating from Parent to Child

• Showing Images

• Passing Images as Props

• Exercise Outline

• Exercise Solution


6. State Management in React Components

• State in Components

• State in Action

• Notes on State

• Generating Random Colors

• Adding Random Colors

• Showing Colors with a FlatList

• Reusable Color Adjusters

• Coordinating State

• Passing Callbacks to Children

• Tying State Values Together

• Validating State Changes

• Reusable State Updates

7. Reducers

• Introduction to Reducers

• Creating a Reducer

• Applying State with a Reducer

• Restoring Validation

• Community Convention in Reducers

• Handling Text Input

• Showing a Text Input

• Two Important Props

• Weird Things with Text and State

• Updating State


8. How to Handle Screen Layout

• Layout with React Native

• Basics of Box Object Model

• AlignItems with Flex

• Flex Direction

• Justify Content

• Flex Values

• Align Self on Children

• The Position Property

• Top, Bottom, Left, Right

• Absolute Fill Objects

• Applying Layout Systems


9. Putting It All Together - Restaurant Search App

• App Overview

• Project Generation

• Yelp Signup

• Yelp Walkthrough

• React Navigation

• Assembling a Navigator

• Architecture Approach

• Starting the SearchBar

• Displaying Icons

• Search Bar Styling

• A Touch More Styling

• Managing State

• Detecting Editing Completion

10. Using Outside API’s

• Configuring Axios

• Making the Request

• Error Handling

• Running an Initial Search

11. Making Hooks Reusable

• The UseEffect Hook

• Extracting Hook Logic

• Showing Search Results

• Grouping Results

• FlatList Rendering

12. Navigation with Parameters

• Showing a Single Result

• Showing Additional Info

• A Few More Styling Issues

• Hiding Scroll Bars

• Constraining View Elements

• Empty Elements

• Spacing on the Search Bar

• Reminder on Navigation

• Navigating from a Child Component

• The WithNavigation Helper

• Communicating Between Screens

• Fetching a Single Restaurant

• Showing a List of Images


13. Advanced State Management with Context

• App Overview

• Issues with Data

• Initial Setup

• Wrapping the Navigator

• Introduction to Context

• Adding Context

• Moving Data with Context

• Rendering a List of Posts

• Adding State in Context

• Testing

• Opportunity for Improvement

• Updating with UseReducer

• Automating Context Creation

• More Automatic Context Creation

• A Bit of Styling

• Deleting Posts

• Updating the Reducer

• Navigation on Tap

• Retrieving Single Posts

• Adding a Creation Screen

• Header Navigation

• Displaying a Form

• Saving a New Post

• Navigation on Save

• The Edit Icon Link

• Communicating Info to Edit

• Initializing State from Context

• Extracting from Logic

• Customizing OnSubmit

• Initial Form Values

• Default Props

• Editing in a Reducer

• Navigating Backwards


13. Data API Sync

• Outside Data API

• Issues with Servers + React Native

• JSON Server and Ngrok Setup

• JSON Server Rest Conventions

• Making a Request

• Remote Fetch of Posts

• Creating Posts with Post Requests

• Refetching on Navigate

• Deleting a Post

• Editing Posts


14. Building a Custom Express API

• App Overview

• Dependencies Setup

• The Basics of Express

• MongoDB Setup

• Connecting to MongoDB

• Nodemon for Automatic Restarts

• Understanding the Signup Process

• Using Postman

• Handling JSON Data

• Defining a User Schema

• Creating and Saving a User

• Error Handling

• JSON Web Tokens

• Creating a JWT

• Wiring Up JSON Web Tokens

• Undestanding Password Hashing

• Salting and Hasing

• The Signin Route

• Testing Signup and Signin

• Defining Tracks

• Listing Tracks

• Creating Tracks


15. In-App Authentication

• Server Setup

• Navigation Design

• Navigator Hookup

• Testing the Navigation Flow

• React Native Elements

• Helper Styling Components

• Styling Odds and Ends

• Input Props

• The Auth Context

• What’s the Context Doing?

• Axios Setup

• Making an API Request

• Handling Errored Requests

• Async Storage

• Storing the Token

• Navigation from Outside of React

• Oops, Typo

• Navigation to Signin

• Extracting Form Logic

• Last Bit of Extraction

• Creating a NavLink

• Real Component Reuse

• Wiring Up Signin

• Clearing Error Messages

• Automatic Signin

• Empty Screens While Resolving Auth

• Sign Out a User

• Safe Area Views

• Working on Track Create

• Showing a Map

• Drawing a Series of Points

• Notes on Location

• Requesting Location Permissions

• Resetting Permissions

• How to Test Location?

• Faking the Users Location

• Reading a Location

• Location Architecture

• Location Context

• Live Location Updates

• Drawing a Position Indicator

• xtracting Logic to a Hook

• Automatic Disables

• Building a Track Form

• Updates to Location Context

• Buggy UseEffects

• Understanding Stale References

• The UseCallback Hook

• Tracking While Recording

• Bring Back the Polyline

• What Manages Tracks

• Coordination Between Contexts

• Automatic Authentication

• Navigating to a Saved Track


Course pre-requisites

• JavaScript basics

• HTML & CSS basics


Certification / Completion

• Course attendance – 80%.

• Final Project– 20%.

Labinot Bajrami | Instructor

Labinot Bajrami is a software engineer and entrepreneur. He have more than 4 years experience building Mobile App’s and creating solutions for companies in EU and in USA. Labinot holds a Bachelor Degree in Computer Science from the Riinvest College.He has a passion for programming, augmented reality, entrepreneurship and artificial intelligence. Currently he works at SyncLab, a company he founded, as a Mobile App Developer.