I made the Spotify Synced Lyrics Screen using Reanimated 2. I first tried to make the project using Animated API from React Native but I was not able to achieve the Auto Scroll part. And no, it doesn't play the music that would be a huge copyright issue.
All the components are made using Reanimated 2. Previously I was using Animated from React Native but it was very limited and code was becoming messy. This is my first project based on Animation, it may not be much but its an honest work.
Disclaimer
All the assets (Album art, lyrics, fonts etc) are copyright of their respective owners. This project is purely made for educational use.Song Used in this example is "Save Your Tears (with Ariana Grande) (Remix)" by The Weeknd and Ariana Grande. Listen it on Spotify
Download Spotify from here
Follow The Weeknd and Ariana Grande
This is an expo managed project. You can read about expo here.
react-native-reanimated(duh!) : Used for animationsexpo-linear-gradient: For the gradient effect on the edges on lyrics component.expoandtypescript
Special thanks to eveningkid for inspiring me. Check out his channel on Youtube
To run the app on your phone or emulator, first make sure you have installed expo-cli. Then
# Install Dependencies
yarn
# or do "npm install"
# Start expo project
yarn run start
# or npm run start
If you found a bug in my code or any optimisation problem please open an issue. I would love to fix my code.
If you want to help, this project is accepting contributions. Just fork and open PR, I will gladly merge it. You can start by looking at Todos mentioned below.
- Make the Lyrics Part Scrollable by User
- Make the whole Player Part