https://twitter.com/ckmobilejavasc1
React native Expo for multiplatform mobile app development
Complete NodeJS course with express, socket io and MongoD
Progressive Web App
…
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:
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.
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:
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:
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…
In this article, we are going to talk about the flexbox. We mainly focus on
Related Course:
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},
If currently I start to type something over here a lot of the time when you’re on your phone if you click away from the keyboard then it should close.
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…