4mins read time

I’m a little late to the React Native bandwagon, as I was with React itself, but it seems that having an understanding in React goes a long way in giving you a jumpstart into this hybrid mobile framework. Coming from another hybrid framework, Appcelerator Titanium, it makes understanding the processes and flows a little easier.

Essentially, the framework uses proxies to expose a number of methods from the native language to JavaScript. By doing this is allows us to write applications in JavaScript which can later be compiled to native code and built for simulators, emulators or production. These types of frameworks are now making it easier for a lot of developers out there to get their fingers dirty with cross platform applications.

For my first project and steps into React Native, I wanted something that would allow me to play around with a number of different components, methods and processes to truly get to grips with the framework quickly.

I began my journey by deciding on a 3rd party API that I could focus my app around. I landed on a lyric API by musixmatch, after trawling through a number of various free API’s. Musixmatch’s API and documentation stood out stronger than the rest so it seemed like a good place to start. Following this, I began to build out the core components of what would drive the app. I utilised three main components from React Native, these being the Navigator, ListView and TextInput.

The idea of my app would be to allow a user to search via the TextInput, this would call out to the API, fetching the relevant data and this would populate the ListView. Upon selecting a row, this would then trigger the Navigator to push a new child view containing a new ListView. This would be populated by albums based on the selected artist, we then select an album, a track and finally get the lyrics. This is a very simple app and took probably a day to write and half a day to style everything properly. I spent quite a lot of my time deciding on code splitting practices and abstraction of particular snippets of code for reusability.

The bottomline is, React Native is very quick and easy to get to grips with. Especially if you already have prior knowledge of React, or even an understanding of hybrid mobile development. There are plenty of tools out there to get up and running, a huge amount of projects, add-on’s, modules, articles, whatever you need to help you get up and running.

You can check out my repo here: Lyricify

As always, here are some handy links I used: