• Post category:StudyBullet-7
  • Reading time:9 mins read


Learn to build cross platform mobile applications with React Native CLI, React Hooks and Functional Components

What you will learn

Installation setup for React Native CLI development

Build cross platform applications with React Native CLI

Navigate between screens

Navigate to screens dynamically

Use of The Movie Database API

Add custom styles

– React Hooks

Functional Components

Get Movies by genre

Lists

Search Movie Method

Image Galleries

Video Player and its commands

Description

React Native is growing at a fast pace, while more and more companies of any size are adopting it to build cross platform applications with a single code base.

In this course we aim to teach React Native flow and its secrets by building a real world project where we aim to have a solid foundation into React Native framework as well React Hooks and Functional Components.

You will build a mobile application targeted for both iOS and Android environment while you learn the responsiveness of the style, navigation between screens and get and manage data from an external API.

In this course you will learn:

– Set up your machine environment for React Native CLI development

– Build cross platform applications with React Native CLI

– Navigate between screens

– Navigate to screens dynamically

– Use of The Movie Database API

– Add custom styles

– Component base development

– React Hooks

– Functional Components

– Get Movies by genre

– Lists

– Search Movie Method


Get Instant Notification of New Courses on our Telegram channel.


– Image Galleries

– Video Player and its commands

After this course you will be able to:

– Set up the system correctly

– Manage Errors a Debug React Native CLI applications

– Build applications from scratch

– Understand good architecture flow for an application

– Get data from the server using Axios

– Handle Data

– Display and render custom Lists

– Implement search methods

– Add external packages

– Tap in the native code of a iOS and Android application

We can’t wait to have you in board with us.

See you there!

English
language

Content

Getting Started

Introduction
Course Requirements
Instructions
If you stuck in code or getting Errors
What is React Native?
React Native CLI or Expo CLI
Installation of Node Version
Setting Up Development Enviornment
How to setup Android
Installation of Java
How to setup iOS
Code Editor
Installing Extensions for Rapid Coding
Create React Native Project
Run on iOS Simulator
Run on Android Emulator
Running on Physical Device Using Vysor
Hello World App and Logging
Debugging with Browser
Debugging with VS Code

Start Building Our Application For Movies

Getting Movies Data: API Overview
Creating Movies App Project
Regarding Dependencies Version
Create Data Service For Movies
Display Movie Data
Important: Using Effects + Checking System Performance
Services Error Handling
Refactoring
Section Code

Movies App Home

Creating Home Screen Component
Latest Movies Images Slider
Styling Movies Images Slider
Working with Movies Lists-Carousels
Create List Components
Create Card Components
Image Placeholder in Card Component
Type Checking in React Native
Adding Scroll View to Scroll the Home Screen
Popular Tv Shows- Family Movies- Documentaries
Refactoring
Add Loading Spinner
Add Error Component
Section Code

Navigation in Our Application

Important Note About React Navigation
Installing React Native Navigation
Creating a Stack Navigator
Navigate to Movies Detail Component
Section Code

Application Detailing

Movie Detail Overview
Pass Selected Movie Data to Detail Component
Movie Detail Service
Movie Title and Genres
Movie Star-Rating Component
Using Icons in React Native
If You Still Getting Error With Icon Fonts
Movies Description and Release Date
Movie Play Button
Video Player Model
Play a Movie Within the Modal
Modal Closing Logic
Section Code

Navigation Bar

Add Navigation Bar in SafeAreaView
Home Screen Navigation
Refactoring
Section Code

Search Movie

Search Movies and TV’s Services
Search Movie Screen
Search Form
Search Results
Merging Movies and TV Search Results
Section Code

Final Touches

App Theming
Fix Styling
Section Code

Resource: Backend API without Coding

How to Create Backend API Without Coding