React Native song lyrics search app

by React Native Example

Lyrics King

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

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

App Preview

Search Screen

Details Screen

About Screen

Adobe XD files

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

Features

Screens

src/screens/

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

Components

src/components/

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

Config

src/config/

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

Lib

src/lib/

  • constants.js - Expo manifest constants and functions

Utils

src/utils/

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.

GitHub