Make It Your Own

File Structures

1
.expo
2
.expo-shared
3
package-lock.json
4
package.json
5
tsconfig.json #typescript config file
6
babel.config.js
7
.prettierrc.js # has all code editor formatting
8
.eslintrc.js # manage and enforce code patterns & styling
9
app.json
10
App.tsx # App container
11
├── api
12
│ └── index.tsx #contains get/fetch api calls
13
├── assets
14
│ ├── coinbase.png # Rocket icon for Home Screen
15
│ ├── icon.png # coinbase icon
16
│ └── splash.png # coinbase splash screen background
17
├── components # all components are dumb - have no logic
18
│ ├── About.tsx # renders general info about each coin
19
│ ├── AssetItem.tsx # Contains Calendar Range Input
20
│ ├── AssetList.tsx # Contains all Check Boxes
21
│ ├── Chart.tsx # renders all chart info
22
│ ├── CoinHeader.tsx # coin screen header component
23
│ ├── CoinInfo.tsx # renders chart, and coin related info
24
│ ├── CoinList.tsx # renders the favourites/following list
25
│ ├── CoinListItem.tsx # renders the item of coinlist
26
│ ├── index.tsx # export all components for easier import
27
│ ├── Invest.tsx # renders the buy/sell and amount entry
28
│ ├── Main.tsx # renders fav, news and other components
29
│ ├── MarketStats.tsx # renders the market cap, volume & supply
30
│ ├── News.tsx # renders the top 5 news items list
31
│ ├── NewsListItem.tsx # renders news/story item
32
│ ├── Range.tsx # renders the chart range 1H, 1D, 1W ...etc
33
│ ├── Spinner.tsx # renders a generic loading spinner
34
│ ├── StoriesList.tsx # renders stories list in the stories screen
35
│ ├── Switcher.tsx # renders the list of ranges [1H, 1D, 1W ..]
36
│ ├── TabBarIcon.tsx # renders the tab bar icon
37
│ └── WalletListItem.tsx # renders wallet list item
38
├── enums
39
│ └── index.tsx # holds static variables/list using enum
40
├── navigation
41
│ ├── Navigator.tsx # wrapper to create switch navigator
42
│ └── Tabs.tsx # create all stack navigations
43
├── screens
44
│ ├── Account.tsx # Wallets/Account container
45
│ ├── Assets.tsx # Assets/Coins container
46
│ ├── Coin.tsx # Coin details container
47
│ ├── Home.tsx # Home screen container
48
│ ├── Invite.tsx # invite and share screen
49
│ └── Stories.tsx # Stories/News container
50
├── store
51
│ ├── actions.tsx # actions to dispatch data to the store
52
│ ├── index.tsx # state management wrapper
53
│ ├── reducers.tsx # returns all the state changes
54
│ └── types.tsx # holds all the interfaces and types of data
Copied!

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
1
export enum Colors {
2
tintColor = '#fff', tabIconDefault = '#ccc',
3
tabIconSelected = '#000',
4
tabBar = '#fefefe',
5
errorBackground = 'red',
6
white = '#ffffff',
7
black = '#000000',
8
gray = '#cccccc',
9
green = '#5cb85c',
10
red = '#E74C3C',
11
blue = '#EBF5FB70',
12
trueBlue = '#2a64f0',
13
grayish = '#85929E',
14
lightGray = '#f8f8f8',
15
panel = '#f7f5eee8',
16
warningBackground = '#EAEB5E',
17
warningText = '#666804',
18
noticeBackground = '#2f95dc',
19
noticeText = '#fff',
20
transparent = '#00000000',
21
}
Copied!

Change Api Key

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

Change Fonts, App Icon and Splash

To change icon and splash, all you need is changing the following files:
1
├── assets
2
│ ├── icon.png # cryptostream icon
3
│ └── splash.png # cryptostream splash screen background
Copied!
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' }
1
const _cacheResourcesAsync = async () => {
2
//........
3
const fonts = [
4
{
5
...Icon.Ionicons.font,
6
Roboto: require('native-base/Fonts/Roboto.ttf'),
7
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
8
// include your own font here.
9
},
10
];
11
//......
12
}
Copied!
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
1
.exports = {
2
semi: true,
3
trailingComma: "all",
4
singleQuote: true,
5
printWidth: 120,
6
tabWidth: 2,
7
};
8
Copied!
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:
1
"editor.formatOnSave": true,
2
"eslint.autoFixOnSave": true,
3
"eslint.alwaysShowStatus": true
Copied!
Last modified 1yr ago