# Built With

The app is built based on [react-native](https://facebook.github.io/react-native/) and [Expo](https://expo.io/) framework. The app is using functional components and [react hooks](https://reactjs.org/docs/hooks-reference.html) (useState, useEffect, useContext, useReducer, useRef , ...etc) & [Context-API](https://reactjs.org/docs/context.html#api) for state management, and [typescript](https://www.typescriptlang.org/) for static type-checking along with the latest ECMAScript features. We used [react-navigation](https://reactnavigation.org/docs/en/getting-started.html) for handling stack navigation, tabs, and top bars. We have also used [native-base ](https://nativebase.io/)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: 

{% code title="package.json" %}

```yaml
{
  "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
}

```

{% endcode %}

### State Management and Containers 

You probably have heard too much about [Redux](https://redux.js.org/introduction/getting-started) for state management. Redux is cool! **However**, in our app here, we have sort of recreated redux using [react-hooks](https://reactjs.org/docs/hooks-intro.html) and [Context API](https://reactjs.org/docs/context.html) 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! : 

![](https://3285897816-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjeS6AKRhUl-HdoAUOf%2F-LkE-zrHLRPNa3fNSEmW%2F-LkE30tFT0R447HmG_d5%2F1_pE-ztd0SLgdKVbr9NwhJCw.png?alt=media\&token=b84fe55b-a3fd-4570-b0ba-b4b9c85ccf98)