You can check out the official source code repository here: 👉github.com/gionathas/music-player It includes some tweaks and fixes I've added along the way, making it a useful resource for the project 🙌
Hi gionatha, I love the UI design in your project and would like to use it in my music player app, which I plan to publish on Google Play. I'll give you full credit for your work. Would that be okay with you?
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 🙏
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.
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
@@nehalpradhan2229 its not entirely useful for android, since many expo features work only on ios and not on android. i had build my custom header, tab bar etc
I encountered this error and have been unable to resolve it. ERROR Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
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
I really like your demo thank you, I have a question. I can see that you use usePlaylist for example to get data to the flatlist, in the case where we fetch data from server, is it possible to do the same concept? like make request to the server inside the usePlaylist, is that going to work ?
I think both are awesome state manager. Here I decided to bring zustand since it's a little bit more simple to use (IMHO) and to highlight the differences between the two.
Im working on a PC and using Expo Go on an iphone. I followed your tutorial all the way to where you are installing xcode with the simulator. I'm a little confused, are you saying this project cannot be done on Windows? I didn't see that anywhere before I started working on it so wanted to check. When i run npx expo start it generates a QR code which i was successfully able to open on the iPhone with Expo Go, but I can't use this setup? Thanks in advance.
Great video man, but I think there is an error that with expo router I also facing that is try to navigate from notification controller to the app, just give an unmatched route. Is there a way to achieve this?
Hello, sir I'm creating a online music player app , but I'm facing a issue that I'm not able to play music in background/while app was minimized and while screen of . How do I do I please help me it is my college project.
@@codewithgionatha thank you so much, it took some trial and error but eventually I figured out how to get it solved. It was a combo of not having nodejs installed, not having yarn installed, and running the Visual Studio Code 'yarn create expo -t' command in powershell instead of command prompt
Hello! Awesome working example! Is it possible for you to polish up the Android version of the App? I ran it with EAS as a development build and it works great, but some elements need formatting on the Android side of the App. Thanks!
Hi, thanks for you tutorial, I am watching the `setUpTrackPLayer` part, and I see the function `useSetupTrackPlayer` using variable `isInitialized` which is redundant because I dont see it is used to check in elsewhere . Would you help share more on this one ``` export function useSetupTrackPlayer({ onLoad }: { onLoad?: () => void }) { const isInitialized = useRef(false) ..... ```
hello! Good tutorial, I have a problem that I haven't solved for weeks with this library, do you have any idea what it could be? I have found very little information and only from the community, not from its own documentation (react native track player), I am getting this: cannot read property 'CAPABILITY_PLAY' of null
It seems to be an issue with Expo. In case you're using Expo, I suggest you to upgrade it to Expo SDK 50+ and also update react native track player to its latest version.
@@loch1n hi bro, I have not yet implemented the solution that Gionatha has described in this thread, but it makes sense to try maybe, as he says, it is a version problem. Let’s try and stay informed.
Hello I'm having trouble following the instructions and I don't know how to fix it. I follow allow just like instruction and I am stucked at npx expo run:ios. The cocoapod installation keeps failing. Is it because I am on Mac? Due to that, building process always fail.
Yes, it should keep playing even if you leave the app (at least on IOS). Btw you can find more info regarding background mode here: rntp.dev/docs/basics/background-mode
I tried building this on Android and it ran into some issues with the build. The same build works on iOS. Any idea which packages might be causing the issue?
Hi, unfortunately, I focus the development of this project around IOS devices. Maybe we can check together on Discord, to see what the issue might be :)
@@codewithgionatha Is there any alternatives since I'm macOS 10.15 and don't have an apple development account so I can't access old versions of XCode? :/
@@nehalpradhan2229 no I started the project On Windows, But It gave Error Which were giving me headache, So i just deleted the project and Never Started Again
I didn't try. You can try to run on an android simulator by running: 'npx expo:run android' (however you'd need Android Studio installed on your system)
Before I commit to watching this, can you do everything he does and follow along using Metro instead? I have a raging hate for expo. I mean YES that's the point of EXPO it PROVIDES THIS THAT YADDA YADDA what if I want it the harder way, what if I want to setup my own router, or learn how to use a bare filesystem, abstract it away etc.? It's like ok don't reinvent the wheel, but this isn't C, this is abstraction layers upon abstraction layers of many technologies, for learning purposes don't use expo Jesus is this so hard.
![React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript](http://i.ytimg.com/vi/K-aD8ClG1FQ/mqdefault.jpg)
You can check out the official source code repository here: 👉github.com/gionathas/music-player
It includes some tweaks and fixes I've added along the way, making it a useful resource for the project 🙌
Thank you so much for sharing your experience and knowledge, Sir.
The Stack-Navigation part is bit confusing not able to follow clearly. and the search bar feature also
@@Monishreddy-l2k Thanks for the feedback🙏If you need help or further clarifications we can discuss on Discord 😄
Hi gionatha, I love the UI design in your project and would like to use it in my music player app, which I plan to publish on Google Play. I'll give you full credit for your work. Would that be okay with you?
@@pikachu-zt9fq has mit license so u are fine legally
Can you do more of React Native, man? You're a great teacher!
Nice, let vote for the next project. I'm gonna vote Patreon clone using in app purchase for subscription
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 🙏
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.
Wow, thanks so much 🙏
I'll try to do my best 😄
thanks awaiting for more and Full stack Projects in react native with Backend thanks for this osam project
Loved this video Gionatha! Would love to see more just like this one!
great tutoral, very helpfull for music app I am developing
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
Hhai bro, can you please share the source code
i don't use ios can i follow this tutorial for android??, or do i need to do something by myself??
@@nehalpradhan2229 its not entirely useful for android, since many expo features work only on ios and not on android. i had build my custom header, tab bar etc
Underrated project 😮
One of the best tutorials i have watched. Great vid keep them coming! Cheers!
Awesome job, thanks for sharing!
Thanks for the tutorial, you're a champion!
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.
awesome thank for share your knowledge , more content about react native please
Awesome great video I would love to see more React Native project like this
As a beginner it is hard to understand but thank you
I encountered this error and have been unable to resolve it.
ERROR Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Same here!
Thanks man! You channel is great respect and god bless
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
exactly, are you done implementing this using android? if yes, share source code.
if I minimize thr app and go to lock screen, will the audio playback can be managed via Lock Screen control / such stuff?
Great explanation brother I just found your channel looking forward to learning awesome stuff from you.
Thanks 🙏
I really like your demo thank you, I have a question. I can see that you use usePlaylist for example to get data to the flatlist, in the case where we fetch data from server, is it possible to do the same concept? like make request to the server inside the usePlaylist, is that going to work ?
Very helpful. Thanks!
Is there no database or backend part? Where did we get the music list from?
For this project we're using a static file as a database, but it can be easily extended to read from the underline device filesystem..
Please, more react native videos
Great! Could you share figma design this app?
awesome project of react native, simple but elegent design i love it!!❤❤❤, can you make more react native project??
Sure 👍
Great project 🎉
Amazing stuff. Just finished your Electron video. Is there any reason you switched from using Jotai to zustand?
I think both are awesome state manager.
Here I decided to bring zustand since it's a little bit more simple to use (IMHO) and to highlight the differences between the two.
@@codewithgionatha Oh okay, I see. Thank you again for the great content.
Zustand is the cool new thing grandpa.
@@rusurveillancetaskforce Jotai came out in June 2022 and Zustand in April 2019 and i'm 17
Would be nice to have a tutorial on how to make this app with a local library
Thanks for sharing!
How did you get that terminal in VScode with the autocomplete feature and themes?
Well the VSCode terminal is using zsh which has plugins for themes and autosuggestions (github.com/zsh-users/zsh-autosuggestions)
🙏🙏🙏🙏🙏🙏🙏🙏i've been waiting a tutorial like this ,for so long.
Great job. This is lovely.
"Unchaught Error'
cannot read property 'CAPABILITY_PLAY' of null
Can you help me please kindly
i had this same error havent solved it yet
We need the same one but for video. ❤
Hey friend, I wanted to see how to minimize the control bar to play and pause in the background
Im working on a PC and using Expo Go on an iphone. I followed your tutorial all the way to where you are installing xcode with the simulator. I'm a little confused, are you saying this project cannot be done on Windows? I didn't see that anywhere before I started working on it so wanted to check. When i run npx expo start it generates a QR code which i was successfully able to open on the iPhone with Expo Go, but I can't use this setup? Thanks in advance.
Great video man, but I think there is an error that with expo router I also facing that is try to navigate from notification controller to the app, just give an unmatched route. Is there a way to achieve this?
Please make more React Native Projects
Hello, sir I'm creating a online music player app , but I'm facing a issue that I'm not able to play music in background/while app was minimized and while screen of . How do I do I please help me it is my college project.
Take a look here: rntp.dev/docs/basics/background-mode
Which database and backend did we use in this project?
Hi what step did I miss, I tried pressing Yarn create expo -t and the command was not recognized in either my VSC or my CMD. Any tips?
The alternative is "npx create-expo-app --template"
Btw take a look at Expo installation requirements here: docs.expo.dev/get-started/installation/
@@codewithgionatha thank you so much, it took some trial and error but eventually I figured out how to get it solved. It was a combo of not having nodejs installed, not having yarn installed, and running the Visual Studio Code 'yarn create expo -t' command in powershell instead of command prompt
Hello! Awesome working example! Is it possible for you to polish up the Android version of the App? I ran it with EAS as a development build and it works great, but some elements need formatting on the Android side of the App. Thanks!
I can't find the .vscode folder, hence can't open it
Hi, thanks for you tutorial, I am watching the `setUpTrackPLayer` part, and I see the function `useSetupTrackPlayer` using variable `isInitialized` which is redundant because I dont see it is used to check in elsewhere . Would you help share more on this one
```
export function useSetupTrackPlayer({ onLoad }: { onLoad?: () => void }) {
const isInitialized = useRef(false)
.....
```
Great job! Thanks
Can I download an app already made? I just need a better music app, not looking to make one.
The amount of configurations for mobile development scares me
Thanks!
Wow! Thanks so much 🙏
what vs code theme is that ? looks clean.. keep up the good work , amazing content
Thanks, theme is noir cobalt
Hey can you do a video about creating a design system with RN
Nice tutorial bro,,,,,,,,,,,,, just 1 suggestion - You could have used native-wind Ui library for styling
its better he didnt so he lets people choose whatever library they want to use
hello! Good tutorial, I have a problem that I haven't solved for weeks with this library, do you have any idea what it could be? I have found very little information and only from the community, not from its own documentation (react native track player), I am getting this:
cannot read property 'CAPABILITY_PLAY' of null
It seems to be an issue with Expo.
In case you're using Expo, I suggest you to upgrade it to Expo SDK 50+ and also update react native track player to its latest version.
Hello, I have the same problem when running it on android emulator. Did you manage to fix it? If so, could you please help me?
@@loch1n hi bro, I have not yet implemented the solution that Gionatha has described in this thread, but it makes sense to try maybe, as he says, it is a version problem. Let’s try and stay informed.
@@alanvargas9994 @loch1n If you're interested I set up a dedicated channel for this project on my Discord server. We can stay in touch there 😄
Great Job @gionatha The next app books app ?
Hello I'm having trouble following the instructions and I don't know how to fix it. I follow allow just like instruction and I am stucked at npx expo run:ios. The cocoapod installation keeps failing. Is it because I am on Mac? Due to that, building process always fail.
Discord: discord.com/invite/mN8WD6M4dR
Sir what is the extension that highlighted potential errors in real time?
It’s a Vscode extension, it’s called error lens
@@codewithgionatha Thank you! 🙏
can you tell me the name of the virtual machine creation app
It’s an iOS simulator. It gets bundled together with Xcode.
Hey bro! I'm getting the error 'capability_play of null' when I import the TrackPlayer package.
Seem a known issue, take a look here: github.com/doublesymmetry/react-native-track-player/issues/2227
great tutorial 💯
Mind blowing🤯🤯🤯
Is this script ready to be uploaded to the Apple Store and Google Store or does it need programming?
It's not. In case you're interested in distributing the app take a look here: docs.expo.dev/distribution/introduction/
after page refresh disappears favorites song help me please sir
You might be keeping the state local which might be causing the flushing of state, try making favorite global so that you can see after refresh
@@humbler144 can you help me
@@humbler144 can you help me please
Nice one! 🔥
Hey, i want to create the app using react native cli not expo, how should I go about this
Take a look here: reactnative.dev/docs/getting-started-without-a-framework
Can i play this app in background? Even if i leave the app ?
Yes, it should keep playing even if you leave the app (at least on IOS).
Btw you can find more info regarding background mode here: rntp.dev/docs/basics/background-mode
Can you suggest me for what is perquisites to understand this tutorial logically
Html css js. Basic functional programming. Ternary operators those types of things.
thanks dude
Your voice is like Code with Antonio 😅
Can't able to run on Android
Wow Awesome ❤❤❤
What about it working in an android not only the iphone
Is it only for IOS alone
This is a very good project but having authentication and other functionality like admin panel will be great
I'll try to bring authentication in a future project 😃
Does in work on Android ?
do you use database
I tried building this on Android and it ran into some issues with the build. The same build works on iOS. Any idea which packages might be causing the issue?
Hi, unfortunately, I focus the development of this project around IOS devices. Maybe we can check together on Discord, to see what the issue might be :)
any Luck ?
did it work on android?
Is in this music will play in background
Yup, thanks to RNTP
19:31 Is that the XCode emulator?
Correct 👍
@@codewithgionatha Is there any alternatives since I'm macOS 10.15 and don't have an apple development account so I can't access old versions of XCode? :/
more react-native on your content pls.. rn nextjs becomes alot and numerous.. but not with react-native cheers
Bro Waiting for food delivery app
How to i choose android
How to embed ads in a song
Bro upload more react native Content.
I'll keep this in mind 😄
will it work in android ?
Great Project
Hi, thanks 🙏
I heard some people tried to run it on Android but they encountered some issue along the way 😕
did you finished the project?? did it work on android?
@@nehalpradhan2229 no I started the project On Windows, But It gave Error Which were giving me headache, So i just deleted the project and Never Started Again
what API do you use for the music ?
The service that I used for storing the songs used throughout the video is called audio JukeHost.
Hey is this beginner friendly?
Hey 👋It requires a little bit of knowledge of React and React Native.
Is there any player that supports m2t files!!!!!
support android or no bro ?
I didn't try.
You can try to run on an android simulator by running: 'npx expo:run android' (however you'd need Android Studio installed on your system)
did it work on android?
Great ❤❤
eslint is depreciated. nice. im cooked.
Please make ecommerce
If you farming views then focus on SaaS projects.
Before I commit to watching this, can you do everything he does and follow along using Metro instead? I have a raging hate for expo.
I mean YES that's the point of EXPO it PROVIDES THIS THAT YADDA YADDA what if I want it the harder way, what if I want to setup my own router, or learn how to use a bare filesystem, abstract it away etc.?
It's like ok don't reinvent the wheel, but this isn't C, this is abstraction layers upon abstraction layers of many technologies, for learning purposes don't use expo Jesus is this so hard.
Code With Antonio don't lie to us please
Missing tests