Problem using react-native-track-player with a custom dev client

How to / Third Party Tooling
,
1

I’ve carefully followed the documentation for react-native-track player:

  1. Install it with yarn
  2. Add “audio” to my UIBackgroundModes list in app.json (it works)
  3. Run eas build to install it to my dev client.
  4. In my App.tsx, register a background service as shown in the docs.

The problem seems to be with #4. Audio has no problem continuing to play in the background (screen locked and everything), but the background service doesn’t receive any of the remote- events (play, pause, etc).

I also tried putting remote listeners inside a React component and that didnt work either. This may be a clue. The non-remote events work fine.

There’s another thing in the docs that might be a hint. In the playback service section, it shows:

// This needs to go right after you register the main component of your app
// AppRegistry.registerComponent(...)
TrackPlayer.registerPlaybackService(() => require('./service'));

Since expo handles app registry automatically, there may be some issue with the timing of registration. I tried but couldn’t figure out how to use expo’s registerRootComponent to manually register it.

edit Got registerRootComponent working, and made sure to register the playback service immediately after – didnt help :frowning:

2

Solved!!!

Spent a very long time trying everything to get this to work – including ejecting.

Turns out I just didn’t have track-player properly configured. (Thanks to this comment for providing the right config)

In your App.tsx,

// outside of react component
async function setup() {
  await TrackPlayer.setupPlayer({})
  await TrackPlayer.updateOptions({
    stopWithApp: true,
    capabilities: [
      Capability.Play,
      Capability.Pause,
      Capability.SkipToNext,
      Capability.SkipToPrevious,
      Capability.Stop,
      Capability.SeekTo,
    ],
    compactCapabilities: [Capability.Play, Capability.Pause],
  })
}

// inside my App.tsx component
useEffect(() => {
    setup()
    return () => TrackPlayer.destroy()
  }, [])

I don’t know if this was necessary, but I also defined a custom root for the app.

app.json

"expo": {
    ...
    entryPoint: "./index.js"
}

package.json

"main": "./index.js"

index.js

import { registerRootComponent } from "expo"
import App from "./App"
import TrackPlayer from "react-native-track-player"

registerRootComponent(App)
TrackPlayer.registerPlaybackService(() => require("./service.js"))

finally, I also added “processing” to UIBackgroundModes in my app.json, but I’m pretty sure that’s not necessary.

1 Like
3

hey @pastel I tried following your configs but I keep getting the same error

TypeError: null is not an object (evaluating ‘TrackPlayer.RATING_HEART’)

Invariant Violation: “main” has not been registered. This can happen if:
*** Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.**
*** A module failed to load due to an error and AppRegistry.registerComponent wasn’t called.**

I deployed using expo-dev-client

Would you know what could be the problem?

1 Like
4

It looks like TrackPlayer wasn’t installed properly. I’m using Expo v42 with a managed workflow – not sure if that makes a difference in your case. Are you sure that you installed it, as in yarn install react-native-track-player?

Assuming you did, the first thing I’d try is deleting node_modules then running yarn install again. There’s nothing special I did when I installed it.

5

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.