CODEWITHSUNDEEP
react-nativereact-native-track-player
Samantha H
Samantha H

Reputation: 33

How to customize React native track player notification bar

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

Upvotes: 3

Views: 5025

Answers (2)

Leonid Shapiro
Leonid Shapiro

Reputation: 11

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

Upvotes: 1

Matin Zadeh Dolatabad
Matin Zadeh Dolatabad

Reputation: 1027

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.

Upvotes: 1

Related Questions