Spotify Synced Lyrics using Reanimated 2

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

Libraries Used :

This is an expo managed project. You can read about expo here.

• react-native-reanimated (duh!) : Used for animations
• expo-linear-gradient : For the gradient effect on the edges on lyrics component.
• expo and typescript

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

Found a Bug? / Want to Help?

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.

Todo

• Make the Lyrics Part Scrollable by User
• Make the whole Player Part