{"id":13678958,"url":"https://github.com/calebnance/expo-spotify","last_synced_at":"2025-04-05T02:11:56.848Z","repository":{"id":36230944,"uuid":"185131263","full_name":"calebnance/expo-spotify","owner":"calebnance","description":"Spotify UI Clone with React Native \u0026 Expo","archived":false,"fork":false,"pushed_at":"2023-04-05T02:19:36.000Z","size":4953,"stargazers_count":585,"open_issues_count":4,"forks_count":105,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-29T01:14:34.397Z","etag":null,"topics":["clone","design-system","expo","react-native","react-native-web","react-navigation","spotify","ui"],"latest_commit_sha":null,"homepage":"https://expo-spotify.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calebnance.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-06T05:47:25.000Z","updated_at":"2025-03-19T16:57:13.000Z","dependencies_parsed_at":"2024-08-02T13:17:37.458Z","dependency_job_id":"459af791-a60a-4ac1-9512-e65ef3cdd33d","html_url":"https://github.com/calebnance/expo-spotify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-spotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-spotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-spotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebnance%2Fexpo-spotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebnance","download_url":"https://codeload.github.com/calebnance/expo-spotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clone","design-system","expo","react-native","react-native-web","react-navigation","spotify","ui"],"created_at":"2024-08-02T13:01:00.216Z","updated_at":"2025-04-05T02:11:56.828Z","avatar_url":"https://github.com/calebnance.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Spotify: UI Clone with React Native / Expo\n\nweb demo: [Expo Spotify](https://expo-spotify.vercel.app)\n\n[![follow @calebnance](https://img.shields.io/twitter/follow/calebnance.svg?style=for-the-badge\u0026logo=TWITTER\u0026logoColor=FFFFFF\u0026labelColor=00aced\u0026logoWidth=20\u0026color=lightgray)](https://twitter.com/calebnance)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/screenshare-4.jpg?raw=true\" /\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Install \u0026 Build](#install--build)\n- [Features](#features)\n- [Linting](#linting)\n- [Expo Web](#expo-web)\n- [Release Notes](#release-notes)\n\n## Install \u0026 Build\n\nFirst, make sure you have Expo CLI installed: `npm install -g expo-cli`\n\n**Install:**\n\n```bash\nyarn\n```\n\n**Run Project Locally:**\n\n```bash\nyarn dev\n```\n\n## Features\n\n- Expo SDK 48\n- iOS, Android and PWA (Web App)\n- React Navigation v6\n- React Context\n- PropTypes\n\n## Linting\n\n- run: `yarn lint` for a list of linting warnings/error in cli\n- prettier and airbnb config\n- make sure you have [prettier package](https://atom.io/packages/prettier-atom) installed on your atom/vscode editor\n- then make sure to enable these options (packages → prettier):\n  - eslint integration\n  - stylelint integration\n  - automatic format on save (toggle format on save)\n- be aware of the `.prettierignore` file\n\n**Update Linting Packages:**\n\n```\nyarn add @babel/core eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-import-helpers eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native prettier --dev\n```\n\n## Expo Web\n\nCurrently 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](https://github.com/necolas/react-native-web) and react-dom.\n\n[PWA: Expo Spotify](https://expo-spotify.calebnance.now.sh) looks best on a mobile device, but not bad on desktop!\n\n**Dev with Expo Web**\n\n- Remove node_modules if they exist: `rm -rf nodes_modules`\n- Install/Re-install: `yarn`\n- Start development: `yarn web` or `expo start --web`\n- Build PWA: `yarn web-build` or `expo build:web`\n\na couple manual changes within `index.html` i found needed to be made so far:\n\n- **to make splash screen work:** \"mobile-web-app-capable\" =\u003e \"apple-mobile-web-app-capable\"\n- **status bar transparent:** apple-mobile-web-app-status-bar-style=\"default\" =\u003e \"black-translucent\"\n- **no white background:** add background color within body{background-color: #121212; ...}\n- **check output meta:** double image meta tags\n- **check output js:** double/triple js packages\n\n## Release Notes\n\n**version 0.5.0 (current)**\n\n- upgraded to [Expo SDK 48](https://blog.expo.dev/expo-sdk-48-ccb8302e231)\n- upgraded to [Expo SDK 47](https://blog.expo.dev/expo-sdk-47-a0f6f5c038af)\n- upgraded to [Expo SDK 46](https://blog.expo.dev/expo-sdk-46-c2a1655f63f7)\n- upgraded to [Expo SDK 45](https://blog.expo.dev/expo-sdk-45-f4e332954a68)\n- upgraded to [React Navigation v6](https://reactnavigation.org/docs/getting-started)\n- upgraded to [React Navigation v5](https://reactnavigation.org/docs/5.x/getting-started)\n- Removed ScreenProps for [React Context](https://reactjs.org/docs/context.html)\n\n**version 0.4.0**\n\n- upgraded to [Expo SDK 44](https://blog.expo.dev/expo-sdk-44-4c4b8306584a)\n- upgraded to [Expo SDK 43](https://blog.expo.dev/expo-sdk-43-aa9b3c7d5541)\n- upgraded to [Expo SDK 42](https://blog.expo.io/expo-sdk-42-579aee2348b6)\n\n**version 0.3.0**\n\n- upgraded to [Expo SDK 41](https://blog.expo.io/expo-sdk-41-12cc5232f2ef)\n- upgraded to [Expo SDK 40](https://blog.expo.io/expo-sdk-40-is-now-available-d4d73e67da33)\n- upgraded to [Expo SDK 39](https://blog.expo.io/expo-sdk-39-is-now-available-4c10aa825e3f)\n- upgraded to [Expo SDK 38](https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee)\n\n**version 0.2.0**\n\n- upgraded to [React Navigation v4](https://reactnavigation.org/docs/4.x/getting-started)\n- upgraded to [Expo SDK 37](https://blog.expo.io/expo-sdk-37-is-now-available-dd5770f066a6)\n- upgraded to [Expo SDK 36](https://blog.expo.io/expo-sdk-36-is-now-available-b91897b437fe)\n- upgraded to [Expo SDK 35](https://blog.expo.io/expo-sdk-35-is-now-available-beee0dfafbf4)\n\n**version 0.1.0**\n\n- Expo Web support\n- upgraded to [Expo SDK 34](https://blog.expo.io/expo-sdk-34-is-now-available-4f7825239319)\n- upgraded to [Expo SDK 33](https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c)\n- started with [React Navigation v3](https://reactnavigation.org/docs/3.x/getting-started)\n- iOS and Android\n- Tab Navigation (stacks created)\n  - Home\n    - Horizontal Album component\n    - Album Screen\n      - animation opacity on header\n      - scroll sticky of shuffle button\n      - current song playing shows in album list view\n    - Album More Options (added by [@bidah](https://github.com/bidah))\n      - blur view\n      - SafeAreaView example\n      - action list with supporting icons\n    - Header animation on scroll event\n      - animation opacity on iPhoneX notch\n      - animation opacity on cog icon\n  - Search\n    - Sticky search bar (animated width)\n    - Playlists sections added (with mock data)\n  - Library\n    - Menu items from mock data\n  - Custom Bar for Music Player added to `\u003cBottomTabBar /\u003e`\n- Modals (bottom to top)\n  - Music Player\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebnance%2Fexpo-spotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebnance%2Fexpo-spotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebnance%2Fexpo-spotify/lists"}