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.
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:
Design files for the UI can be found in _design_assets/adobeXD
in the project root. UI design implemented with flexbox.
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)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)src/config/
router.js
- App navigation routing (including drawer nav render method)colours.js
- Colour constantssrc/lib/
constants.js
- Expo manifest constants and functionssrc/utils/
shareHelper.js
- Native device share methodnpm install expo-cli --global
cd
into this project directorynpm install
or yarn install
expo start
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. |
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.
#react-native #programming