Lyrics King

React Native song lyrics search app, built with Expo. Designed with Adobe XD.

Could you introduce your app in a few sentences?

Lyrics King was designed and built as both a training app and portfolio piece, for both iOS and Android. It uses APIs from Deezer and Lyrics.ovh to search for song lyrics and basic song details. It was created purely for these purposes, but I hope it can also be used as a training and reference app for the wider React Native community.

What made you decide to use/switch to React Native?

I had previously created apps with Ionic, but found hybrid apps to be creatively restrictive due to their DOM based nature. I knew I wanted to design an app with more creative freedom than a web hybrid app would allow (both in term functionality of and UI), and so React Native stood out due to both allowing that and its native matching performance abilities.

React Native has a very strong community, and so the wide choice of RN libraries also made this an easy decision.

How did you transition to React Native?

I have React experience in my full time job, so transitioning to React Native made sense. This made things much simpler as I already had a firm grasp of both React and modern JavaScript. Having a foundation in modern JS (es6+) definitely helped speed up the process of learning React in general, and then learning React Native was a simple side step from that.

Have your tried other cross platform technologies before using React Native?

Yes I have built several apps with Ionic. Whilst it is a great way to get into hybrid development I found it creatively very restrictive, lacking both the design and performance abilities of native apps. If I was building a fairly simple text based app I would happily use Ionic or a similar platform (Framework 7, etc) again, but for anything more complex, and where UI design is required, I would strongly recommend React Native or a similar framework such as Flutter.

Also Ionic is based on Angular, and as a React developer I found this a bit of a mental shift. I am comfortable with the React ecosystem and so it was an easy choice to stay within this.

What has your experience been working with React Native in terms of app performance, have you noticed any impacts?

On the whole I’ve found performance to match native apps. When I’ve tested the app with friends they have not been aware it wasn’t built with pure native code, so that verified the technology for me. The only issues I have found are with load up times, but these could be addressed with more development time.

How has adopting React Native affected developer productivity?

Knowing React prior to starting the app made things very straight forward and allowed me to be productive from the start. In web development you are usually starting with new frameworks from scratch, so it was nice and easy to use the same environment for once!

Which tools, libraries and frameworks are part of your development process with React Native?

So far I have built purely with Expo, as I’m yet to find a component that isn’t included with this framework. I have found that most React Native libraries work with Expo out of the box; not having to detach has made things much simpler. Of course I realise Expo has its limitations, but I think for most developers starting out it has all the tools necessary.

Aside from this React Navigation has been very useful. I was initially confused on what navigation library to use with the app, but the performance of React Navigation keeps improving to near native levels.

What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?

I’d recommend the official documents, as React is very well documented in general. Aside from that my approach was mainly using YouTube tutorials and Medium.com articles. If I found myself stuck on a particular issue I would do a thorough Google search, or jump on any of the many Facebook groups for both React and RN (I have found these to be particularly helpful). The Reactiflux Discord group has also been very helpful.

What are some things that you don’t like about React Native or that need to be improved?

The speed to hotload changes in Expo is still a downside. This is improving all the time, however. I’m yet to detach and use React Native outside of Expo, so my experiences are based on Expo’s performance.

Anything else you would like to mention?

I have built and published a range of iOS and Android apps with React Native, mainly Banksy’s Bristol Tour App and Banksy’s London Tour App (both are coming to iOS shortly).

Hopefully if people have liked Lyrics King then they may be interested in these too! Also you can follow me on Github or get in touch via my portfolio site. I’m also available for freelance development, so if you have any interest or know someone who might please let me know!