Home > Net >  How to customize React native track player notification bar
How to customize React native track player notification bar

Time:02-10

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

CodePudding user response:

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.

  • Related