React Native Expo For Multiplatform Ios Android Mobile App Development
Create awesome mobile app in both iOS and Android platform
- Build real-world native todo app using React Native
- Develop both iOS and Android mobile app
What you'll learn
* Basic React knowledge
* No Java or Swift knowledge is required
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.
5 sections • 52 lectures
Introduction Preview 04:50
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.
FlatList Preview 03: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
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.
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.
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.
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.
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.
Detect the auth state change Preview 02: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 function Preview 00:49
In this video, we are going to create the signin function to allow the user signin.
Create signout function Preview 03:21
In this part , we are going to add the logout function to the chat app.
Fix the two weird things in the navigation Preview 03: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 Chat Preview 01:35
In this part, we start create the template to make it instantly become a chat app
Modify the gifted chat and send message function Preview 03: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 firestore Preview 02:22
In this part, we will go to fetch the messages from the firestore and test the app