108
Lectures
12
Hours

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.

Requirements

  • Basics JS knowledge

Course curriculum

  • 2

    Project startup

  • 3

    Navigation

    • New Screens

    • Navigation

    • Navigation Push

    • Navigation navigate

    • Native stack header props

    • Bottom Tab Navigator

    • AI Navigation

    • Hide Header

    • Add Icons

  • 4

    Workout management

    • Data

    • Flat List

    • Types

    • Workout Item

    • Workout item styles

    • List style flex

  • 5

    Font Loading

    • useCachedResources

    • load fonts

    • Display new font

    • Montserrat Text component

    • Children type

  • 6

    Utility functions

    • sec to min

    • format sec

    • Improve format

    • Pressable

  • 7

    Detail Screen

    • Workout detail screen

    • Screen title

    • Display slug

    • Navigation Type

  • 8

    Async Storage

    • Async Storage

    • Contains data

    • Workout storage

    • Clear Workouts

    • Get workouts

  • 9

    Use Workouts

    • Use Workouts

    • UseIsFocused

    • Get workout

    • useWorkoutBySlug

    • Check for undefined

    • Pressable Sequence

    • Pressable Component

  • 10

    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

  • 11

    Countdown

    • Play Icon

    • Create Sequence

    • Start countdown

    • useCountDown

    • Countdown cleanup

    • AI Debugging

  • 12

    Display Sequence

    • Display entire sequence

    • Display countdown

    • Small style improvement

    • Conditional text

    • Conditional text styles

  • 13

    Stoppable countdown

    • Is Running State

    • Start explicit count

    • Start refactor

    • Stop and continue countdown

    • Counter Item styles

    • Restart Counter

  • 14

    Startup sequence

    • Startup Sequence

    • Display startup seq

    • Wrapper stylings

  • 15

    Exercise Form

    • Workout form

    • Text Input

    • Submit Form

  • 16

    Hook Form

    • React hook form

    • Submit hook form

    • Improve style + Duration

    • Finish inputs

    • Input flex styles

    • Display Selection

    • Selection Improvements

    • Get selection value

  • 17

    Data Transformation

    • Transform form data

    • slugify

    • Add item to sequence

    • Exercise item component

    • Remove exercise

  • 18

    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

  • 19

    UX Improvements

    • Theme

    • Navigation theme

    • Theme components

    • Safe Area

  • 20

    Testing & Final Build

    • Testing App in Expo

    • Build Android

    • Build Ios

    • End of course

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of such a really extensive course

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "React Native with Typescript - The Practical Guide [2022]"

    $19.00

    Access to this course only.

    Get started now
  • Regular price

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now