In this article, we are going to make a simple explanation on redux, which cover the view, action, state and reducer. After that, we will create an app to demonstrate this.

Related Course:

Free YouTube tutorials:

Data flow

A simplified explanation is the view contain button to dispatch the action.

The reducer inside the store decide how to update the state (the source of truth) base on the action and current state.

UI re-render base on the latest state.

View → Action

In this article, we will demonstrate how to setup the navigation inside react native. We will walk through all the process from creating different screens, install the necessary package for creating stack navigator, drawer navigator and tab navigator.

Related Courses:

Creating the screens for the project

First, create a folder called “screens”. Under the “screens” folder, we crate About.js, Home.js and Task.js.

In this article, we are going to demonstrate how to use Stripe extension inside a Firebase project. We will create a simplified Netflix clone which list out the plans, the user can subscribe the plans and at the same time, these data are in sync. What it means is the customer data of Stripe is the same as the authentication data in Firebase. The products added in Stripe will also be recorded inside Firebase firestore.

Let’s begin!

Source code:

https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536

1. Open stripe account

In this article, we are going to demonstrate how to implement the firebase email authentication in a React app.

Related Course:

First, inside the App.js, we add the state “user” and the update function “setUser” by using the useState hook.

import { useState } from 'react';import Home from './components/Home';import './App.css';function App() {const [user, setUser] = useState(null)return (<div className="App"><Home/></div>);}export default App;

Create Home and SignIn component under the components folder.

In this article, we are going to create a navbar with the effect of fading out when the user scroll down more than 100px.

In this todo app, there is an issue that if the list is too long, thing will get pushed off the screen.

We cannot scroll to the bottom because the flat list is being pushed right down
off the screen.

Full Content:

Part 1 — Create basic layout and header component

Part 2 — Create item component

Part 3 — Create the AddTask component to insert a new task

Part 4 — Alert if there is an error

Part 5 — Dismiss the keyboard when you click away from the keyboard

Part 6 — Expo React Native Part 6 —…

In the previous articles, we already created the app that allow the user to add tasks and also dismiss the keyboard when he click away from the keyboard.

Full Content:

Part 1 — Create basic layout and header component

Part 2 — Create item component

Part 3 — Create the AddTask component to insert a new task

Part 4 — Alert if there is an error

Part 5 — Dismiss the keyboard when you click away from the keyboard

Part 6 — Expo React Native Part 6 — delete item

Part 7 — Using the flexBox to fix the off…

CODEX

In this article, we are going to talk about the flexbox. We mainly focus on

1. justifyContent
2. alignItems
3. flexDirection
4. Fix the problem of cannot show the last item of the list

Related Course:

Without Flex

Before we talking about flex, we do some little experience on comparing using flex and without flex.

return (<View style={styles.container}><Text>something</Text></View>const styles = StyleSheet.create({container: {backgroundColor: 'pink',padding: 40},