React-native-track-player: 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:

```javascript
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:

 ```xml
<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?