Giter Site home page Giter Site logo

calebnance / expo-spotify Goto Github PK

View Code? Open in Web Editor NEW
555.0 13.0 99.0 4.84 MB

Spotify UI Clone with React Native & Expo

Home Page: https://expo-spotify.vercel.app

JavaScript 90.15% HTML 9.85%
expo react-native react-navigation clone ui design-system react-native-web spotify

expo-spotify's Introduction

Spotify: UI Clone with React Native / Expo

web demo: Expo Spotify

follow @calebnance

Table of Contents

Install & Build

First, make sure you have Expo CLI installed: npm install -g expo-cli

Install:

yarn

Run Project Locally:

yarn dev

Features

  • Expo SDK 48
  • iOS, Android and PWA (Web App)
  • React Navigation v6
  • React Context
  • 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

Update Linting Packages:

yarn 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

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 or expo start --web
  • Build PWA: yarn web-build or expo 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.5.0 (current)

version 0.4.0

version 0.3.0

version 0.2.0

version 0.1.0

  • 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 />
  • Modals (bottom to top)
    • Music Player

expo-spotify's People

Contributors

bidah avatar calebnance avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

expo-spotify's Issues

Add license

Hey,

can you add a license to it so we know if it's useable in projects. A license like MIT would be nice. Thanks for the great work!

Add options modal

Hey there. I was wondering if you would like some help. It's a big interface. I am playing with adding the options (...) modal with blur in my fork. Tell me if you are ok with it or if you are already working on it. If it's fine tell me to send you a PR when done.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.