Giter Site home page Giter Site logo

calebnance / expo-spotify Goto Github PK

View Code? Open in Web Editor NEW
557.0 13.0 100.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

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.