Build a Music Player app with React Native, Expo, Typescript and Zustand

📚 Resources

In this project, we are going to build a native music player application (inspired by Apple Music design) with many core functionalities such as playing, pausing, seeking, and skipping tracks, along with managing playlists and queues of songs and even a search functionality. We will use React Native, Expo, Typescript, Zustand, and many more technologies.

Timestamps
00:00:00 Intro
00:04:07 Project setup (Expo App)
00:25:36 App navigation (Expo router)
00:43:56 App style (dark mode)
00:57:54 Songs Screen
01:38:16 Adding the Track Player (react-native-track-player)
02:01:10 Floating Player
02:27:57 Adding animated icons
02:38:31 Animated song title
02:52:15 Track Player Screen
03:57:46 Favorites Screen
04:04:38 Adding Zustand (state manager)
04:17:15 Queue management (list of songs1)
04:52:48 Artists Screen
05:21:33 Playlist Screen
05:54:30 Shortcuts (add to playlist, add to favorites)
06:18:27 Track player favorites button
06:27:33 Add to playlist feature
06:42:38 Player remote controls (lock screen, control center)
06:51:22 Outro

[codewithgionatha]

It includes some tweaks and fixes I've added along the way, making it a useful resource for the project 🙌

[syketb]

Hey bro! I don't know you and I don't know your channel, but I saw this video in my feed, it looks like I found my favorite and wanted channel. Please share this kind of projects video. I liked it, Thank you so much. will be your daily visitors for sure, take love.

[insensibility]

Can you do more of React Native, man? You're a great teacher!

[hubesh]

thanks awaiting for more and Full stack Projects in react native with Backend thanks for this osam project

[Mahadev-xu]

Finally I found right channel… Excellent explanation and amazing coding with your teaching style. Definitely one of best tutorials which I seen… Thank you so very much for your kind efforts and self giving 🔥💯 please keep it up 👍 more projects with React Native 🙏

[dineshsingh-kwlt]

great tutoral, very helpfull for music app I am developing

[benadams]

Loved this video Gionatha! Would love to see more just like this one!

[richysel]

Amazing tutorial. i loved every part of it. You are amazing teacher. i built the android version, now trying to read the react-native-trackplayer documentation to see if i can load the tracks from local storage, instead of using the json library data prop. Thank you once again

[MrCbutters]

One of the best tutorials i have watched. Great vid keep them coming! Cheers!

[danielmoralesgonzalez]

Thanks for the tutorial, you're a champion!

[cafecomjavascript]

Hi, thank you for your tutorial❤ how do you implement responsive design in React Native?

[thebama]

awesome thank for share your knowledge, more content about react native please

[mma-dost]

Thanks man! You channel is great respect and god bless

[CantWords]

Awesome great video I would love to see more React Native project like this

[confidenceclinton]

How am I just seeing your channel. Bro you're too good. Please make more react native projects, if possible with clerk, supabase or appwrite.

[prashlovessamosa]

Great explanation brother I just found your channel looking forward to learning awesome stuff from you.

[ryannwaneri]

Notice to people trying to follow this for android some of the things he uses here are ios specific for instance some of the options in the native stack navigator options so you should try finding ways around this and follow up with the rest of the tutorial

[switchlyrics.]

🙏🙏🙏🙏🙏🙏🙏🙏i've been waiting a tutorial like this, for so long.

[ega]

Grazie Gionatha ! Unfortunately, Expo52 came along, with the new architecture which will be mandatory on Expo53... Did someone already test this nice piece of code under this configuration??? Thanks for the information...

[raphaeljaggerd]

Amazing stuff. Just finished your Electron video. Is there any reason you switched from using Jotai to zustand?