Build a React Native Crypto Currency Tracker [Part 2]

React Native — Crypto Currency Tracker

Introduction

This tutorial is for developers who want to learn more about React Native.

You’re reading Part 2 of 3.

It’s suggested that you start reading from Part 1. However, if you want to start from here you can download the code from GitHub.

It’s assumed that you have some knowledge of React/React Native in particular the usage of props, state and therender function.

Part 1 — Code Scaffold
Part 2 — State & API Integration
Part 3 — Styling, Props & Error Handling

Part 2 — State & API Integration

2.1. State Setup

We’re going to start dealing with state within our Coin component. Our API request will be asynchronous and we want to show the user some loading animation while the request is running in the background.

We’ll use Spinner from native-base, wrapping it in a Card, CardItem & Body tag to make it like the normal card layout.

We need to set the initial state in the constructor in charts/Coin.js

When state.loading === true we will show the Spinner. We don’t want to show the Text or the footer card item as they wouldn’t have loaded yet. We can add some short-circuit operators to achieve this.

2.2. API Integration

Great — Now we’re stuck with an infinite loading state. Time to integrate the API! Create a function fetchKline(). Within we will use the Fetch API built into React Native.

React Native provides the Fetch API for your networking needs. Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before.

We’re getting closer now — we adjust our loading state once the response is received from the API. Now we just need to call fetchKline() . We can do this in the lifecycle componentWillMount()

Let’s handle the Binance response. Update the initial state to include a trades property set as an empty array.

In the fetchKline() function we need to grab the trades and push them into an array. We only care about the Open Price which is in position 1 of the response array.

Once mapped to a new array we’ll set it into the state for access later.

2.3. Charts Setup

Now we need to do something with this trades data, so let’s install the react-native-svg-charts package.

$ npm install react-native-svg-charts --save

This charts package requires a small amount of styling to get started, so we’ll create a StyleSheet and setup a bit of the UI.

We’re ready to import the LineChart from react-native-svg-charts. It accepts data and style as props and needs to be wrapped in a View with a height set.

Replace the existing Text with the new View & LineChart block.

Let’s fix the price and percentage in the footer of the card. The API returns us a 30 minute snapshot with a limit of 50 results, the first result is the earliest price, the last result is the most current.

We need the lastTrade (current price) and the firstTrade in order to calculate the percentage change. Once calculated we can set the percent and price in the state.

*Don’t forget to initialise percent & pricein the constructor

We can now take these properties and use them in our render function showing the real percent and price instead of our placeholders. We can format the price nicely by using thetoLocaleString method.

Our Coin.js should look like the following;

Isn’t our app looking great! If you want to compare code or start from this point, you can head over to GitHub.

Continue reading: Styling, Props & Error Handling