React-native-track-player: _reactNativeTrackPlayer.usePlaybackState is undefined

[taylorpringle]

Configuration

react: 16.8.6 => 16.8.6 
react-native: 0.60.4 => 0.60.4

Issue

Issue on iOS.

_reactNativeTrackPlayer.usePlaybackState is undefined. Same issue happens with useTrackPlayerEvents.

I can get the audio playing but cant access the state or events of the player.

Code

Trying to run the example code given.

[Guichaguri]

Which version are you using?

[xgustavoh]

@Guichaguri in index.d.ts is not defined.

// React Hooks
export function usePlaybackState(): State;
export function useTrackPlayerEvents(events: Array<string>, handler: (payload: any) => void): void;
export function useTrackPlayerProgress(interval?: number): ProgressComponentState;

and:

export const STATE_CONNECTING: State;

Look: https://github.com/xgustavoh/react-native-track-player/commit/ddea8cf7a22dc6ba70306c5a76a5443a36e6879a

[sebastianwd]

Try to import like this

import {
  useTrackPlayerEvents,
  usePlaybackState,
  TrackPlayerEvents,
  STATE_PLAYING,
} from 'react-native-track-player/index';

Though it's still very inconsistent for me for some reason, sometimes hooks are undefined and sometimes they don't

[gavrichards]

I couldn't get useTrackPlayerEvents to work, it was saying "undefined is not a function".
The solution I stumbled on was to change the import, from:

import {useTrackPlayerEvents} from 'react-native-track-player';

to:

import {useTrackPlayerEvents} from 'react-native-track-player/lib/hooks';

[RenanEvangelista]

@gavrichards trank you <3

[richblend]

I'm also seeing imports failing for useTrackPlayerEvents on RN 61.2.

I have to import directly from the hooks file, which seems a little dirty:

import { useTrackPlayerEvents } from 'react-native-track-player/lib/hooks'

[shiroze]

I'm also seeing imports failing for useTrackPlayerEvents on RN 61.2.

I have to import directly from the hooks file, which seems a little dirty:

import { useTrackPlayerEvents } from 'react-native-track-player/lib/hooks'

its works on other react native version too.

[mmrk09]

This one I think worked for me @sebastianwd

But I get errors running the example still, it now says:
TypeError: (0, _index.usePlaybackState) is not a function.

at: MusicPage
(at SceneView.js:9)

Looks like a great library but using it seems like a big struggle, possibly very unstable? I'm trying to load it in a navigation drawer style app so that could be the issue but this problem still seems like the one I had before.

[pollyolly]

mmrk09

I also experience the same issue. I already tried the above solutions.

System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 931.39 MB / 7.70 GB
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
Android SDK:
API Levels: 23, 28
Build Tools: 28.0.3
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

[mmrk09]

@pollyolly check GITTR support I pasted my findings there too, not much traffic help wise there though but this is what worked for me on your versions.

import TrackPlayer, {
useTrackPlayerEvents,
usePlaybackState,
TrackPlayerEvents,
STATE_PLAYING,
} from 'react-native-track-player/index'

Then there's places in the demo where a class references these events/state functions defined in the index file like:

state = usePlaybackState() <-- will come back as undefined error

Needs to be changed to

state = TrackPlayer.usePlaybackState() <-- will fix the error

Then those errors go away, it can properly import and find the function to execute. If you are still having issues switch to the dev branch and latest build by following this on their site

https://react-native-kit.github.io/react-native-track-player/install/
Unstable
If you want to try the latest features, you can install the module directly from GitHub using:

npm install --save react-native-kit/react-native-track-player#dev
yarn add react-native-kit/react-native-track-player#dev

Which has the latest setup and made sure the above instructions worked hopefully they work on the stable branch too but our app is in dev right now so I was more concerned about getting things running and evaluating.

The demo is running for me in our app and works so it was nice to be able to preview it but were on android, haven't tested ios yet.

[mortezacruise]

refactor all imports like "import TrackPalyer ,{usePlaybackState ,...}" and import like belew:
import TrackPlayer from "..."
and
use "TrackPlayer.usePlaybackState();"
it is all .

[pollyolly]

@mmrk09

Currently, I'm using the 1.2.2 version and it works fine in RN .61 and latest android. I followed the sample app from other users of this plugin. Thanks.

[curiousdustin]

This fixes it for me on dev:
https://github.com/react-native-kit/react-native-track-player/commit/e705d86384f591e24e70bfdc8357ad57021158ed

Can now import like this:

import TrackPlayer, { usePlaybackState } from "react-native-track-player";

Does anyone have time to verify?

[sgerendasy]

@curiousdustin I can import like
import TrackPlayer, { usePlaybackState } from "react-native-track-player";

But the state is never getting updated. playbackState is always idle.
const playbackState = usePlaybackState();

[curiousdustin]

That is when you install the latest on dev branch?

[sgerendasy]

@curiousdustin yes, the latest dev branch. The playbackState updates just fine on Android. On iOS, however, it is always idle.

I put print statements inside function passed to the event listener in /lib/hooks.js. The function passed to the event listener is never called on iOS. But it does get called in Android.

[curiousdustin]

@sgerendasy, The example app on dev works for me on iOS. If I add logging where you said, I get the expected log output as the state changes. Also the change is reflected in the UI in the example app.

Can you try checking out dev again? It has been in a bit of flux the last few days.

[sgerendasy]

@curiousdustin Thanks for taking the time to look into this. The example app in dev branch works for me as well.

Turns out I had some faulty logic around when TrackPlayer.setupPlayer() gets called. It's working for my project now.

[lelukas]

So, is this supposed to be fixed? I'm running RN 0.63.3 and I still can't { useTrackPlayerEvent } from 'react-native-track-player'. I saw you commit @curiousdustin but this issue remains open.

[khanqasim]

This one I think worked for me @sebastianwd

But I get errors running the example still, it now says:
TypeError: (0, _index.usePlaybackState) is not a function.

at: MusicPage
(at SceneView.js:9)

Looks like a great library but using it seems like a big struggle, possibly very unstable? I'm trying to load it in a navigation drawer style app so that could be the issue but this problem still seems like the one I had before.

I am also facing the same issue
please help me

[khanqasim]

I am facing this issue in react-native-track-player please help me