Build a React Native Crypto Currency Tracker [Part 3]
Introduction
This tutorial is for developers who want to learn more about React Native.
You’re reading Part 2 of 3.
If you haven’t followed the other two parts — you should go back and start from the beginning.
If you want to start here you can download the working code from GitHub.
Part 1 — Code Scaffold
Part 2 — State & API Integration
Part 3 — Styling, Props & Error Handling
Part 3 — Styling, Props & Error Handling
3.1. Styling
Our chart, percentage and price figures are now all using real figures and fetched from Binance. Now we can stylise!
A simple way to make the app look better is to make the figures and chart green when the price has increased, and red when it’s decreased.
Let’s create two new styles and add them to the StyleSheet. priceUp and priceDown both with a color property — you’ll notice this is very similar to CSS.
Create the function chooseStyle which can look at the percent and return the relevant green/red style.
In the render function we can check the style and pass it to the chart & figures.
Your app should be looking much nicer now, with the coloured chart and figures. The complete version of Coin.js should look like the following;
3.2. Props
You might have noticed that our asset pair is hard coded as BTC/USDT, and our intervals are set to 30 minutes. So how can we show other charts like ETH/USDT or XRP/USDT? Simple! We’ll use props.
We need three props; baseAsset, quoteAsset & interval — All of type string. Let’s define our propTypes.
Now we need to update our App.js to pass these props to the Coin component. While we’re there let’s add a couple of new pairs.
Your app should have updated and you’ll have three charts showing — but they’re all still BTC/USDT. That’s because we aren’t reading the props in the component yet.
Jump back to Coin.js and start replacing the hard coded values with the props. Update the fetchKline and render methods.
Your app should be looking awesome now. It should be tracking multiple pairs, brining in the correct chart, price, percentage change and asset image.
The only thing left to do is handle errors.
Given that we are only making one API request in Coin.js it's relatively easy to handle.
3.3. Error Handling
If the Binance API fails to fetch then we catch and log the error, but the user would continue to see the Spinner without any notification — which is bad UX.
We’ll create an error property in state, then if we enter our catch block within fetchKline we can update the state.
In the render function we could add some more short-circuit operators but the logic will start getting really confusing, so let’s break up the logic to discrete parts. We can handle loading, error and final views in their own variables.
If there is an error with the API the user will receive a message asking them to retry instead of a stuck loading animation.
The final version of Coin.js is now ready.
You can download the final code from GitHub.
I want to continue to expand this tutorial to include more features from React and React Native. Comment below on what you would like to see next.
