How to customize React native track player notification bar

Question

I am using react-native-track-player to create a music app. Can I customize the notification area, and lock screen player?

What I need to do is changing the background color and add custom theming to the notification area and lock screen play options. Can someone please let me know how to do it please?

Following is the code I have used to enable track player options. How can I modified it to do above tasks? Or is there any other method to perform customization. Thank you so much.

const setUpTrackPlayer = async () => {
  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.add(audioClipsArray); 
    await TrackPlayer.updateOptions({
      stopWithApp: true, 
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
      ],
      compactCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
      notificationCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
    });
  } catch (e) {
    console.log(e);
  }
};

Answer 1

Some customization is possible.

You can change background color and icons in the notification, as it is decribed here: http://react-native-track-player.js.org/documentation/#player-functions

You can also specify artwork for each track, and it will be used nicely as a notification background image.

All the above would also affect lock screen notification. Sample usage:

const audioClipsArray = [{
    title: "Title",
    artist: "Artist",
    url: "./path/to/track.mp3",
    artwork: "./path/to/artwork.jpg"
}];

const setUpTrackPlayer = async () => {
  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.add(audioClipsArray); 
    await TrackPlayer.updateOptions({
      stopWithApp: true, 
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
      ],
      compactCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
      notificationCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
      // Obviously, color property would not work if artwork is specified. It can be used as a fallback.
      color: 99410543
    });
  } catch (e) {
    console.log(e);
  }
};