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);
  }
};

score 1 · Accepted Answer · answered Feb 09 '22 at 21:26

1

You cannot do it from javascript at least for now, because this module is not providing any methods to customize that. To do that you need to change native files in order to get make it customized. You can also take a look at https://github.com/invertase/notifee and see if you can make it work together with track player.

answered Feb 09 '22 at 21:26

Matin Zadeh Dolatabad

877
6
20

Thank you so much for the answer. Can we use react-native-music-control along with react-native-track-player? Will it be a better option? I noticed so many people have used it with react-native-sound. but did not see any combination of it with react-native-track-player. – Samantha H Feb 10 '22 at 03:18
Yeah, but I can't see any UI customization with react-native-music-control. The most important thing you need to consider is to use maintained repos/modules as much as possible. – Matin Zadeh Dolatabad Feb 10 '22 at 15:31

score 1 · Answer 2 · answered Feb 11 '22 at 12:38

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);
  }
};

How to customize React native track player notification bar

2 Answers2