Built With

Technologies used to build coinbase clone app

The app is built based on react-native and Expo framework. The app is using functional components and react hooks (useState, useEffect, useContext, useReducer, useRef , ...etc) & Context-API for state management, and typescript for static type-checking along with the latest ECMAScript features. We used react-navigation for handling stack navigation, tabs, and top bars. We have also used native-base for some of our UI components, and we have built our own components such as chart that looks just wonderful for presenting the crypto price changes. We tried to use a minimal number of dependencies to give you a chance, as a developer, to have more control over the code, enhance and make everything better and faster yourself without relying on and getting stuck with too many dependencies that are out of your control.

Check out the app package.json here:

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint './**/*.{ts,tsx}'"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "expo-sms": "~7.0.0",
    "lodash": "^4.17.14",
    "moment": "^2.24.0",
    "native-base": "^2.13.8",
    "numeral": "^2.0.6",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-flash-message": "^0.1.13",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.2.0",
    "react-native-size-matters": "^0.2.1",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.6.2",
    "reanimated-bottom-sheet": "^1.0.0-alpha.13",
    "react-native-screens": "~1.0.0-alpha.23",
    "expo-web-browser": "~7.0.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.19",
    "@types/react-native": "^0.57.60",
    "@typescript-eslint/eslint-plugin": "^1.12.0",
    "@typescript-eslint/parser": "^1.12.0",
    "babel-preset-expo": "^5.1.1",
    "eslint": "^6.0.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "prettier": "^1.18.2",
    "typescript": "^3.4.5"
  },
  "private": true
}

State Management and Containers

You probably have heard too much about Redux for state management. Redux is cool! However, in our app here, we have sort of recreated redux using react-hooks and Context API without actually installing redux and react-redux and all the middleware that redux might need. Here is a diagram of how it works, and I'm pretty confident to say that it works somehow in a similar fashion as redux. So no surprises! :