SKempin / Lyrics King React Native
Licence: mit
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
Stars: ✭ 261
Programming Languages
Labels
Projects that are alternatives of or similar to Lyrics King React Native
coronadev
Aplicativo para consultar a situação global do COVID-19
Stars: ✭ 44 (-83.14%)
Mutual labels: react-navigation, expo
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (-90.8%)
Mutual labels: react-navigation, expo
proffy
React Native + ReactJS + NodeJS project developed on RocketSeat NexLevelWeek. This project is based on an application for connect students and teachers.
Stars: ✭ 30 (-88.51%)
Mutual labels: react-navigation, expo
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (-1.15%)
Mutual labels: expo, react-navigation
react-native-boilerplate
Expo + Redux + React Navigation Pre-setup Template (expo SDK 44)
Stars: ✭ 142 (-45.59%)
Mutual labels: react-navigation, expo
Server
☁️ Nextcloud server, a safe home for all your data
Stars: ✭ 17,723 (+6690.42%)
Mutual labels: opensource, design
SocialApp-React-Native
Social Networking mobile app similar to Instagram in React Native.
Stars: ✭ 79 (-69.73%)
Mutual labels: react-navigation, expo
Chatwoot
Open-source customer engagement suite, an alternative to Intercom, Zendesk, Salesforce Service Cloud etc. 🔥💬
Stars: ✭ 11,554 (+4326.82%)
Mutual labels: opensource, design
umi-react-native
umi preset plugins for react-native
Stars: ✭ 54 (-79.31%)
Mutual labels: react-navigation, expo
acgnfuns-app
A react native app based on expo, dva, etc.
Stars: ✭ 14 (-94.64%)
Mutual labels: react-navigation, expo
Truvisory
This project is meant to provide resources to users who want to access good LinkedIn posts which contains resources to learn any Technology, Design, Self-Branding, Motivation etc. You can visit project by:
Stars: ✭ 116 (-55.56%)
Mutual labels: opensource, design
open-gsa-redesign
A fresh start for open.gsa.gov.
Stars: ✭ 27 (-89.66%)
Mutual labels: opensource, apis
Rox
🌍 BeWelcome lets you share a place to stay, connect with travellers, meet up and find accommodation on your journey. It is and will always be a free, open source, non for profit, democratic community.
Stars: ✭ 95 (-63.6%)
Mutual labels: opensource, design
Duckduckgo
DuckDuckGo App built in React-Native (Unofficial)
Stars: ✭ 320 (+22.61%)
Mutual labels: async-await, react-navigation
Module 5 Open Research Software And Open Source
Module 5: Open Research Software and Open Source
Stars: ✭ 62 (-76.25%)
Mutual labels: opensource, open-source-project
RN-Book-Search
A Book search app using Expo (React Native) and Google Books API
Stars: ✭ 29 (-88.89%)
Mutual labels: react-navigation, expo
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: ✭ 222 (-14.94%)
Mutual labels: expo, react-navigation
Pillar Valley
👾A cross-platform video game built with Expo, three.js, and Firebase! 🎮🕹
Stars: ✭ 242 (-7.28%)
Mutual labels: expo, react-navigation
proyecto26.github.io
The Proyecto26 github homepage.
Stars: ✭ 32 (-87.74%)
Mutual labels: opensource, open-source-project
expo-multi-screen-starter
react native / expo / react navigation v6
Stars: ✭ 74 (-71.65%)
Mutual labels: react-navigation, expo
Lyrics King 
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.
Expo Demo Link
Contents
- App Preview
- Expo Project Page
- Adobe XD files
- App Features
- Getting Started
- What's Included
- API's Used
- Contributing
- Author
- Google Play Store
- Donate
- License
App Preview
Video Preview
Search Screen
Details Screen
About Screen
Navigation (Drawer)
Expo Project Page
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
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/
-
shareHelper.js- Native device share method
Getting Started
- Install the latest Node
- Install Expo -
npm install expo-cli --global -
cdinto this project directory -
npm installoryarn install - 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
Contributing
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! 🎉
- [x] Debouncing or throttling on search functionality.
- [x] 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.
Author
Google Play Store
View my commercial apps on the SK-UK Google Play Store
Donate
If you like this project and wish to say to say thanks - I'm always open to a coffee! ☕️
License
You are welcome to use this however you wish within the MIT license, but please retain my credentials and links back to this repo.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].