React Native has established itself as one of the leading frameworks for hybrid mobile development. According to statista.com the global average of mobile users is currently at 70% with mobile devices accounting for about half of web page views. Mobile apps are becoming (if not already) the means for us connecting with each other across the world, and thus this has serious implications for how we conduct our finance. Special thanks to fmsouza developing a scaffold for this implementation.
Ethereum is a global, open-source platform for decentralized applications. On Ethereum, we can write code that controls digital value and essentially program our money. So let's jump right into it. 🚀
We are going to build React Native dApp that can
Create an Ethereum wallet for a user
Receive Ether/value by this wallet
Send Ether to another wallet
View our total balance amongst our wallets in both Ether and FIAT currency
For reference here's the repo:
I am currently in the process of upgrading a number of packages that are old in this project, as well as migrating to React Hooks but in the interim, this should get people started. I will write a separate article with the refactored code.
I'll be using
react-native init to create this project. I am using React Native version
0.59.9, because there have been issues integrating with React Native 0.6+. I will address those in a separate article. Run the following command
this will, of course, add all the necessary dependencies to create a basic functioning react native app.
I'll be using a variety of different packages to build this app, in particular:
react-navigation to navigate around the app
react-native-camera to scan QR Codes for adding wallets easily.
mobx for state management
axios for our http calls
I will utilize other dependencies and dev dependencies which I will mention at particular snippets, but for the purposes of this article, I chose to highlight the main packages.
So if you have any familiarity with redux then you may already understand what a store is, for those of of you who don't, The main responsibility of stores is to move logic and state out of your components into a standalone testable unit. You can read more here
we use the
@action decorator on any action that is going to modify an observable . Here we a variety of functions related to the manipulation of a particular instance of wallet's state. Here we deal with pending transactions, updating wallet history and reseting our stores.
These make specific modifications on our state but are not directly called from components, which just adds another layer of modularization and follows general Flux architecture. Our Actions will be responsible for this.