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.
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: