Quick change: set the CryptoReducer.js initialState data prop to an empty array instead of null! It won’t work if you don’t do this — apologies!

Alrighty, here’s what’s left to do:

Create a stateless component called CoinCard.js and create the list item.

Remember the sketch called “thinking in React” from the old times?

This perfectly explains how our app works. It goes like this:

The yellow border is our App.js — app container

— app container The blue border is our Header.js component

component Green border is our CryptoContainer.js — holds our list items

— holds our list items Red and neon blue is our CoinCard.js — lists items.

Makes sense, right? All we need to do is implement the red and neon blue borders.

Start by creating the stateless component.

Looks good!

Import View , Text , StyleSheet from "react-native" — we need these to create our view.

Next, let’s declare our props. Let’s name these the same as the data in our API.

Next up, let’s add the coin icons. Unfortunately, the API does not include icons, so we have to compensate. Not to worry — I’ve got your back!

Make a file in Utils called CoinIcons.js and add these links. I uploaded the icons to cloudinary.com and host them as static assets. If you want to help me — feel free to add the rest and make a PR! Here’s the icon set.

Did you notice something new other than the CoinIcons folder? Yep, we imported the Image tag from ‘react-native’

<Image /> A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. Source

Basically, it’s the native version of HTML5 <img /> tag. But it has different props.

The <Image /> property we are interested in is called source

We use require if the want an icon from our computer, and uri if it’s outside our computer (on the interwebz).

We add these styles to our elements, as well. Don’t forget these, otherwise, the image won’t show up!

Time to test! Import the CoinCard to our CryptoContainer and place it in the render() method. We also need to pass the props.

Start by making a method called renderCoinCards inside the container.

Then place it in the render function:

Next up — let’s iterate our crypto.data array. Remember — it’s just an array which holds our objects.

We’re just calling the map() method on our data array and iterating all the objects inside. For each object, we return a CoinCard component with the following props.

Almost there!

We are missing the spinner and when to show the spinner logic.

Install a package called react-native-loading-spinner-overlay

$ npm i --save react-native-loading-spinner-overlay

and import it to our container:

import Spinner from ‘react-native-loading-spinner-overlay';

Let’s write a simple if condition. Remember that we have a isFetching boolean prop under the crypto — try to implement this.

Are you ready?!