calebnance / Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Expo Spotify
Expo Uber
Uber UI Clone with React Native & Expo
Stars: ✭ 186 (-35.19%)
Mutual labels: clone, expo, design-system, react-navigation
Expo Disneyplus
Disney+ UI Clone with React Native & Expo
Stars: ✭ 130 (-54.7%)
Mutual labels: clone, expo, design-system, react-navigation
Pillar Valley
👾A cross-platform video game built with Expo, three.js, and Firebase! 🎮🕹
Stars: ✭ 242 (-15.68%)
Mutual labels: expo, react-navigation, react-native-web
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (-10.1%)
Mutual labels: expo, react-navigation, react-native-web
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (-91.64%)
Mutual labels: react-navigation, react-native-web, expo
Expo Netflix
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app
Stars: ✭ 297 (+3.48%)
Mutual labels: clone, expo, react-navigation
Expo Crossy Road
🐥🚙 Crossy Road game clone made in Expo (iOS, Android, web), THREE.js, Tween, React Native. 🐔
Stars: ✭ 701 (+144.25%)
Mutual labels: clone, expo, react-navigation
Lego Expo
Play with Lego bricks anywhere using Expo
Stars: ✭ 65 (-77.35%)
Mutual labels: expo, react-navigation, react-native-web
apple-notes
A clone of the Apple Notes app but made universally with Expo
Stars: ✭ 53 (-81.53%)
Mutual labels: clone, react-native-web, expo
RN-Book-Search
A Book search app using Expo (React Native) and Google Books API
Stars: ✭ 29 (-89.9%)
Mutual labels: react-navigation, expo
SocialApp-React-Native
Social Networking mobile app similar to Instagram in React Native.
Stars: ✭ 79 (-72.47%)
Mutual labels: react-navigation, expo
paramount
React Component Library for React Native and React Web
Stars: ✭ 23 (-91.99%)
Mutual labels: react-native-web, design-system
react-native-expo-web
All-in-one React Native project (Expo + react-native-web)
Stars: ✭ 16 (-94.43%)
Mutual labels: react-native-web, expo
umi-react-native
umi preset plugins for react-native
Stars: ✭ 54 (-81.18%)
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 (-89.55%)
Mutual labels: react-navigation, expo
acgnfuns-app
A react native app based on expo, dva, etc.
Stars: ✭ 14 (-95.12%)
Mutual labels: react-navigation, expo
Lyrics King React Native
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
Stars: ✭ 261 (-9.06%)
Mutual labels: expo, react-navigation
react-tailwind-spotify-clone
Spotify clone with full functionality using React + Tailwind (Not finished)
Stars: ✭ 209 (-27.18%)
Mutual labels: spotify, clone
Spotify: UI Clone with React Native / Expo
web demo: Expo Spotify
Table of Contents
Install & Build
First, make sure you have Expo CLI installed: npm install -g expo-cli
Install: yarn
or yarn install
Run Project Locally: yarn dev
or yarn start
Features
- Expo SDK 40
- iOS, Android and PWA (Web App)
- React Navigation v4
- PropTypes
Linting
- run:
yarn lint
for a list of linting warnings/error in cli - prettier and airbnb config
- make sure you have prettier package installed on your atom/vscode editor
- then make sure to enable these options (packages → prettier):
- eslint integration
- stylelint integration
- automatic format on save (toggle format on save)
- be aware of the
.prettierignore
file
Expo Web
Currently Expo Web support is not production ready, but if you want to see how this project looks on the web as a PWA (Progressive Web App)... using react-native-web and react-dom.
PWA: Expo Spotify looks best on a mobile device, but not bad on desktop!
Dev with Expo Web
- Remove node_modules if they exist:
rm -rf nodes_modules
- Install/Re-install:
yarn
- Start development:
yarn web
orexpo start --web
- Build PWA:
yarn web-build
orexpo build:web
a couple manual changes within index.html
i found needed to be made so far:
- to make splash screen work: "mobile-web-app-capable" => "apple-mobile-web-app-capable"
- status bar transparent: apple-mobile-web-app-status-bar-style="default" => "black-translucent"
- no white background: add background color within body{background-color: #121212; ...}
- check output meta: double image meta tags
- check output js: double/triple js packages
Release Notes
version 0.0.1 (current)
- upgraded to Expo SDK 40
- upgraded to Expo SDK 39
- upgraded to Expo SDK 38
- upgraded to React Navigation v4
- upgraded to Expo SDK 37
- upgraded to Expo SDK 36
- upgraded to Expo SDK 35
- Expo Web support
- upgraded to Expo SDK 34
- upgraded to Expo SDK 33
- started with React Navigation v3
- iOS and Android
- Tab Navigation (stacks created)
- Home
- Horizontal Album component
- Album Screen
- animation opacity on header
- scroll sticky of shuffle button
- current song playing shows in album list view
- Album More Options (added by @bidah)
- blur view
- SafeAreaView example
- action list with supporting icons
- Header animation on scroll event
- animation opacity on iPhoneX notch
- animation opacity on cog icon
- Search
- Sticky search bar (animated width)
- Playlists sections added (with mock data)
- Library
- Menu items from mock data
- Custom Bar for Music Player added to
<BottomTabBar />
- Home
- Modals (bottom to top)
- Music Player
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].