Combining components in screen and debugging in react native

[@BoyOfTheFuture4987]

the hook usePlaybackState() is giving not working. this is what I get "Argument of type 'PlaybackState | { state: undefined; }' is not assignable to parameter of type 'State'.
Type '{ state: State.None | State.Ready | State.Playing | State.Paused | State.Stopped | State.Loading | State.Buffering | State.Ended; }' is not assignable to type 'State'."

[@BoyOfTheFuture4987]

well I could not find a fix for this, but I did a work around
previous
-----------------------------------------------------------------------------------------------------------
my toggle function
const togglePlayback = async (playback: State) => {
const currentTrack = await TrackPlayer.getActiveTrackIndex()
if (currentTrack !== null) {
if (playback === State.Paused || playback === State.Ready) {
await TrackPlayer.play()
} else {
await TrackPlayer.pause()
}
}
}
and my play and pause button
togglePlayback(playBackState)}>

Workaround
-----------------------------------------------------------------------------------------------------------
const togglePlayback = async (playback: string | undefined) => {
const togglePlayback = async (playback: State | undefined) => {
const currentTrack = await TrackPlayer.getActiveTrackIndex()
if (currentTrack !== null) {
if (playback === State.Paused || playback === State.Ready) {
await TrackPlayer.play()
} else {
await TrackPlayer.pause()
}
}
}
and my play and pause button
togglePlayback(playBackState.state)}>

But is this even right to do so.

[@vipulbhardwaj8659]

Same error please help me too if you found solution

[@visheshgupta4990]

@@vipulbhardwaj8659 I am also facing this same issue

[@visheshgupta4990]

@@BoyOfTheFuture4987 Thank you so much bro for helping out by giving a workaround solution it helps , now I want to help anyone is facing the same issue this is the solution:-




togglePlayback(playBackState?.state || State.None)}>

[@wowstatus3450]

Try this....import { Pressable, StyleSheet, View } from 'react-native';
import React from 'react';
import TrackPlayer, { State, usePlaybackState } from 'react-native-track-player';
import Icon from 'react-native-vector-icons/MaterialIcons';
const ControlCenter = () => {
const playBackState = usePlaybackState();
// next button
const skipToNext = async ()=>{
await TrackPlayer.skipToNext();
};
// next button
const skipToPrevious = async ()=>{
await TrackPlayer.skipToPrevious();
};
// play pause
const togglePlayback = async(playback: State)=>{
const curruntTrack = await TrackPlayer.getActiveTrackIndex();
if(curruntTrack !== null){
if(playback === State.Paused || playback === State.Ready){
await TrackPlayer.play();
}else{
await TrackPlayer.pause();
}
}
};
return (




togglePlayback(playBackState.state)}
>






);
};
export default ControlCenter;
const styles = StyleSheet.create({
container: {
marginBottom: 56,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
icon: {
color: '#FFFFFF',
},
playButton: {
marginHorizontal: 24,
},
});

[@solidauto8821]

Sir i want this app to read audio files from internal storage i have use react-native-fs but it showing only folder not showing any files from storage

[@SaidBourdia]

I really like this serie , thank you so much for the effort and the good work .
While trying to make this project work I failed badly on making the track info appear.
If anyone had the same problem and got it working I'll appreciate some help.
Thank you

[@anvaymayekar1891]

Sir it would be great if you'll append one project in this series where you'll elucidate some neumorphic elements and themes!

[@shivamparashar330]

Hi sir,
According to the recent documentation getCurrentTrack is deprecated. Do you have another apporach the play and pause of a track.

[@Aayushdhalwaal]

use getActiveTrackIndex

[@rahul_sidhha]

Thank you so much sir.
Biggest surprise 15 videos in a day

[@usmanbashir9414]

💢

[@DeepakSankhyan]

Bit Tough to digest but so happy to complete it thank you .....

[@Karthik-qh4vn]

when I run the Application it is showing "react-native-track-player:classpath" getting error I have installed all correctly but why it is showing, with this error I am able to install the app in emulator, it is not running

[@jackanderson300]

Thank you sir for such great playlist on react native😀.

[@MRWOLF-rd6tm]

mine player is not working fine it plays first song but whenever i click on next it throws an error of "Asset not found: "

[@maiharshithu]

check name and location allocation while import

[@vipulbhardwaj8659]

Hiii Can you please help me with an error in playback state? my player is not at all working with the same code in the video

[@vipulbhardwaj8659]

Hii can you please help me in this project , the code is not working with the same code in the video
@@maiharshithu

[@camperschool2191]

Why you left this series??😢
No update since last 2 weeks

[@HiteshCodeLab]

It takes time to record videos, along with job 🙂

[@camperschool2191]

@@HiteshCodeLab Why still a job?
Start something of your own.
BTW appreciate your knowledge sharing on YT, you're really helping middle class students 👍.

[@vaishakhgk2006]

How many videos did you posted today ?

[@oppomobile-ur4jd]

Sir please javascript series finish karado please 😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢

[@yuvraj1971]

kyu ro raha hai documentation padhna sikh lo time bhi bachega aur kisi jarrurat nahi hoga

[@HiteshCodeLab]

Very soon and don't worry when I was beginner, I was also looking for resource and didn't knew about learning from docs. No one in their early stage know how to learn directly from docs. Sometime people forget their early days. 🙂

[@omyerawar7976]

One suggestion sir : You can also use rafce instead of rfce to generate arrow function component :)

[@rakshithrsalian4147]

try: rnfe

[@Anonymous1700-m9d]

HelpFul

[@gaganvishwakarma6494]

React-Native-Track-Player has been changed so far. Most of the error are occuring due to this . I solved all error by reading documentation . If you need any help feel free to ask me . There are lots of changes which has to change in this project that's why i am making PR.

[@visheshgupta4990]

Hi, Your comment is like a hope for me , I build this project and after build playback - play pause functionality is not working but in development server app is working completely fine can you please help me with that

[@visheshgupta4990]

I also asked this question in hitesh sir discord server in general app dev section

[@gaganvishwakarma6494]

@@visheshgupta4990 Hell yeah , there are many changes which you have to do in ControlCentral.tsx file, so i am sharing the full code of it
==================================
import { View, Pressable } from 'react-native'
import TrackPlayer, { PlaybackState, State, usePlaybackState } from 'react-native-track-player'
import Icon from 'react-native-vector-icons/MaterialIcons'
const ControlCenter = (): JSX.Element => {
const playerState = usePlaybackState()
const skipToNext = async () => await TrackPlayer.skipToNext()
const skipToPrevious = async () => await TrackPlayer.skipToPrevious()
const togglePlayback = async (playback:PlaybackState) => {
const currentTrack = await TrackPlayer.getActiveTrack()
if (currentTrack !== null)
if (playback.state === State.Paused || playback.state === State.Ready) await TrackPlayer.play()
else await TrackPlayer.pause()
}
return



togglePlayback(playerState as PlaybackState)}>






}
I used Nativewind but you can replace all classname props with style , Home it will work .

[@jade_warrior]

Hi, how did you resolve the getTrack(event.nextTrack) issue?

[@BowlBoundaries]

@@jade_warrior I found the solution const MusicPlayer = () => {
const [track, setTrack] = useState()
useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
switch (event.type) {
case Event.PlaybackTrackChanged:
const playingTrack = await TrackPlayer.getTrack(event.nextTrack)
setTrack(playingTrack)
break;
}
})

[@9raian]

Genius