Android failing due to TypeError: Cannot read property 'CAPABILITY_PLAY' of null

[KalobTaulien]

I started using this package last night and LOVE it! It works flawlessly on iOS. Unfortunately it doesn't seem to do what it's supposed to in the Android Emulator.

Describe the Bug
Having import TrackPlayer from 'react-native-track-player'; anywhere in a React Native / Expo project causes the error. The error from the terminal is this:

ERROR TypeError: Cannot read property 'CAPABILITY_PLAY' of null, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

Steps To Reproduce

1. Install using npm install react-native-sound --save
2. Add import TrackPlayer from 'react-native-track-player'; anywhere into your codebase
3. Run npx expo start and select Android
4. See error.

Code To Reproduce
N/A

Environment Info:
Paste the results of npx react-native info:

info Fetching system and libraries information...
System:
  OS: macOS 14.1.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 148.16 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.3.2
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

info React Native v0.75.2 is now available (your project is running on v0.73.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.75.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.75.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Paste the exact react-native-track-player version you are using:
"react-native-track-player": "^4.1.0",
Real device? Or simulator? Android Emulator

[KalobTaulien]

Well.. interesting.. After fighting with this for 24 hours, I did various things. I'll list out what I did to get this to work on Android (Note: I don't know which one of these things actually worked but here's what I tried, in this order).

First attempt:

rm -rf node_modules && npm cache clean --force && npm install && watchman watch-del-all && rm -rf $TMPDIR/haste-map-* && rm -rf $TMPDIR/metro-cache && npx expo start --clear

Second attempt:

rm -rf node_modules/ android/ ios/ .expo/
npm i
npx expo prebuild
npx expo start

Third attempt:
Build a development build with expo and then select y to download and install it on your computer.
eas build --profile development --platform android

This didn't work, so I needed to run adb uninstall "com.mycustom.appname" (or whatever your app.json's expo.android.package value is) and then try again.

I also tried npx expo install expo-av and that also failed for a different reason.

Fourth attempt:
Run npx expo start and select Android. Then switch to Expo Go (it's the s key on the command line). That failed, and it failed hard. So then I switched back to a development build. Which brought me back to the original issue.

🎉 Fifth attempt (this worked for me): 🎉
Using Expo, use the development build. But download it from Expo manually, and install it manually. Here's the solution that worked for me (so far, I'm not convinced this will be the solution forever after struggling with this so hard)

1. Run eas build --profile development --platform android and wait for it to build. Do not automatically install. Then go to https://expo.dev/ and manually download the latest android development build to your computer.
2. Open your terminal, and run adb uninstall "com.mycustom.appname" followed by adb install ~/Downloads/application-ed9923123-blah-blah.apk (You will need to adjust the paths as needed for your computer). If successful, move onto Step 3.
3. npx expo start (use development build, not Expo Go). Select Android and try it out. It worked for me.

I am not certain why this worked when other development builds failed, but this did the trick for me.

Noteworthy debugging

Comment out all TrackPlayer imports
To make life easier, comment out all import TrackPlayer from 'react-native-track-player'; lines, except for ONE instance (ie the App.js file). This way you can kind of isolate the problem to this one issue.

Install expo-av
I'm not sure if this is making a difference or not, but I have expo-av installed. npx expo install expo-av (note: its NOT using npm install for a reason)

Add space via Android Studio
I couldn't install Expo Go at one point because of:

expo go android install failed INSTALL_FAILED_INSUFFICIENT_STORAGE

Open Android Studio -> Virtual Device Manager -> Edit your testing device (click the pencil icon) -> Show Advanced Settings -> Add Internal Storage (I went from 6gb to 12gb)

Update all the android Studio things
Sometimes ya just need to give up and update everything.
Open Android Studio -> SDK Manager -> Languages & Frameworks -> Android SDK (update all existing installs in "SDK Platforms" and "SDK Tools"; no need to download anything extra)

Package versions I'm using
Here is my slimmed down package.json file with the relevant versions that seem to work so far.

{
  "name": "app-name-here",
  "version": "1.0.0",
  "scripts": {
    ...
  },
  "dependencies": {
    "expo": "~50.0.20",
    "expo-av": "~13.10.6",
    "expo-dev-client": "~3.3.12",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-track-player": "^4.1.1",
  },
  "private": true
}

Should anything else come up, I will continue to add to this comment.

If this helped, leave an emoji reaction to help other fellow developers use this awesome package! 🎉

[lovegaoshi]

expo managed is inherently not dev friendly to any RN libraries that modifies native code. and I dont recommend anyone seriously looking into app development to completely avoid native code and use expo managed. RNTP has heavily edited native code and will most likely not work with expo managed at all.

RNTP's expo compatibility comes with expo's inherent compatibility with ANY RN project. you should follow https://docs.expo.dev/bare/installing-expo-modules/ instead. my app uses expo in the exact same manner.
https://github.com/lovegaoshi/azusa-player-mobile/blob/3b921a4b177664c886779675cfe2933de5fe9a3a/package.json#L59

[jviall]

I too am experiencing this, but I'm not using expo--using a proprietary react-native framework, so unable to provide a repro. Is there a clue to what this error actually means? Personally, I traced it to the use of the NativeModules import from react-native, which doesn't exist in the latest versions of react-native https://github.com/doublesymmetry/react-native-track-player/blob/main/src/TrackPlayerModule.ts#L2. My version of react-native is effectively next, so it makes sense to me that TrackPlayerModule does not exist on the NativeModules object. Perhaps this getting fixed will resolve it for me? #2293