Make It Your Own

File Structures

.expo
.expo-shared
package-lock.json
package.json
tsconfig.json                       #typescript config file
babel.config.js
.prettierrc.js                      # has all code editor formatting
.eslintrc.js                        # manage and enforce code patterns & styling
app.json
App.tsx                             # App container
├── api
│   └── index.tsx                   #contains get/fetch api calls
├── assets
│   ├── coinbase.png                # Rocket icon for Home Screen
│   ├── icon.png                    # coinbase icon
│   └── splash.png                  # coinbase splash screen background
├── components                      # all components are dumb - have no logic
│   ├── About.tsx                   # renders general info about each coin
│   ├── AssetItem.tsx               # Contains Calendar Range Input
│   ├── AssetList.tsx               # Contains all Check Boxes
│   ├── Chart.tsx                   # renders all chart info
│   ├── CoinHeader.tsx              # coin screen header component
│   ├── CoinInfo.tsx                # renders chart, and coin related info
│   ├── CoinList.tsx                # renders the favourites/following list
│   ├── CoinListItem.tsx            # renders the item of coinlist
│   ├── index.tsx                   # export all components for easier import
│   ├── Invest.tsx                  # renders the buy/sell and amount entry
│   ├── Main.tsx                    # renders fav, news and other components
│   ├── MarketStats.tsx             # renders the market cap, volume & supply
│   ├── News.tsx                    # renders the top 5 news items list
│   ├── NewsListItem.tsx            # renders news/story item
│   ├── Range.tsx                   # renders the chart range 1H, 1D, 1W ...etc
│   ├── Spinner.tsx                 # renders a generic loading spinner
│   ├── StoriesList.tsx             # renders stories list in the stories screen
│   ├── Switcher.tsx                # renders the list of ranges [1H, 1D, 1W ..]
│   ├── TabBarIcon.tsx              # renders the tab bar icon
│   └── WalletListItem.tsx          # renders wallet list item
├── enums
│   └── index.tsx                   # holds static variables/list using enum
├── navigation
│   ├── Navigator.tsx               # wrapper to create switch navigator
│   └── Tabs.tsx                    # create all stack navigations
├── screens                     
│   ├── Account.tsx                 # Wallets/Account container 
│   ├── Assets.tsx                  # Assets/Coins container
│   ├── Coin.tsx                    # Coin details container
│   ├── Home.tsx                    # Home screen container
│   ├── Invite.tsx                  # invite and share screen
│   └── Stories.tsx                 # Stories/News container
├── store                   
│   ├── actions.tsx                 # actions to dispatch data to the store
│   ├── index.tsx                   # state management wrapper
│   ├── reducers.tsx                # returns all the state changes 
│   └── types.tsx                   # holds all the interfaces and types of data

Change Theme Colors

Just go to enums folder and you will find Colors enum, just change whichever color you need and it will be automatically reflected on the app appearance like so:

enums/index.tsx

export enum Colors {
  tintColor = '#fff',
  tabIconDefault = '#ccc',
  tabIconSelected = '#000',
  tabBar = '#fefefe',
  errorBackground = 'red',
  white = '#ffffff',
  black = '#000000',
  gray = '#cccccc',
  green = '#5cb85c',
  red = '#E74C3C',
  blue = '#EBF5FB70',
  trueBlue = '#2a64f0',
  grayish = '#85929E',
  lightGray = '#f8f8f8',
  panel = '#f7f5eee8',
  warningBackground = '#EAEB5E',
  warningText = '#666804',
  noticeBackground = '#2f95dc',
  noticeText = '#fff',
  transparent = '#00000000',
}

Change Api Key

// main api prefix
const API = 'https://min-api.cryptocompare.com';
// My own key: feel free to use but it has a limit of 100k calls a month. 
// I strongly recommend you to use your own key by visiting 'https://min-api.cryptocompare.com'
const KEY = 'ec699ea45b980d03347569fee00344b590e4c07327c08700cc5a';
// I have already attach the key to the api call in the get method below.
// However, you can attach the key to the header using Authorization prop and remove it from the get method if you like.
const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
  'X-Requested-With': 'XMLHttpRequest',
};
// generic fetch from 'https://min-api.cryptocompare.com api
export const get = async (uri: string): Promise<object> => {
  const response = await fetch(`${API}/${uri}&api_key=${KEY}`, {
    method: 'GET',
    headers,
  });
  return response.json();
};

Change Fonts, App Icon and Splash

To change icon and splash, all you need is changing the following files:

├── assets
│   ├── icon.png                    # cryptostream icon
│   └── splash.png                  # cryptostream splash screen background

To change fonts, you need to load your fonts in App.tsx as follows and using them anywhere in the app by defining font family for component style: { fontFamily: 'your font' }

const _cacheResourcesAsync = async () => {
    //........
    const fonts = [
      {
        ...Icon.Ionicons.font,
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
        // include your own font here.
      },
    ];
    //......
  }

don't remove Roboto_medium if you didn't customize the fontFamily in all your components because that would make native-base components break on android as it's using Roboto_medium as a default fontFamily.

Code Styling and Formatting

Go to .prettierrc.js in the root of the app folder and change the formatting of your choice. You can learn more here https://prettier.io/docs/en/configuration.html

our default config is here:

.prettierrc.js

.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

To enforce the rules and keep consistency of code styling of all your *.ts and *.tsx files, you can go to .eslintrc.js . Whether you are working solo or in a team, this configuration is very useful and will keep your code consistent and clean. To learn more please visit https://eslint.org/docs/user-guide/getting-started

To make the formatting works better for you, you would have to add configuration to you code editor’s settings to allow Prettier to auto format the code whenever any typescript or js file is saved (formatOnSave). Please refer to Prettier Editor Integration docs to configure your editor.

For VSCode, install the extensions for ESLint and Prettier. Below are the popular extensions:

Go to VSCode User settings to auto fix eslint formatting issues on file save like so:

  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true