React-native-track-player: iOS: Background Playing not working / Audio ends by suspending app or switch off screen

[stephanmae]

Describe the bug
I have set up the module within my project like described below. I am using XCode and iOS13 iPhone X as device for a test. I start playing the audio, as soon as I switch off the screen or put the app in the background, audio stops (fades out). The remote controls are indeed shown in the lock screen, but have no effect.

This appears in the console of xcode:

2020-05-28 10:23:37.081193+0200 appnew[2948:71840] [avas] AVAudioSession.mm:997:-[AVAudioSession setActive:withOptions:error:]: Deactivating an audio session that has running I/O. All I/O should be stopped or paused prior to deactivating the audio session.
2020-05-28 10:23:39.600749+0200 appnew[2948:71840] Can't end BackgroundTask: no background task exists with identifier 94 (0x5e), or it may have already been ended. Break in UIApplicationEndBackgroundTaskError() to debug.

To Reproduce
Steps to reproduce the behavior:

Environment (please complete the following information):
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 44.62 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
IDEs:
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
npmPackages:
@react-native-community/cli: ^4.9.0 => 4.9.0
react: ~16.9.0 => 16.9.0
react-native: ~0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

What react-native-track-player version are you using? v1.2.3
Are you testing on a real device or in the simulator? Which OS version are you running? iOS13, real Device with Run on in XCode

Code
Setup player is currently called in componentDidMount:

// Set up the player
TrackPlayer.setupPlayer({
minBuffer: 3,
waitForBuffer: true,
stopWithApp: false,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_STOP
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_STOP
]
}).then(() => {
TrackPlayer.registerPlaybackService(() => require('../service'));

  TrackPlayer.add({
    id: 'test123',
    url: require('../assets/Beethoven_12_Variation.mp3'),
    title: 'Test',
    artist: 'Test',
  });
});

Previously I had registered the service in the index.js with same results.
service.js (in the root folder) contains:
/**

• This is the code that will run tied to the player.
  *
• The code here might keep running in the background.
  *
• You should put everything here that should be tied to the playback but not the UI
• such as processing media buttons or analytics
  */

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

module.exports = async function() {

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

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

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

});

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

});

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

};

[curiousdustin]

Have you set the background mode in Xcode?

https://react-native-track-player.js.org/background/#ios

[stephanmae]

Of course, sorry, that I have not mentioned it:
I have checked Audio, AirPlay and Picture in Picture as well as Background fetch in XCode.
Any other ideas? Am happy for every hint.

[curiousdustin]

Nothing else in your description is sticking out to me other than how you are doing registerPlaybackService. But you said the normal way fails as well.

I would suggest testing the example included in this repo, and if that works, compare your implementation to that.

[stephanmae]

The plugin works like a charm with your example; but in our code not. Ours is an ejected expo app, where expo is present in the package.json
Could this be the problem?

[stephanmae]

Okay, got it. expo-av is blocking all the media outside of the app. Removing it helped me with a working version of this module.

[andrekovac]

I ran into the same issue. I still want to use expo-av to a) set the setting to allow playing audio in silent mode and b) play video (because react-native-video seems to cause some issues with this module.

@stephanmae If you still want to use expo-av alongside this module, you can set the staysActiveInBackground option to true:

await Audio.setAudioModeAsync({
  staysActiveInBackground: true,
});

[stephanmae]

Thank you very much! I ended up removing expo-av and switching completely to react-native-track-player which is the much better solution! :)