React Native with Typescript - The Practical Guide (2022)

Create an app in React Native - from basic knowledge to working app. Learn React Native components, Typescript, and more

3.70 (168 reviews)
Udemy
platform
English
language
Mobile Apps
category
React Native with Typescript - The Practical Guide (2022)
2,665
students
12 hours
content
Nov 2022
last update
$64.99
regular price

What you will learn

Create a working app made in React Native & Typescript

Understand React Native in practical and fun way

Use gained knowledge to create your own applications

Establish yourself in the field of the exciting mobile app development environment

Why take this course?

What is React Native?

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. React primitives render to native platform UI, meaning your app uses the same native platform APIs other apps do. Simplified, with React Native you can create a native application on IOS and Android devices, only with a knowledge of one language (Javascript).

Is this course right for you?

If you plan to start your career as a developer or improve your programming skills, this course is right for you.

You will get the confidence and skills required to start your own projects.

What are you going to work on?

You will create a "Workout" mobile application with Javascript programing language.

The course is divided into multiple parts (check curriculum).

In the first part, you will set up a development environment simulator and learn more about React Native theory.

Right away after that, you will start working on the application. First, you will learn to create multiple screens(views) and navigation between them. An instructor will show you different ways and techniques to set up navigation and, most importantly, how navigation works.

In the next part, you will discover some React Native components. Native components are similar to those used in the browser. If you have some basics in HTML, it will be for your piece of cake to grasp these concepts.

Loading external resources such as fonts is very important for UX. You will create a simple resource loader and prepare a function to boot up all required initial data of your application.

In the next couple of lectures, you will create a detailed workout page, displaying more precise information. You will learn how to pass parameters in navigation and use them to fetch data.

The next part of the course covers data management, storage, and data manipulation. It's important to know where to store data and retrieve them. An instructor will show you an easy way how to do that. As storage, you will use native storage of your phone(simulator).

Hooks functions are an essential part of React environment. You will learn how to use them to get data.

In the following section, you will go back to the detail screen of the application. You will learn how to create a reusable component, modal. A modal window will be responsible for displaying a sequence of workout exercises.

The application's core feature is to display a countdown(timer) for currently active exercise. In the eighth section, you will work precisely on this feature. An instructor will guide you through creating a reusable hook function that will provide "countdown" functionality.

Countdown functionality goes hand-in-hand with the feature to display the currently "active" exercise, and after the countdown is finished, load the next exercise and reload the countdown again.

In the next section, you will work on a form to create a workout and add/remove exercises in the workout.

The course is finishing with you working on the "theme" feature. This simple functionality allows users to toggle between the dark and light theme of the application.

The last part of the course covers testing the application on the device and in the simulators.

Content

Introduction

Introduction
How to resolve issues

Project startup

Development Environment
Simulators
What is react native

Navigation

New Screens
Navigation
Navigation Push
Navigation navigate
Native stack header props
Bottom Tab Navigator
AI Navigation
Hide Header
Add Icons

Workout management

Data
Flat List
Types
Workout Item
Workout item styles
List style flex

Font Loading

useCachedResources
load fonts
Display new font
Montserrat Text component
Children type

Utility functions

sec to min
format sec
Improve format
Pressable

Detail screen

Workout detail screen
Screen title
Display slug
Navigation Type

Async storage

Async Storage
Contains data
Workout storage
Clear Workouts
Get workouts

Use Workouts

Use Workouts
UseIsFocused
Get workout
useWorkoutBySlug
Check for undefined
Pressable Sequence
Pressable Component

Modal

Modal
Modal visibility
Modal Styling
Reusable Modal
Reusable Activator part 1
Reusable Activator part 2
AI Passing Props
Pass props to modal
Display sequence
Sequence improvements
Workout Item Children

Countdown

Play Icon
Create Sequence
Start countdown
useCountDown
Countdown cleanup
AI Debugging

Display Sequence

Display entire sequence
Display countdown
Small style improvement
Conditional text
Conditional text styles

Stoppable countdown

Is Running State
Start explicit count
Start refactor
Stop and continue countdown
Counter Item styles
Restart Counter

Startup sequence

Startup Sequence
Display startup seq
Wrapper stylings

Exercise Form

Workout form
TextInput
Submit Form

Hook Form

React hook form
Submit hook form
Improve style + Duration
Finish inputs
Input flex styles
Display Selection
Selection Improvements
Get selection value

Data Transformation

Transform form data
slugify
Add item to sequence
Exercise item component
Remove exercise

Finalize Workout

Workout modal
Workout form in modal
Slugify workout name
Create Workout test
Compute difficulty
Callable Children
Unmount on blur
Add workout to storage

UX Improvements

Theme
Navigation theme
Theme components
Safe area

Testing & Final Build

Testing app in Expo
Build android
Build Ios
End of Course

Screenshots

React Native with Typescript - The Practical Guide (2022) - Screenshot_01React Native with Typescript - The Practical Guide (2022) - Screenshot_02React Native with Typescript - The Practical Guide (2022) - Screenshot_03React Native with Typescript - The Practical Guide (2022) - Screenshot_04

Reviews

Daniel
June 24, 2023
straight to the point so far which i like, and really like the in depth analysis of React in general as well as Typescript.
Nemanja
February 19, 2023
Amazing. Everything is so detailed and explained great, but at the same time consized and it has great quality. Filip, please continue to make awesome and very high-quality content as you made this course and please, please keep it as short as it can (like this course-12 hours - people need this normal- size courses - nobody has 40 - 60+ hours- and I will buy many of your other courses :))
Aleksandra
December 10, 2022
Explaining everything in details, with code examples and drawing about it. Would definitely recommend.
Donato
July 17, 2022
Thank you for creating this tutorial/course. It is well worth it and I was able to follow along and publish it to the Google Play Store! As of this writing, I am waiting for the Apple Store to approve my app, so that I can have the app available in both platforms! Thank again, Philip! Make more (advanced) courses for react-native!
Rajesh
June 25, 2022
Skipping some screens between stack what we are expecting, A=>B => C => D =>E now need stack like A => B =>F meaning pushing F should remove C, D from the stack
Adam
February 25, 2022
Lack of basic knowledge of React Native, Also, I expected a coverage of Type Script but there was nothing about it in the course.
Ihor
February 19, 2022
Well, it is a very well organized intoductory course. The only thing I would add is videos with descriptions of popular view components with connection to React Native documentation.
Jess
January 27, 2022
Even though the course doesn't cover all react-native concepts, it focusses on the most necessary ones to be able to create working applications. I highly recommend it!

Coupons

DateDiscountStatus
2/3/2022100% OFF
expired

Charts

Price

React Native with Typescript - The Practical Guide (2022) - Price chart

Rating

React Native with Typescript - The Practical Guide (2022) - Ratings chart

Enrollment distribution

React Native with Typescript - The Practical Guide (2022) - Distribution chart
4500110
udemy ID
1/17/2022
course created date
1/25/2022
course indexed date
Mauricio
course submited by