Notification controls are not working.

[cjassu]

Configuration

Run react-native info in your project and share the content. What react-native-track-player version are you using?

Issue

Player is working fine but the notification button is not firing any action.

Code

TrackPlayer.setupPlayer(); TrackPlayer.updateOptions({ stopWithApp: true, capabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE, TrackPlayer.CAPABILITY_STOP, TrackPlayer.CAPABILITY_SKIP_TO_NEXT, TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS ], compactCapabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE, TrackPlayer.CAPABILITY_STOP ] }); // this.togglePlayback(); }

[boypanjaitan16]

I experinced this issue too, can someone help ?

Here is my setup

"@react-native-community/async-storage": "^1.6.3", "date-fns": "^2.8.1", "react": "16.9.0", "react-native": "0.61.4", "react-native-cardview": "^2.0.5", "react-native-device-info": "^5.3.1", "react-native-elements": "^1.2.7", "react-native-gesture-handler": "^1.5.0", "react-native-material-dropdown": "^0.11.1", "react-native-modals": "^0.19.9", "react-native-raw-bottom-sheet": "^2.0.6", "react-native-segmented-control-tab": "^3.4.1", "react-native-simple-toast": "^1.0.0", "react-native-super-grid": "^3.1.1", "react-native-swift": "^1.2.2", "react-native-touchable-scale": "^2.1.0", "react-native-track-player": "^1.1.8", "react-native-tts": "^3.1.0", "react-native-vector-icons": "^6.6.0", "react-navigation": "^4.0.10", "react-navigation-stack": "^1.10.3", "react-navigation-tabs": "^2.6.0"

And here is my code ` setUpPlayer = async (tmpTrack) => { let state = await TrackPlayer.getState();

    if (state === TrackPlayer.STATE_NONE) {
        TrackPlayer.setupPlayer().then(() => {
            TrackPlayer.updateOptions({
                // One of RATING_HEART, RATING_THUMBS_UP_DOWN, RATING_3_STARS, RATING_4_STARS, RATING_5_STARS, RATING_PERCENTAGE
                ratingType: TrackPlayer.RATING_5_STARS,

                // Whether the player should stop running when the app is closed on Android
                stopWithApp: true,
                alwaysPauseOnInterruption: true,
                capabilities: [
                    TrackPlayer.CAPABILITY_PLAY,
                    TrackPlayer.CAPABILITY_PAUSE,
                    TrackPlayer.CAPABILITY_STOP,
                    TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
                    TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS
                ],

                // An array of capabilities that will show up when the notification is in the compact form on Android
                compactCapabilities: [
                    TrackPlayer.CAPABILITY_PLAY,
                    TrackPlayer.CAPABILITY_PAUSE,
                    TrackPlayer.CAPABILITY_STOP,
                    TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
                    TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS
                ],
                notificationCapabilities : [
                    TrackPlayer.CAPABILITY_PLAY,
                    TrackPlayer.CAPABILITY_PAUSE,
                    TrackPlayer.CAPABILITY_STOP,
                    TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
                    TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS
                ],
                icon    : require('../img/icon.png')
            });
        });
    }

    TrackPlayer.add(tmpTrack)
        .then(() => {
            if(state !== TrackPlayer.STATE_PLAYING){
                TrackPlayer.stop();
            }
        })
        .catch(err => {
            Alert.alert('Player Error', err.toString());
        });

    console.log('NOW : '+state);

};`

[R3DST0RM]

Were you able to solve the issue?

[jakovB777]

I was having the same issue but for some weird reason I needed to rebuilt the code:

Try commenting/deleting the notificationCapabilities and compactCapabilities and then npm start android/ios. Then i had it working (partly, but yeah) It works with this code:

TrackPlayer.setupPlayer().then(() => {
    TrackPlayer.updateOptions({
        alwaysPauseOnInterruption: true,
        waitForBuffer: true,
        stopWithApp: true,
        capabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE,
            TrackPlayer.CAPABILITY_SEEK_TO,
            TrackPlayer.CAPABILITY_JUMP_FORWARD,
            TrackPlayer.CAPABILITY_JUMP_BACKWARD,
        ],
        // compactCapabilities: [
        //  TrackPlayer.CAPABPLILITY_PLAY,
        //  TrackPlayer.CAPABILITY_PAUSE,
        //  TrackPlayer.CAPABILITY_SEEK_TO,
        //  TrackPlayer.CAPABILITY_JUMP_FORWARD,
        //  TrackPlayer.CAPABILITY_JUMP_BACKWARD,
        // ],
        // notificationCapabilities: [
        //  TrackPlayer.CAPABPLILITY_PLAY,
        //  TrackPlayer.CAPABILITY_PAUSE,
        //  TrackPlayer.CAPABILITY_SEEK_TO,
        //  TrackPlayer.CAPABILITY_JUMP_FORWARD,
        //  TrackPlayer.CAPABILITY_JUMP_BACKWARD,
        // ],
    });
});

[R3DST0RM]

@jakovB777 thanks for sharing your insights. After trying different things out, I've managed to get things running using version 1.1.2 of react-native-track-player

[Guichaguri]

Can you please specify what is not working? Are they not showing up? Is pressing them not triggering any events?

[zacharywenner]

I'm having this issue on V2 as well. I only want to show play/pause, seek forward 15, and seek backward 15.

On v2.0.0-rc13 notification controls show play/pause, skip forward, skip backwards but none work.

I rolled back to v2.0.0-rc12 and now the controls work until another track is added to the queue. Then it goes back to play/pause, skip forward, skip backward.

First Track

Another track added to queue and playing in the app

"react": "16.12.0",
"react-native": "0.61.5",
"react-native-track-player": "2.0.0-rc12",

[zacharywenner]

I rolled back to 1.1.8, and similar issues. The play/pause, skip forward, skip backward show up, however only the play/pause work.

"react": "16.12.0",
"react-native": "0.61.5",
"react-native-track-player": "1.1.8",

module.exports = async function() {
  TrackPlayer.addEventListener('remote-play', () => {
    TrackPlayer.play();
  });

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

  TrackPlayer.addEventListener('remote-jump-forward', () => {
    jumpPlayback(15, true); // seek forward 15 seconds
  });

  TrackPlayer.addEventListener('remote-jump-backward', () => {
    jumpPlayback(15); // seek backward 15 seconds
  });
};

export async function setupAudio() {
  TrackPlayer.setupPlayer({
    waitForBuffer: true
  }).then(async () => {
    TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_JUMP_FORWARD,
        TrackPlayer.CAPABILITY_JUMP_BACKWARD,
        TrackPlayer.CAPABILITY_STOP,
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ],
      jumpInterval: 15
    });
  });
}

Controls show up incorrectly. Play/pause works however.

[feedcast-me]

same issue here

[muganwas]

I'm using "react-native-track-player": "^1.1.7" and I have the same problem, non of my notification buttons work.

[alanhabib]

@Guichaguri

I have exactly the same issue, for me the jump-forward and backward button appears at first track when getting out from the component and setup new player the buttons disappears and are replaced with "<<" ">>" or it is only one of them appearing.

tried upgrading between versions but no success.

Version: 1.1.8 "react": "^16.9.0", "react-native": "0.61.5",

SERVICE.JS:

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

module.exports = async () => {

await TrackPlayer.addEventListener("remote-jump-forward",  async (event) => {
    let position = await TrackPlayer.getPosition();
    let newPosition = position + event.interval;
    await TrackPlayer.seekTo(newPosition);
});

await TrackPlayer.addEventListener("remote-jump-backward",  async (event) => {
    let position = await TrackPlayer.getPosition();
    let newPosition = position > 9 ? position - event.interval : 0;
    await TrackPlayer.seekTo(newPosition);
});

await TrackPlayer.addEventListener('remote-seek', async (event) => {
    await TrackPlayer.seekTo(event.position);
});

TrackPlayer.addEventListener("remote-play",  (event) => {
    TrackPlayer.play();
});

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

TrackPlayer.addEventListener("remote-stop", () => {
    TrackPlayer.destroy();
});

};

TRACKPLAYER.IOS.JS function where I updateOptions:

upDateOptionsHandler = async () => { await TrackPlayer.updateOptions({ jumpInterval: 10, capabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE, TrackPlayer.CAPABILITY_STOP, TrackPlayer.CAPABILITY_SEEK_TO, TrackPlayer.CAPABILITY_JUMP_FORWARD, TrackPlayer.CAPABILITY_JUMP_BACKWARD ], compactCapabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE, TrackPlayer.CAPABILITY_STOP, TrackPlayer.CAPABILITY_JUMP_FORWARD, TrackPlayer.CAPABILITY_JUMP_BACKWARD ], notificationCapabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE, TrackPlayer.CAPABILITY_STOP, TrackPlayer.CAPABILITY_JUMP_FORWARD, TrackPlayer.CAPABILITY_JUMP_BACKWARD ] }); };

[alanhabib]

@Guichaguri @dcvz what do you think of below? It works perfectly now, remote-controls always shows up... Before, as I wrote above, 2 buttons showed up and the last ones could disappear. I changed my above code to this:

upDateOptionsHandler = async () => { await TrackPlayer.updateOptions({ jumpInterval: 10, capabilities: [ await TrackPlayer.CAPABILITY_JUMP_FORWARD, await TrackPlayer.CAPABILITY_JUMP_BACKWARD, await TrackPlayer.CAPABILITY_SEEK_TO, await TrackPlayer.CAPABILITY_PLAY, await TrackPlayer.CAPABILITY_PAUSE, await TrackPlayer.CAPABILITY_STOP ] }); };

[oscarchs]

for me, notification controls crash the app with no errors logged, so i think the addEventListener is not working properly.

[ainar]

I confirm that notification controls are not working on Android (10). I made a test app with only a music playing with react-native-track-player and the notifications buttons are not working.

However, controls are working on lock screen and music correctly pauses when removing headphone jack. It looks like notification buttons do not trigger events.

[ainar]

Bump again: I found that notifications button work correctly on Android 7.

[ainar]

So, I found how to fix this problem in my case: in /android/build.gradle, change compileSdkVersion and targetSdkVersion to 29. May be related to #859.

EDIT: So it was actually not related to version but to the reloading of app... Not stopping (even pausing) music before reloading seems to break notifications buttons. May happen only during development (y).

[curiousdustin]

https://github.com/react-native-kit/react-native-track-player/commit/d3400a475d8be146aa25696b5f014dd538e2dd86 should resolve the iOS issues mentioned here. Will get this into v2 soon.

[MuhammadAbdullah54321]

Can you please specify what is not working? Are they not showing up? Is pressing them not triggering any events?

They are showing up but are not responding to any events.

[MuhammadAbdullah54321]

I rolled back to 1.1.8, and similar issues. The play/pause, skip forward, skip backward show up, however only the play/pause work.

"react": "16.12.0",
"react-native": "0.61.5",
"react-native-track-player": "1.1.8",

module.exports = async function() {
  TrackPlayer.addEventListener('remote-play', () => {
    TrackPlayer.play();
  });

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

  TrackPlayer.addEventListener('remote-jump-forward', () => {
    jumpPlayback(15, true); // seek forward 15 seconds
  });

  TrackPlayer.addEventListener('remote-jump-backward', () => {
    jumpPlayback(15); // seek backward 15 seconds
  });
};

export async function setupAudio() {
  TrackPlayer.setupPlayer({
    waitForBuffer: true
  }).then(async () => {
    TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_JUMP_FORWARD,
        TrackPlayer.CAPABILITY_JUMP_BACKWARD,
        TrackPlayer.CAPABILITY_STOP,
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ],
      jumpInterval: 15
    });
  });
}

Controls show up incorrectly. Play/pause works however.

Probably because you only have included these 2 options of pause and play in compactCapabilities here:

compactCapabilities: [ TrackPlayer.CAPABILITY_PLAY, TrackPlayer.CAPABILITY_PAUSE ],

[aliraza96]

I have tried all the options above, but I am still not able to control play/pause from Lock Screen/Notification Bar etc. I am using

"react-native-track-player": "^2.1.3",