Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux

Indrek Lasn
Oct 15, 2017 · 6 min read

Demo — What we’ll be building

The final product

I’m going to teach you how to write a native mobile app with React Native and Redux. Let’s dive in!

What is React Native?

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Why Are We Using React Native Instead of Swift, Kotlin, Java or Objective-C?

It all comes down to preference really. Here are the main scenarios:

  • Perhaps you already know some React. In this case, building React Native apps will be an absolute pleasure. RN tooling is great.

Please keep in mind that, in the end, only one thing matters — whatever works best for you and makes you happy.

It’s fair to say React Native is mature by now. A lot of companies have adapted to RN (including Facebook native apps) — the demand is very high in the job market.

RN Showcase

What is Redux?

Redux is a predictable state container for JavaScript apps.

If you’re not too familiar with Redux, the article below is a nice tutorial on how to apply Redux to React apps.

Why Are We Using Redux?

  • Redux makes the complicated parts (state management) more predictable and easier to reason about.

Let’s start!


Make sure you have everything required before continuing.

Installing and Setting Up Our Native App Development Environment

Open your terminal and run a couple of commands for installing React Native and launching your preferred simulator.

$ npm install -g create-react-native-app

$ create-react-native-app react-native-redux-crypto-tracker && cd react-native-redux-crypto-tracker

You should end up with something close to this:

Installing react-native and creating a react-native project

We’re almost there.

Next up, we need to just serve our project. Type the next command in the terminal. You can choose between iOS or Android simulators. Press I for iOS and a for Android.

I have chosen iOS for this guide, but it works on both operating systems! I personally like both iPhone and Android phones, and you can choose per your preference.

  • (simulator)$ npm run ios — iOS

The iPhone X simulator works beautifully in harmony with RN. Thanks Facebook team for the great implementation and execution! 👍

As we can see, there are quite a lot of things going on. From the top, we can see

import { StyleSheet, Text, View } from ‘react-native’;

What is this exactly?


Text is JSX — a syntax for embedding XML within JavaScript.

Many frameworks use a special templating language that lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside the code.

It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components. In this case, <Text> is a built-in component that just displays some text.

TL;DR: A React component for displaying text.


The most fundamental component for building a UI. View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.

View maps directly to the native view equivalent to whatever platform React Native is running on — whether that is a UIView, <div>, android.view, or other.

View is designed to be nested inside other views and can have from zero to many children of any type.

This example creates a View that wraps two colored boxes and a text component in a row with padding.

Style Sheet

A style sheet is an abstraction similar to CSS style sheets.

It creates a new style sheet. Styling for RN is flexbox based. It uses the Yoga layout engine. We pass styles to elements through the style prop.

Building the App

Start by making a src directory where we place all our code.

$ mkdir src && cd src

Inside src, create a components directory. Inside the components we’ll place our views.

Implementing the Header

Make two files inside src/componentsHeader.js and index.js.

Header.js is for the header of the app, and index.js is for making an import export cleaner.

Inside Header.js, implement a stateless component. Try to do it yourself — the most efficient way of learning is actually doing.

Next up — import the Header.js to the App.js and display it!

It works! But wait... why is the title almost hidden by the iPhone default text? We will fix that in the next chapter!

Source Code

If you want to bring your JavaScript to the next level, start from this book. Find the kindle version here.

Thanks for reading!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Web & iOS Engineer, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

More from Better Programming

Why Do Incompetent Managers Get Promoted?


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade