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 - Expo Demo Link
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.
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)
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
shareHelper.js- Native device share method
- Install the latest Node
- Install Expo -
npm install expo-cli --global
cdinto this project directory
|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.|
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!
- Debouncing or throttling on search functionality.
- PropTypes on components.
- Adding clear search button functionality on Android. This functionality already exists on iOS.
- Animations would be a nice touch! Fading in the details screen background image would be priority.
- Any general performance improvements.
Other contributions and suggestions are always very welcome! Contact me if you wish to discuss anything.
Google Play Store
View my commercial apps on the SK-UK Google Play Store
If you like this project and wish to say to say thanks - I'm always open to a coffee!