React native Expo for multiplatform mobile app development

Name: React native Expo for multiplatform mobile app development
Rating: 4.3 (523 reviews)

Create awesome mobile app in both iOS and Android platform

Created byKim Chen

Last updated 4/2021

English

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

Course content

5 sections • 52 lectures • 2h 31m total length

Introduction4:50
Run the app on emulator2:37
In this lecture, we are going to talk about how to run the Expo React Native app on the emulator.
Expo folder structures3:01
In this lecture, we are going to walk through the folder and files of the Expo project.
React Native core component and Style4: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 Hook5: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 state4: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 view4: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.
FlatList3:39
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
Touchable2:30
In this video, we are going to use something called a “Touchable” component to attach the press event
More on spread operator2: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.

Todo Application part 1 : Basic layout and components5: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 component2: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 Field5: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 Alert1: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 keyboard1:06
In this lecture, we are going to demonstrate how to dismiss the keyboard with "TouchableWithoutFeedback" and "Keyboard" components.
Todo Application part 6: Delete items4: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 flexBox1: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.

Start a new project and apply global style3:52
In this part, we are going to start a new project and apply the global styles to each screen.
Setup the navigation2:50
In this part, we are going to create a stack navigator by using react navigation.
Moving between screens3:34
In this part, we are going to create buttons to navigate between screens
Configuring the header1:31
In this part, we are going to add the navigation option to control the style of the header.
Passing data to another screen3: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 Navigator5:39
In this part, we will create a drawer navigator.
Add Tab Navigator2:02
In this part, we will create a tab navigator.
Diagram summary of Drawer, Stack and Tab Navigation1:39
In this part, we are going to make a summary on how we think or decide the navigator, when in the programming.

Simple explanatin of Redux2:34
A simple explanation on how redux work.
Simple counter app to demonstrate Redux7: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 function0:11
Start the projection by using the navigation project0:06
Start the project and create action file2:50
In this part, we are going to start the project and create action file, which contain the action creators.
Create the reducer5:26
In this lecture, we are going to add the reducer, which determine how the state change depend on the action type.
Create the store1:03
In this lecture, we are going to create the store for the app
Get the state3: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 creator1:55
In this lecture, we are going to dispatch the add task function
Dispatch the DELETE TASK action1:06
In this lecture, we are going to dispatch the delete task action
Dispatch the DID TASK action1:52
In this lecture, we are going to dispatch the did task action
Create the done list2: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"1:04
A final touch on changing the name from "About" to "Done" inside the app.

The simple chat app introduction0: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 packages1: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 Navigator2:08
In this part we are adding the StackNavigator to the app, such that the first page is the LoginScreen.
Create Login Screen4: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 Screen3: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 project2: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 function3: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.
Detect the auth state change2:28
In this video, we are going to detect the authentication state, if it already signed , it will go to the chat page
Create the signin function0:49
In this video, we are going to create the signin function to allow the user signin.
Create signout function3:21
In this part , we are going to add the logout function to the chat app.
Fix the two weird things in the navigation3:08
In this part, we found that some weird things happen about navigation, including can back to login screen after login. So we are going to fix this.
Start using React Native Gifted Chat1:35
In this part, we start create the template to make it instantly become a chat app
Modify the gifted chat and send message function3:14
In this part, we are going to modify the gifted chat component so we can store the message to the firebase.
Fetch the messages from the firestore2:22
In this part, we will go to fetch the messages from the firestore and test the 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.

React native Expo for multiplatform mobile app development

What you'll learn

Explore related topics

Course content

Introduction10 lectures • 39min

Create Todo Application to know the basics7 lectures • 21min

Create Todo Application to know the navigation8 lectures • 25min

Expo react native redux13 lectures • 31min

Create a Simple Chat App with Firebase and React Native Gifted chat14 lectures • 36min

Requirements

Description

Who this course is for: