Occasional error "{AppName} keeps stopping", on closing an app with react-native-track-player in the foreground

Question

I am creating an app which uses react-native-track-player in the foreground. Occasionally on closing the app I get an android message App Name keeps stopping.

The error feedback on the device provides the following details

Report Type: Crash
Package name: com.myApp

Package version: 1004
Package version name: 1.0.0
Installed by: com.android.vending
Process name: com.myApp
Time: Monday, 3 April 2023
System app: false
System: 
  Device: a02
  Build type: user
  Model: SM-M022G
Product: a02ins
SDK version: 30
Release: 11
Codename: REL
Crash:
  Exception class name: java.lang.NumberFormatException
  Source file: Integer.java
  Source class: java.lang.Integer
  Source method: parseInt
  Line number: 615
  Stack trace: 
    java.lang.numberformatexception: For input string: "null" 
    at java.lang.Integer.parseInt(Integer.java: 615) 
    at java.lang.Integer.parseInt(Integer.java: 650) 
    at com.doublesymmetry.trackplayer.module.MusicModule$q.m(Unknown Source:64)
    at g8.a.e(Unknown Source:11)
    at w8.u0.run(Unknown Source:129)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:246)
    at android.app.Handler.ActivityThread.main(ActivityThread.java:8633)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)
    Suppressed: w8.s0: [b2{Cancelling}@183e27f, Dispatchers.Main]

I am registering the TrackPlayer's PlaybackService in the ./index.js.

// ./index.js
import {AppRegistry} from 'react-native';
import TrackPlayer from 'react-native-track-player';

import {PlaybackService} from './service';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => PlaybackService);

And the TrackPlayer's Playback Services are stored in ./service.js

// ./service.js
import TrackPlayer, {Event} from 'react-native-track-player';

export const PlaybackService = async function () {
  TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
  TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
};

And this is how I am setting up the track player.

// ./App.js
  const track = {
    id: 0,
    url: 'https://streaming.test.net:12345/auto-dj',
    title: 'ShoutCast Stream',
    artist: 'React Native',
    genre: 'ShoutCast Stream',
    artwork: 'https://d33l68.cloudfront.net/5540b349/ecfc9/img/header_logo.svg',
  };

  const setUpTrackPlayer = async track => {
    try {
      await TrackPlayer.setupPlayer();
      await TrackPlayer.updateOptions({
        stopWithApp: true,
        android: {
          appKilledPlaybackBehavior:
            AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
        },
        // Media controls capabilities
        capabilities: [Capability.Play, Capability.Pause],

        // Capabilities that will show up when the notification is in the compact form on Android
        compactCapabilities: [Capability.Play, Capability.Pause],
      });
      await TrackPlayer.add([track]);
      TrackPlayer.play();
    } catch (err) {
      console.error(`Could not setup track player. ${err}`);
      TrackPlayer.remove();
    }
  };

  useEffect(() => {
    setUpTrackPlayer(track);

    return () => {
      TrackPlayer.remove();
    };
  }, []);

How can I stop the error from popping up?

Answer 1

Self answer here. The problem was that I was using react-native-track-player: ˆ3.2.0. Updating the package to Version 4.0.0-rc04 using

npm i [email protected]

fixed the issue.

For more info checkout this issue.