0

I have an react-native expo managed (SDK 44) project and am attempting to add react-native-track-player.I am going through the installation steps and keep encountering the same error that is crashing the app:

TypeError: null is not an object (evaluating ‘TrackPlayer.RATING_HEART’)

I am using eas build to run the app using expo start --dev-client on an android device. I have not tested on ios yet.

Here is my code:

App.tsx

import TrackPlayer, {Capability} from 'react-native-track-player';

async function setup() {
  await TrackPlayer.setupPlayer({});
  await TrackPlayer.updateOptions({
    stopWithApp: false,
    capabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_STOP,
      TrackPlayer.CAPABILITY_SEEK_TO,
    ],
    compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
    ],
  });
}

export default function App() {
...
  useEffect(() => {
    setup();

    return () => TrackPlayer.destroy();
  }, []);
}

index.js

import { registerRootComponent } from "expo"
import App from "./App"
import TrackPlayer from "react-native-track-player"

registerRootComponent(App)
TrackPlayer.registerPlaybackService(() => require("./service.js"))

service.js

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

module.exports = async function () {
  TrackPlayer.addEventListener('remote-play', () => {
    console.log('remote play clicked');
    TrackPlayer.play();
  });

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

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

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

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

  TrackPlayer.addEventListener('remote-seek', ({ position }) => {
    // TrackPlayer.destroy();
    console.log('remote seek:', position);
    TrackPlayer.seekTo(position);
  });
};

package.json

...
"main": "./index.js",
"dependencies": {
    ""react-native-track-player": "3.0.0",
"expo": "^44.0.6",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",

}

app.json

"expo": {
    ...
    "entryPoint": "./index.js",
}

So far, I have tried:

-clearing my cache and reinstalling react-native-track-player

-adding jcenter() to my build.gradle file (as described here)

-i have tried this, but am not sure I configured it properly

I have not tried ejecting Expo as I am trying to avoid that for now. Does anyone know why this might be happening?

igotbeatebydre
  • 81
  • 8

1 Answers1

0

please check this github issue it seems like react native track players does not work on expo gosee the github issue

Kouma Ibrahim
  • 91
  • 4