Build a React Native Crypto Currency Tracker [Part 1]
Introduction
This tutorial is for developers who want to learn more about React Native. It’s assumed that you have some knowledge; in particular the usage of props, state and the render function.
If you’re able to create a “Hello World” app in React/React Native, you should be able to follow and understand this tutorial.
Part 1 — Code Scaffold
Part 2 — State & API Integration
Part 3 — Styling, Props & Error Handling
Part 1 — Code Scaffold
1.1. Setup
Before we begin we need to install the Expo CLI globally. Once installed we can create a new React Native project.
npm install -g expo-cli// Once Installed
expo init crypto-charts
Select blank template, we don’t need any of the expo boilerplates for this tutorial.
The project structure will be setup and npm dependencies will be installed. Once complete we’re ready to run the project.
$ npm run ios // iOS Simulator (Mac Only)
$ npm run android // Android Simulator1.2. Native Base
We’re going to install native-base, an easy to use UI framework for React Native. It will allow us to create a native-like look and feel for both Android and iOS devices.
$ npm install native-base --saveTo integrate native-base we need to wrap the app in a few tags so all child components will sit in their correct positions.
In the render function, wrap the Text tag in the following native-base tags Root, View, Container & Content. Now when we develop our child component they’ll be styled by native-base.
Native-base for Android requires an import of the Roboto font. We don’t want a bad UX so we’ll set a simple loading state while the font is being imported. We’ll import the font in the lifecycle event componentWillMount.
While the font is being imported we want to show the user aSpinner. In the in the render function we’ll return the Spinner when the states property loading is true.
1.3 Title Bar
Your app looks a bit silly now — with the text sitting at the top of your screen, unreadable. We can fix that with a title bar.
Much like React, React Native encourage reusability and separation of components. With that in mind, we’ll separate the title bar.
Create a new folder & file global/TitleBar.js. The component is stateless, and it will accept a single prop title.
It’s a good habit to define our props with the prop-type package.
As your app grows, you can catch a lot of bugs with typechecking.
We’ll add the snippet to the end of the file.
This prop type tells all our parent components thatTitleBar requires a title of type string to be defined as a prop.
Before we import the component into App.js let’s finalise the style. Importing Header, Left, Body, Title& Right from native-base will make our title bar look more native.
We can update App.js to import our TitleBar. Add the tag as the first child of Container, directly above Content. Don’t forget to include a title prop!
<TitleBar title="Crypto Tracker" />
While we’re working on the UI let’s fix the default styles. We’ll add a small fix for Android devices and remove the unused properties.
At this point we should have a basic app with a title bar and the default React Native text. Our App.js should look like the following;
1.4 Coin Card
To finalise the code scaffold we need to create a card to hold the crypto currency information & chart.
Create a new folder & file charts/Coin.js. The component will eventually have a state so we’ll extendReact.Component and declare a class.
native-base has some Card components we can import. We’ll add placeholder text and import a logo from the GitHub repository atomiclabs/cryptocurrency-icons.
Now we can import Coin.js to App.js to show the BTC placeholder card.
Replace the Text tag with the newly created Coin.
Our final version of App.js
Our basic code scaffolding is now complete. The next step is to manage the state and integrate into the Binance API.
If you want to compare code, or start from this point; you can download the code from GitHub
