WARN No task registered for key TrackPlayer

Question

I am using the react-native-track-player (2.1.3) to implement an audio player in a react-native application. When I initialize the track player in my project I get the following warning message.

WARN No task registered for key TrackPlayer

I followed one of the solutions found in a similar closed GitHub issue, but it is opened a very long time ago. Anyhow it did not work, also.

Following is the solution found in GitHub: (Add the following code to index.js (the entry file of the app))

import TrackPlayer from 'react-native-track-player';

TrackPlayer.setupPlayer({}).then(async () => {
})

If somebody is using react-native-track-player and solve this issue, can you please provide an answer?

Answer 1

Hi I am also using track player in my project. my solution is add service in index.js file you can try this one

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import TrackPlayer from 'react-native-track-player';


AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => require('./service.js'));

and I have created service.js file inside my root folder

import TrackPlayer from 'react-native-track-player';


module.exports = async function () {

  try {
    TrackPlayer.addEventListener('remote-play', () => {
      TrackPlayer.play()
    })

    TrackPlayer.addEventListener('remote-pause', () => {
      TrackPlayer.pause()
    });

    TrackPlayer.addEventListener('remote-next', () => {
      TrackPlayer.skipToNext()
    });

    TrackPlayer.addEventListener('remote-previous', () => {
      TrackPlayer.skipToPrevious()
    });

    TrackPlayer.addEventListener('remote-stop', () => {
      TrackPlayer.destroy()
    });
  } catch (error) { }

};

Answer 2

1. I was following along with this tutorial from Youtube Mobile App - Make Your Own Music Player
2. And this link from react native docs: React Native Track Player
3. Then rather than importing the file into index.js, I just create a function inside index.js file. This is the documentations link: Playback Service docs page

This was enough me. I hope that helps!

import App from './App';
import {name as appName} from './app.json';

import TrackPlayer from 'react-native-track-player';

export const onRegisterPlayback = async() => {
    
     TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play());

    TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause());

    TrackPlayer.addEventListener('remote-stop', () => TrackPlayer.destroy())
}

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => onRegisterPlayback) 

Answer 3

In my case, the mistake was that I had put the bootstrap in /src/index.ts

(WRONG)

AppRegistry.registerRunnable(appName, async initialProps => {...})
TrackPlayer.registerPlaybackService(() => tpService);

but this bootstrap needed to be in /index.js

(RIGHT)

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => tpService);

Answer 4

As shown in the Image. Add Service.js file in the Root Folder

And Copy and Paste the following code below.

import TrackPlayer from 'react-native-track-player';


module.exports = async function () {

try {
TrackPlayer.addEventListener('remote-play', () => {
  TrackPlayer.play()
})

TrackPlayer.addEventListener('remote-pause', () => {
  TrackPlayer.pause()
});

TrackPlayer.addEventListener('remote-next', () => {
  TrackPlayer.skipToNext()
});

TrackPlayer.addEventListener('remote-previous', () => 
{
  TrackPlayer.skipToPrevious()
});

TrackPlayer.addEventListener('remote-stop', () => {
  TrackPlayer.destroy()
});
 } catch (error) { }

};