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

Demo — What we will be building


Greetings fellow techies! It’s me, Indrek. I recently accepted a new job at Switzerland, Zurich {Grotzi! — translation: Hi} as a senior software engineer at one of the biggest banks. It’s been quite a challenge to move here but life has finally settled enough for me to write a new guide for you!

P.S: Switzerland is a great choice if you’re looking for new adventures — recommend strongly! Food here is excellent and I love how patient and polite the people are.


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
https://facebook.github.io/react-native/

Not a problem if you’re not too comfortable with React — here’s a great React tutorial.


Why are we using React Native instead of Swift, Kotlin, Java or Objective-C?

Well it all comes down to preference really. Here are the main scenarios.

  • Perhaps you already know some React — building React Native apps will be an absolute pleasure. RN tooling is great.
  • Cross platform. Learn once, write anywhere. Instead of writing your android app in Kotlin and your iOS app in Swift — you can write both of them in React Native and save a huge chunk of time and budget.
  • Easier to transition into mobile development from web background.
  • Javascript — one language to rule all.
  • Ability to quickly push updates directly to a published app — bypassing the app store review process and timeline. Excellent post explaining how this is possible.

Please keep in mind — 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.


What is Redux?

Redux is a predictable state container for JavaScript apps.
http://redux.js.org/

If you’re not too familiar with Redux — here’s a nice walkthrough 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.
  • Decouple state from views. What I mean by that exactly is let React handle the views and Redux handle the state of the app.
  • Clean code and best practices.
  • Great tooling and middleware to make developing more enjoyable.

Get ready to boogie!

Prerequisites:

Watch this quick talk about “What is Expo?” — mind-blowingly innovative stuff!

Expo Download link here.

Also recommend getting the expo-cli tooling!

Make sure you have everything required before continuing.


Begin by installing setting up our native app development environment.

Open our terminal and run couple commands for installing React Native and launching our 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 simulator. 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 (I’m not biased). Feel free to choose.

(simulator) — $ npm run ios — iOS

(simulator )— $ npm run android — Android

(Physical Device )$ npm run start — QR code and options. Open your mobile camera and point it to the QR code. Also you’re going to need the expo app as well.

Expo for Android — Expo for iOS

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

As we can see — there’s quite many things going on. From the top we can see

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

What is this exactly?

<Text>

Text is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside 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.

<View>

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 on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
View is designed to be nested inside other views and can have 0 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.

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets.
Creates a new StyleSheet.
Styling for RN is flex-box based. Uses the Yoga layout engine.
We pass styles to elements trough the style prop.

Not too comfortable with flexbox? No worries, here are the best resources to master flexbox!



Building the app

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

$ mkdir src && cd src

inside src make a components directory. Inside the components we will be placing our views.

Implementing the header

Make two files inside src/components — Header.js and index.js

Header.js is for the header of the app and index.js for making a import exports 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!

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

Chapter 2 can be found here!

In case you got lost, here’s the source code!

Indrek