Skip to content
This repository has been archived by the owner on Nov 28, 2023. It is now read-only.

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


Notifications You must be signed in to change notification settings


Repository files navigation

Lyrics King

Build Status Mentioned in Awesome Expo

A React Native native app utilising Expo, React Navigation and fetching data from multiple API's (Deezer and Lyrics.OVH). UI built with Adobe XD.

Built as a personal training project for React Native. Designed in Adobe XD. Design and development by Stephen Kempin. This project was bootstrapped with Create React Native App.

Lyrics King - React Native Expo app


App Preview

Video Preview

Search Screen

Lyrics King - Search screenLyrics King - Suggestions on search screen

Details Screen

Lyrics King - Details screen, Ariana GrandeLyrics King - Details screen, Above and BeyondLyrics King - Details screen, Dua Lipa

About Screen

Lyrics King - About screen

Navigation (Drawer)

Lyrics King - Navigation drawer

This project has been built using Expo. Please install npm install expo-cli --global to run this project locally.

Scan the below QR code to open the project on Android:

Adobe XD files

Design files for the UI can be found in _design_assets/adobeXD in the project root. UI design implemented with flexbox.

App Features



  • SearchScreen.js - Search the Deezer API by song title (class component)
  • DetailsScreen.js - Selected song details (including API call) (class component)
  • AboutScreen.js - About details (functional component)



  • Credits.js - Development credentials template (functional component)
  • SocialButton.js - Button template for sharing links/ the app (functional component)
  • Suggestions.js - Song suggestions (functional component)



  • router.js - App navigation routing (including drawer nav render method)
  • colours.js - Colour constants



  • constants.js - Expo manifest constants and functions



Getting Started

  1. Install the latest Node
  2. Install Expo - npm install expo-cli --global
  3. cd into this project directory
  4. npm install or yarn install
  5. Run expo start

What's Included

Name Description
Expo (incl. React Native) Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.
React Navigation Routing and navigation for your React Native apps.
Format Duration Convert a number in milliseconds to a standard duration string.
RN-Placeholder Display some placeholder stuff before rendering your text or media content in React Native.

API's Used


Due to time constraints there are several features that I haven’t been able to develop yet. If you would like to develop your React Native skills and contribute any of the features below this would be hugely beneficial! 🎉

Other contributions and suggestions are always very welcome! Contact me if you wish to discuss anything.


Stephen Kempin

Lyrics King Project Github

Google Play Store

View my commercial apps on the SK-UK Google Play Store

SK-UK Google Play Store


If you like this project and wish to say to say thanks - I'm always open to a coffee! ☕

Buy Me A Coffee



You are welcome to use this however you wish within the MIT license, but please retain my credentials and links back to this repo.