React Native Expo For Multiplatform Ios Android Mobile App Development

Create awesome mobile app in both iOS and Android platform

Last updated 2022-01-10 | 4.1

- Build native mobile apps with JavaScript and React
- Build real-world native todo app using React Native
- Develop both iOS and Android mobile app

What you'll learn

Build native mobile apps with JavaScript and React

Build real-world native todo app using React Native

Develop both iOS and Android mobile app

* Requirements

* Basic JavaScript knowledge
* Basic React knowledge
* No Java or Swift knowledge is required

Description

Did you tire of learning JAVA, Swift, Kotlin different programming languages?

Will it be much better if just learn one language and then can build for both Android and iOS?

React Native is what you need!!

But what is React Native? In a nutshell react native allows use the react library to create native

mobile apps for Android and iOS devices.

It is a really good option for developers that want to create some kind of mobile app who are already comfortable with react

It definitely recommends that you already understand the core principles of react like functional

components state props

We do have a complete react course on this platform, feel free to check that out

In this course, you will learn some basic React and also extend this to React Native. We will build a todo app to reinforce what we learnt in the previous lectures.

What you will learnt

How to run the app in iOS and Android emulator
How to use React Native components
How to use the useState to add dynamic content
How to use the TextField to change state
The difference between List and FlatList
What is the Touchable Component?
What is the TouchableWithoutFeedback
How to dismiss the keyboard with Keyboard component?
Create an todo application which used all the knowledge that we learnt.
Create a chat app easily with react native gifted chat and Firebase

Who this course is for:

Anyone who want to use web knowledge to build apps that can run on both iOS and Android.

Course content

5 sections • 52 lectures

Introduction 10 lectures

Run the app on emulator Preview 02:37

In this lecture, we are going to talk about how to run the Expo React Native app on the emulator.

Expo folder structures Preview 03:01

In this lecture, we are going to walk through the folder and files of the Expo project.

React Native core component and Style Preview 04:58

In this lecture, we are going to talk about some of the basic components that in react native, particularly the view, text and also the stylesheet.

React Native React Hook Preview 05:59

In this lecture, we are going adding state so that we can output some dynamic content to the screen.

Use TextInput field to change state Preview 04:44

In this lecture, we are going to talk about how to add a text input field so the user can type in something into that input field.

List view Preview 04:35

In this lecture , we are going to talk about lists in react natives. For example we have a list of data and we want to output that list of data in a react native component.

In the previous lecture,we have seen one way of outputting a list to the screen using the map function on an array and then returning some JSX for each todo. Flatlist is another way to output lists which a lot of people see as better

Touchable Preview 02:30

In this video, we are going to use something called a “Touchable” component to attach the press event

More on spread operator Preview 02:12

In this lecture, we will use the spread operator to get the effect that when property “completed” become, item will turn green, otherwise it stay on deep pink.

Create Todo Application to know the basics 7 lectures

Todo Application part 1 : Basic layout and components Preview 05:22

In this lecture, we are going to create a basic layout with header, content and inside the content, we have a list of tasks.

Todo Application part 2 : Task component Preview 02:23

In this lecture, we are going to create the Task Item component instead of just rendering a simple Text component.

Todo Application part 3 : Add Input Field Preview 05:14

In this video, we are going to create a AddTask component, which is an input field for the user to create a new task.

Todo Application part 4: Add simple validation Alert Preview 01:26

In this video, we are going to add some validation. If the input field is empty and the user press the “add task” button.

Todo Application part 5: Dismiss keyboard Preview 01:06

In this lecture, we are going to demonstrate how to dismiss the keyboard with "TouchableWithoutFeedback" and "Keyboard" components.

Todo Application part 6: Delete items Preview 04:02

In this part, we are going to add the delete icon and delete function

Todo Application part 7: fix the off screen problem with flexBox Preview 01:35

In this lecture, we are going to fix the issue that if the list is too long, thing will get pushed off the screen.

Create Todo Application to know the navigation 8 lectures

Start a new project and apply global style Preview 03:52

In this part, we are going to start a new project and apply the global styles to each screen.

Setup the navigation Preview 02:50

In this part, we are going to create a stack navigator by using react navigation.

Moving between screens Preview 03:34

In this part, we are going to create buttons to navigate between screens

Configuring the header Preview 01:31

In this part, we are going to add the navigation option to control the style of the header.

Passing data to another screen Preview 03:36

In this part, we will demonstrate how to pass the data from one screen to another screen. We will also use the task name as the title of the header.

Add Drawer Navigator Preview 05:39

In this part, we will create a drawer navigator.

Add Tab Navigator Preview 02:02

In this part, we will create a tab navigator.

Diagram summary of Drawer, Stack and Tab Navigation Preview 01:39

In this part, we are going to make a summary on how we think or decide the navigator, when in the programming.

Expo react native redux 13 lectures

Simple explanatin of Redux Preview 02:34

A simple explanation on how redux work.

Simple counter app to demonstrate Redux Preview 07:42

In this part, we will just create a simple counter app to increase and decrease the counter value. The value will display in two component. The aim is to show how to use the redux.

Something about arrow function Preview 00:11

Start the projection by using the navigation project Preview 00:06

Start the project and create action file Preview 02:50

In this part, we are going to start the project and create action file, which contain the action creators.

Create the reducer Preview 05:26

In this lecture, we are going to add the reducer, which determine how the state change depend on the action type.

Create the store Preview 01:03

In this lecture, we are going to create the store for the app

Get the state Preview 03:07

In this lecture, we will going to use the useSelector to get the state from the store, display the array by using FlatList.

Dispatch the ADD TASK action creator Preview 01:55

In this lecture, we are going to dispatch the add task function

Dispatch the DELETE TASK action Preview 01:06

In this lecture, we are going to dispatch the delete task action

Dispatch the DID TASK action Preview 01:52

In this lecture, we are going to dispatch the did task action

Create the done list Preview 02:17

In this part, we will create the done list inside the About tab. We will demonstrate that the Home component and the About component get the same state from the store.

Change the name of "About" to "Done" Preview 01:04

A final touch on changing the name from "About" to "Done" inside the app.

Create a Simple Chat App with Firebase and React Native Gifted chat 14 lectures

The simple chat app introduction Preview 00:47

In this part, we are going to introduce what we are going to build and what tools that we need.

Init a new expo project and install the packages Preview 01:42

In this lecture, we are going to init the expo react native project and also install packages, like react native navigation, stack navigator , react native gifted chat and also the firebase

Add the Stack Navigator Preview 02:08

In this part we are adding the StackNavigator to the app, such that the first page is the LoginScreen.

Create Login Screen Preview 04:06

In this video, we are going to add the Login Screen, we will use the input and button component from react native element.

Create Register Screen Preview 03:59

In this video, we are going to create the register screen and at there, we will add more input fields including avatar and also the username.

Add the firebase to the project Preview 02:12

In this video , we will go to the Firebase web and create a new project, afterthat we add the config file to the project to link to the firebase.

Add the register function Preview 03:51

In this video, we are going to create the register function with firebase, the user can update their own name, email, password and the profile picture.