React native track player works on Samsung phones correctly, but it does not show the "skip to next" button in the background menu for other Android phones like Redmi 9. I use the 4.0.1 version of react native track player.
Snapshots from Samsung M32 phone:
- Screen with "Skip to next" button from Samsung M32 phone
- Screen with "Skip to next" button from Samsung M32 phone
- Information about Samsung M32 phone
Snapshots from Redmi 9 phone:
- Background menu without "Skip to next" button
- Background menu without "Skip to next" button
- Information about Redmi 9 phone
- Information about Redmi 9 phone
I tried to use all available properties for Capabilities such as notificationCapabilities, compactCapabilities and capabilities, but it did not help me to fix an issue for the Redmi 9 phone. There is a setup track player code below:
export async function setupPlayerAsync(playbackSpeedValue) {
let isSetup = false;
try {
await TrackPlayer.getCurrentTrack();
isSetup = true;
}
catch {
await TrackPlayer.setupPlayer();
await TrackPlayer.updateOptions({
android: {
appKilledPlaybackBehavior:
AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
},
capabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
Capability.SeekTo
],
compactCapabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
],
progressUpdateEventInterval: 2,
});
await TrackPlayer.setRepeatMode(RepeatMode.Off);
isSetup = true;
}
finally {
return isSetup;
}
}
package.json
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^19.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/slider": "4.4.2",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"expo": "^49.0.0",
"expo-dev-client": "~2.4.11",
"expo-location": "~16.1.0",
"expo-media-library": "~15.4.1",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"expo-updates": "~0.18.14",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "^2.13.1",
"react-native-paper": "^5.10.3",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-track-player": "^4.0.1",
"react-native-web": "~0.19.6",
"recyclerlistview": "^4.2.0",
"save": "^2.9.0"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}
Please let me know if I am missing something. I really appreciate any help you can provide.