React-native-track-player: TrackPlayer.registerPlaybackService causes TypeError

[andrekovac]

Describe the bug

Add TrackPlayer.registerPlaybackService exactly as described in the docs https://github.com/react-native-kit/react-native-track-player/blob/dev/docs/API.md#playback-service causes the following error:

TypeError: func.apply is not a function. (In 'func.apply(undefined, args)', 'func.apply' is undefined)

Because of this I can't add a playback service at the moment...

To Reproduce

Just add the TrackPlayer.registerPlaybackService call below the registerComponent call and create the file service.js as described in the docs.

Environment (please complete the following information):

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

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 526.26 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.14.1/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, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 24.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.0, 29.0.0, 29.0.2, 30.0.0, 30.0.0
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0
    react-native: ~0.61.4 => 0.61.5
  npmGlobalPackages:
    create-react-native-module: 0.18.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

What react-native-track-player version are you using?

dev branch, but it also happened in version 1.2.3

Are you testing on a real device or in the simulator? Which OS version are you running?

iOS Simulator

[curiousdustin]

I attempted to reproduce your issue with the same version of React Native. I did not get the error.

Here are the steps I used. Are you doing something different?

Project creation:

npx react-native init --version="[email protected]" RNTPTest
cd RNTPTest/
open ios/RNTPTest.xcworkspace/
(setup signing)
npx react-native run-ios
(RN demo app runs without error in simulator)
(close metro bundler terminal window)
(change Podfile to ios 10.0)
npm install [email protected]
cd ios
pod install
cd ..
npm install --save react-native-swift
react-native swiftify
npx react-native run-ios
(RN demo app still builds and runs)

Add TrackPlayer setup to App.js

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

TrackPlayer.setupPlayer().then(() => {
  console.log('Setup Complete');
});

Create service.js

// service.js
module.exports = async function () {
  console.log('Service Function');
  // This service needs to be registered for the module to work
  // but it will be used later in the "Receiving Events" section
};

Add TrackPlayer registration to index.js

import TrackPlayer from 'react-native-track-player';
AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => require('./service'));

Final test run:

npx react-native run-ios
(app still runs without errors)
(Service Function, and Setup Complete appear in the logs)

[curiousdustin]

Are there any other errors in the logs/console?

[andrekovac]

Thanks for trying to replicate my issue.

I'm using an ejected Expo app, so I replicated all of your outlined steps with an expo bare project and then I also replicated all of your steps exactly as you did with react-native init and I got the following result in both cases:

I don't get the TypeError as I posted in this issue, but I only see the Setup Complete message appearing, but not the log of the Service Function.

So I can't replicate my issue but I also can't replicate what you get, with expo or without...

[curiousdustin]

In my case Service Function log appeared before Setup Complete. Just making sure you weren't checking in the opposite order.

[andrekovac]

No, I rebuilt and reloaded several times. No Service Function string was ever logged.

[andrekovac]

Where inside App.js are you adding the following?:

TrackPlayer.setupPlayer().then(() => {
  console.log('Setup Complete');
});

I added it outside of the App function and then inside the App function inside a useEffect hook.

[curiousdustin]

...
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

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

TrackPlayer.setupPlayer().then(() => {
  console.log('Setup Complete');
});

const App: () => React$Node = () => {
...

This was just a test, so I put it here.

[andrekovac]

Ok, I did the same thing... Really weird. And you also used the iOS Simulator?

[curiousdustin]

Correct, iOS Simulator.

[andrekovac]

I tested it again in my main App and it now somehow works.. I can't explain myself why... must have overlooked something.
Well, sorry for the confusion and thanks so much for your help! I'm happy it works now.