A simple explanation on view, action, store, state and reducer

Data flow

Image for post
Image for post

View → Action


One app that combine stack, drawer and tab navigation

Image for post
Image for post

Creating the screens for the project


Image for post
Image for post
Photo by Christiann Koepke on Unsplash

Adding subscription plan to your Firebase project

1. Open stripe account


Create a web app to let user sign in, sign out and sign up with email and password.

Image for post
Image for post
Photo by Katka Pavlickova on Unsplash
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;


Using useState and useEffect to make the Navbar fade out

Image for post
Image for post
Photo by KOBU Agency on Unsplash


Using the flexBox to fix the off screen problem.

Image for post
Image for post
Photo by Pankaj Patel on Unsplash

CODEX

Testing justifyContent,alignItem and flexDirection in React Native.

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

Without Flex

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

CODEX

Dismiss the keyboard when you click away from the keyboard

Image for post
Image for post
Photo by Chris J. Davis on Unsplash

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store