React-native-track-player: Not showing buttons(pause, next track) in notification panel [ANDROID]

[godlikeAlex]

Describe the bug
Not showing buttons in notification panel such as pause, next track etc...

Environment:

> react-native info

System:
OS: macOS Sierra 10.12.6
CPU: (2) x64 Intel(R) Pentium(R) CPU G2030 @ 3.00GHz
Memory: 174.85 MB / 6.00 GB
Shell: 5.2 - /bin/zsh
Binaries:
Node: 13.2.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.13.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
Android SDK:
API Levels: 28
Build Tools: 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: 0.60.4

react-native-track-player: ^1.2.3
Running on real device, OS version: Android: 9.0

Code

app.js

import React, {useEffect} from 'react';
import {Button, StatusBar, View} from 'react-native';
import TrackPlayer from 'react-native-track-player';

const track = {
  id: 'unique track id', // Must be a string, required
  url: 'http://d.topmusic.uz/new/singles/vol119/Inna_-_Sober_.mp3', // Load media from the network
  title: 'Avaritia',
  artist: 'deadmau5',
  genre: 'Progressive House, Electro House',
  artwork: 'https://i.picsum.photos/id/100/200/200.jpg',
  date: '2014-05-20T07:00:00+00:00', // RFC 3339
};

const App = () => {
  useEffect(() => {
    startPlay();
  }, []);

  const startPlay = async () => {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.add([track]);
    TrackPlayer.play();
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <Button title='Play' onPress={() => TrackPlayer.play()} />
      <Button title='Stop' onPress={() => TrackPlayer.pause()} />
    </>
  );
};

export default App;

index.js

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import TrackPlayer from 'react-native-track-player';

import App from './App';

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => require('./service'));

service.js

import TrackPlayer from 'react-native-track-player';

module.exports = async function() {

  TrackPlayer.addEventListener('remote-play', () => {
    TrackPlayer.play()
  })

  TrackPlayer.addEventListener('remote-pause', () => {
    TrackPlayer.pause()
  });

  TrackPlayer.addEventListener('remote-next', () => {
    TrackPlayer.skipToNext()
  });

  TrackPlayer.addEventListener('remote-previous', () => {
    TrackPlayer.skipToPrevious()
  });

  TrackPlayer.addEventListener('remote-stop', () => {
    TrackPlayer.destroy()
  });
};

[curiousdustin]

You need to call updateOptions, and include the capabilities you want to appear in the notification.

https://react-native-track-player.js.org/documentation/#updateoptionsoptions