React-native-track-player: notification controls are not showing up in IOS (android works)

Created on 12 May 2020  路  6Comments  路  Source: react-native-kit/react-native-track-player

Describe the bug
A clear and concise description of what the bug is.
notification controls are not showing up in IOS (android works)
To Reproduce
Steps to reproduce the behavior:

Environment (please complete the following information):
Run react-native info in your project and share the content.
OS: macOS 10.15.2
CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Memory: 911.78 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 26, 27, 28, 29
Build Tools: 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: ~0.61.5 => 0.61.5
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native: 0.61.5

What react-native-track-player version are you using?
react-native-track-player": "^1.2.3
Are you testing on a real device or in the simulator? Which OS version are you running?

Code
Please, share the code that is causing the issue

useEffect(() => {
    `setup();`
  }, []);

  async function setup() {
    await TrackPlayer.setupPlayer({}).then(async () => {
      TrackPlayer.addEventListener("remote-play", () => {
        TrackPlayer.play();
      });

      TrackPlayer.addEventListener("remote-pause", () => {
        console.log("clickklik");
        TrackPlayer.pause();
      });
      TrackPlayer.addEventListener("remote-stop", () => {
        console.log("clickklik");
        TrackPlayer.destroy();
      });
      await TrackPlayer.updateOptions({
        stopWithApp: false,
        capabilities: [
          TrackPlayer.CAPABILITY_PLAY,
          TrackPlayer.CAPABILITY_PAUSE,
          // TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
          // TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
          TrackPlayer.CAPABILITY_STOP,
        ],
        compactCapabilities: [
          TrackPlayer.CAPABILITY_PLAY,
          TrackPlayer.CAPABILITY_PAUSE,
        ],
        notificationCapabilities: [
          TrackPlayer.CAPABILITY_PLAY,
          TrackPlayer.CAPABILITY_PAUSE,
          TrackPlayer.CAPABILITY_SEEK_TO,
        ],
      });
    });
  }

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      // await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: "url",
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://i.picsum.photos/id/500/200/200.jpg",
      });
      await TrackPlayer.play().then(async () => {
        setPaused(false);
      });
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play().then(async () => {
        });
      } else {
        await TrackPlayer.pause().then(async () => {
        });
      }
    }
  }

Bug Needs Confirmation

Most helpful comment

https://github.com/react-native-kit/react-native-track-player/blob/dev/docs/Background-Mode.md#ios-simulator

As of iOS Simulator version 11, Apple has removed support for Control Center and Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

We have recently updated the docs on this. This Updated note has not made it onto the hosted documentation yet.

All 6 comments

Simulator or real device?

@curiousdustin on Simulator..

The notification will not show in a iOS simulator only on a real device.

oh @Tucker2015 are you sure na..

https://github.com/react-native-kit/react-native-track-player/blob/dev/docs/Background-Mode.md#ios-simulator

As of iOS Simulator version 11, Apple has removed support for Control Center and Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

We have recently updated the docs on this. This Updated note has not made it onto the hosted documentation yet.

@curiousdustin thank you..

Was this page helpful?
0 / 5 - 0 ratings