Bank: React Native

Kyle Redelinghuys -

As part of the process of building out full infrastructure, I had already started work on an iOS app. The app had been built and was working and at the time used the TCP CLI client. I started moving this over to HTTP, but almost immediately ran into issues around async calls and more.

These issues required too much deep diving so I decided to try the app using something I was more familiar with and that also provided cross-platform development. I landed on React Native and the experience has been fantastic.

Benefits of React Native

I decided on React Native after doing some research into the various frameworks out there. React Native was appealing due to it being more Javascript than a framework and as such the ramp up was easy.

React Native development allows for quick mobile app development using Javascript, with the benefits of being cross-platform and highly-performant.

Structure

Unlike a lot of frameworks out there, React Native was easy to structure to separate logic, styling and libraries. I broke out the Bank API functionality into a separate library which allows great abstraction over the functionality.

By default, the calls are asynchronous and pass results back to a callback in the calling controller. I have a feeling there might be a nicer way to handle this, like watching the state of an object and acting on change, but for now the callbacks work great.

Routing

Routing is trivial using react-native-router-flux. This allows for setting up of scenes associated to views, and then accessing them using Actions. The examples in the repo are more than enough, the scenes are set up as below:

<Scene key="register" component={RegisterView} title="Register"/>

This is done for all views you wish you have in your application.

Handling data

Data is passed between views when the view is called. Below we pass the data from a row through to a separate view handling individual contacts.

<Text onPress={()=>Actions.contact({ title:'Contact', data: rowData })} >

The data is the accessed as follows in the called view, contact in the function above.

<Text>Contact name: {this.props.data.ContactName}</Text>
<Text>Contact Account Number: {this.props.data.ContactAccountNumber}</Text>
<Text>Contact Bank Number: {this.props.data.ContactBankNumber}</Text>

Storing data

For the storing of data, I opted to use a platform independent option and landed on Realm DB. The implementation is trivial and the documentation is great, and it offers encryption off the bat.

I set up the schemas and the functionality into a library. The functions for creating, deleting and updating records are nicely documented. One of the best functions I found was the ability to add a listener. This can let you hook into a data change on a specific set, and call a function accordingly.

componentDidMount: function() {
		// Observe Realm Change Events
		db.addListener('change', () => {
			// Fetch account
			let user = db.objects('Account');
			var userAccount = user.slice(0,1);
			userAccount = userAccount[0];
			this.setState({ 'balance' : userAccount.AccountBalance });
		});
	},

The above example ensures that the balance is always kept up to date.

Next steps

The app is currently fully functional and replicates the old apps functionality, that is:

  • Account creation
  • Auth credential creation
  • Logging in
  • Token handling
  • Retrieval of account details
  • Listing all accounts
  • Viewing single account
  • Making a payment to a contact
  • Making a deposit

Now that the functionality is at a good state, I can start working on the design. From here on out I’ll be fixing the design and the UX.

Conclusion

At the end, big fan of React Native. I will be moving forward with this technology as the primary driver for the mobile application. Quick and easy, solid cross-platform development is the way forward.

As always, the code is open source.