Android Remote Control Options

[ZahraKhanjani]

Describe the bug When a react-native application using react-native-track-player runs on Android, the notification center (Notification Center and Control Center in Xiaomi devices on MIUI 12) becomes laggy. It appears to me that the player tries to open something in the notification center but fails and retries over and over. I checked my app info in the setting and I saw the following:

I believe there's a problem in managing the remote control options in Android. I have no idea what is happening on the project's Android side since I'm a react-native developer but it seems that it's trying to send the meta info and control options of the music as a notification, which causes serious performance issues.

To Reproduce Init an application using react-native-track-player as the player and set remote control options according to the documentation. Try to open the notification center while the app is running.

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

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

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

I faced this issue while testing on various android devices:

• Xiaomi a2 lite running Android 10
• Xiaomi Redmi note8 Pro running Android 10
• Samsung A31 running Android 10

Code This is how I have initialized my player:

function NewPlayer() {
  const events = [
    Event.PlaybackTrackChanged,
    Event.PlaybackQueueEnded,
    Event.PlaybackError,
    Event.RemotePause,
    Event.RemoteNext,
    Event.RemotePrevious,
    Event.RemotePlay,
    Event.RemotePause,
    Event.RemoteStop,
    Event.RemoteSeek,
    Event.RemoteDuck,
  ];
  useTrackPlayerEvents(events, event => {
    switch (event.type) {
      case Event.RemoteDuck:
        pauseSong();
        break;
      case Event.PlaybackError:
        console.warn(
          'An error occured while playing the current track.',
          event,
        );
        break;
      case Event.RemoteNext:
        playNextSong();
        break;
      case Event.RemotePrevious:
        playPrevSong();
        break;
      case Event.RemotePlay:
        playSong();
        break;
      case Event.RemotePause:
        pauseSong();
        break;
      case Event.RemoteStop:
        pauseSong();
        break;
      case Event.RemoteSeek:
        TrackPlayer.seekTo(event.position);
        break;
      default:
    }
  });

  useEffect(() => {
    // Initialize
    TrackPlayer.setupPlayer({
      iosCategory: IOSCategory.Playback,
      // iosCategoryOptions:
      iosCategoryMode: IOSCategoryMode.Default,
    });
    TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
        Capability.SeekTo,
      ],
      compactCapabilities: [Capability.Play, Capability.Pause],
    });
  }, []);
  return null;
}

I'm using react-navigation v5 and my player is instantiated in the root of the project:

<Provider store={store}>
      <PersistGate persistor={persistor}>
        <SafeAreaProvider>
          <StatusBar barStyle="light-content" />
          <RootStack authContext={authContext} />
          <NewPlayer />
        </SafeAreaProvider>
      </PersistGate>
</Provider>

I have also asked a question related to this issue on StackOverFlow

[amerllica]

Dear @ZahraKhanjani, I have faced the same issue, if you find the solution please mention me. thanks 🌹 .

[puckey]

Could you run adb logcat and see if there is anything in the logs?