react-native-music-control

⚠️ NO LONGER MAINTAINED ⚠️

Please use react-native-track-player instead ✅

---

react-native-music-control

Display and manage media controls on lock screen and notification center for iOS and Android.

Project

With Yarn:

yarn add react-native-music-control

or with NPM:

npm install react-native-music-control --save

iOS

1. pod install --project-directory=ios/
2. Enable Audio Background mode in XCode project settings

Android

1. Add the android.permission.FOREGROUND_SERVICE permission to your AndroidManifest.xml:

2. Set the launchMode of MainActivity to singleTask by adding in AndroidManifest.xml:

For React Native {

  this.props.dispatch(playRemoteControl());
})

// on iOS this event will also be triggered by audio router change events
// happening when headphones are unplugged or a bluetooth audio peripheral disconnects from the device
MusicControl.on(Command.pause, ()=> {
  this.props.dispatch(pauseRemoteControl());
})

MusicControl.on(Command.stop, ()=> {
  this.props.dispatch(stopRemoteControl());
})

MusicControl.on(Command.nextTrack, ()=> {
  this.props.dispatch(nextRemoteControl());
})

MusicControl.on(Command.previousTrack, ()=> {
  this.props.dispatch(previousRemoteControl());
})

MusicControl.on(Command.changePlaybackPosition, (playbackPosition)=> {
  this.props.dispatch(updateRemoteControl(playbackPosition));
})

MusicControl.on(Command.seekForward, ()=> {});
MusicControl.on(Command.seekBackward, ()=> {});

MusicControl.on(Command.seek, (pos)=> {}); // Android only (Seconds)
MusicControl.on(Command.volume, (volume)=> {}); // Android only (0 to maxVolume) - Only fired when remoteVolume is enabled

// Android Only (Boolean for RATING_HEART or RATING_THUMBS_UP_DOWN, Number for other types)
MusicControl.on(Command.setRating, (rating)=> {});

MusicControl.on(Command.togglePlayPause, ()=> {}); // iOS only
MusicControl.on(Command.enableLanguageOption, ()=> {}); // iOS only
MusicControl.on(Command.disableLanguageOption, ()=> {}); // iOS only
MusicControl.on(Command.skipForward, ()=> {});
MusicControl.on(Command.skipBackward, ()=> {});

// Android Only
MusicControl.on(Command.closeNotification, ()=> {
  this.props.dispatch(onAudioEnd());
})

}

…

MusicControl.on(Command.play, () => { // A valid funcion must be present player.play() })

## Customization

It is possible to customize the icon used in the notification on Android. By default you can add a drawable resource to your package with the file name `music_control_icon` and the notification will use your custom icon. If you need to specify a custom icon name, or change your notification icon during runtime, the `setNowPlaying` function accepts a string for an Android drawable resource name in the `notificationIcon` prop. Keep in mind that just like with `music_control_icon` the resource specified has to be in the drawable package of your Android app.

```javascript
MusicControl.setCustomNotificationIcon('my_custom_icon')

Contributing

Of course! We are waiting for your PR :)