React native track player doesn't show "skip to next" button in background menu for some Android phones

40 views Asked by At

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:

Snapshots from 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.

0

There are 0 answers