React-native-track-player: Buttons in notification center not responding in iOS 13.3.1

[RiccardoNL]

Configuration

Run react-native info in your project and share the content.

info Fetching system and libraries information...
System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 1.73 GB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.4.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 27, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-24 | Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-orientation: 3.1.3
react-native-video-controls: 2.2.3
react-native: 0.61.5

What react-native-track-player version are you using?
├── [email protected]

Issue

Code

I changed some stuff in order to keep the project I am working on anonymously.

`import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight, Linking, Dimensions } from 'react-native';
// import SoundPlayer from 'react-native-sound-player'
import { Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
// import Video from 'react-native-video';
import TrackPlayer, { usePlaybackState, State, Capability, TrackType } from 'react-native-track-player';

console.disableYellowBox = true;
Icon.loadFont();

export default class Home extends React.Component {

constructor(props) {
super(props);
this.PlayClick = this.PlayClick.bind(this);
this.PauseClick = this.PauseClick.bind(this);
this.InitTrackPlayer = this.InitTrackPlayer.bind(this);
this.onPause = this.onPause.bind(this);
this.state = { ItemInfo : "", DoesPlay: true};
}

async InitTrackPlayer() {

    this.setState({paused: false});
   const { navigation } = this.props;
const streamID = navigation.getParam('streamID', 'NO-ID');

  fetch(`https://domain.domain.tld/${streamID}`, {
      method: "POST",
})
  .then(response => response.json())
  .then(responseJson => {
    this.setState({
      streamName: responseJson.streamName,
      desc: responseJson.desc,
      mountpoint: responseJson.mountpoint,
    });


  });


let streamIDm = streamID
let mountpoint = streamIDm
let mediaserver = 'http://domain.domain.tld/'
let url = mediaserver + mountpoint


TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add({
    id: 'trackId',
    url: url,
    artist: '',
    title: '',
    artwork: '',
});

await TrackPlayer.updateOptions({
stopWithApp: false,
//waitForBuffer: true,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_STOP,
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
],
});

});

this.trackupdate();

}

PlayClick() {
this.setState({DoesPlay: true});
// this.setState({paused: false});
TrackPlayer.play();
}

PauseClick() {
this.setState({DoesPlay: false});
this.InitTrackPlayer();
TrackPlayer.stop();
TrackPlayer.destroy();
}

updatenp() {
const { navigation } = this.props;
const streamID = navigation.getParam('streamID', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');
fetch(https://domain.domain.tkd/${streamID}, {
method: "POST",
})
.then(response => response.json())
.then(responseJson => {
this.setState({
streamName: responseJson.streamName,
desc: responseJson.desc,
mountpoint: responseJson.mountpoint,
});

   this.trackupdate();
  });

}

async trackupdate() {
const trackId = await TrackPlayer.getCurrentTrack();
TrackPlayer.updateMetadataForTrack(trackId, {
title: this.state.desc,
artist: this.state.streamName,
artwork: "https://domain.domain.tld/logo.png",
});
}

onPlay() {
this.setState({paused: false});
const { navigation } = this.props;
const streamID = navigation.getParam('streamID', 'NO-ID');

  fetch(`https://domain.domain.tld/${streamID}`, {
      method: "POST",
})
  .then(response => response.json())
  .then(responseJson => {
    this.setState({
      streamName: responseJson.streamName,
      desc: responseJson.desc,
      mountpoint: responseJson.mountpoint,
    });


  });


let streamIDm = streamID
let mountpoint = streamIDm
let mediaserver = 'http://domain.domain.tld/'
let url = mediaserver + mountpoint
TrackPlayer.play();

}

onPause() {
// this.setState({paused: true});
TrackPlayer.stop();
TrackPlayer.destroy();
}

componentDidMount() {
this.onPlay();

  this.InitTrackPlayer();
  this.updatenp();

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

console.log('click');
});

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

console.log('clickklik');
});

}

(......)
`

Any suggestions?

[Saehanseul]

2.0.0-rc13 has big
1.1.8 work fine

[curiousdustin]

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

[chrismang]

I have the same problem, in iOS 13 and in Android 10