doublesymmetry / react-native-track-player

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!
https://rntp.dev/
Apache License 2.0
3.18k stars 980 forks source link

TypeError: Cannot read property 'CAPABILITY_PLAY' of null, js engine: hermes #2227

Closed nottimnik closed 6 months ago

nottimnik commented 6 months ago

I did nothing more then just trying to import TrackPlayer: import { TrackPlayer } from "react-native-track-player"; and I get this error: TypeError: Cannot read property 'CAPABILITY_PLAY' of null, js engine: hermes I can't do anything else because if I try to follow any of the instructions from docs I get this error, so I can't work with the package. BTW I use expo.

lovegaoshi commented 6 months ago

well there u go expo is tje peovlem...

Aamir0890 commented 6 months ago

await TrackPlayer.updateOptions({ capabilities: [ Capability.Play, Capability.Pause, Capability.SkipToNext, Capability.SkipToPrevious ]}) this might work

jspizziri commented 6 months ago

Expo is not officially supported. Read through old issues, online articles, and the docs.

bobOnGitHub commented 5 months ago

@jspizziri

same problem.

TypeError: Cannot read property 'CAPABILITY_PLAY' of null, js engine: hermes

...../node_modules/react-native-track-player/src/constants/Capability.ts


import { NativeModules } from 'react-native';
const { TrackPlayerModule: TrackPlayer } = NativeModules;

export enum Capability {
  Play = TrackPlayer.CAPABILITY_PLAY,
  PlayFromId = TrackPlayer.CAPABILITY_PLAY_FROM_ID,
  PlayFromSearch = TrackPlayer.CAPABILITY_PLAY_FROM_SEARCH,
  Pause = TrackPlayer.CAPABILITY_PAUSE,
  Stop = TrackPlayer.CAPABILITY_STOP,
  SeekTo = TrackPlayer.CAPABILITY_SEEK_TO,
  Skip = TrackPlayer.CAPABILITY_SKIP,
  SkipToNext = TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
  SkipToPrevious = TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
  JumpForward = TrackPlayer.CAPABILITY_JUMP_FORWARD,
  JumpBackward = TrackPlayer.CAPABILITY_JUMP_BACKWARD,
  SetRating = TrackPlayer.CAPABILITY_SET_RATING,
  Like = TrackPlayer.CAPABILITY_LIKE,
  Dislike = TrackPlayer.CAPABILITY_DISLIKE,
  Bookmark = TrackPlayer.CAPABILITY_BOOKMARK,
}

TrackPlayer is null when at export enum Capability

Is TrackPlayerModule something you guys build into a modified NativeModules or something React Native / fb build ? ( I can't find any docs online )

Environment / Version info

npx expo-env-info

  expo-env-info 1.2.0 environment info:
    System:
      OS: Linux 4.18 AlmaLinux 8.9 (Midnight Oncilla)
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 20.9.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 10.1.0 - /usr/local/bin/npm
    npmPackages:
      @expo/webpack-config: ^19.0.0 => 19.0.1 
      expo: ~49.0.18 => 49.0.22 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.72.6 => 0.72.6 
      react-native-web: ~0.19.6 => 0.19.10 
    npmGlobalPackages:
      eas-cli: 7.1.1
    Expo Workflow: bare

cat package.json
{
  "name": "c2",
  "version": "1.0.0",
  "main": "./index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/plugin-transform-object-rest-spread": "^7.23.4",
    "@expo/metro-runtime": "^3.1.2",
    "@expo/webpack-config": "^19.0.0",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~49.0.18",
    "expo-dev-client": "~2.4.12",
    "expo-document-picker": "~11.5.4",
    "expo-keep-awake": "~12.3.0",
    "expo-localization": "~14.3.0",
    "expo-navigation-bar": "~2.3.0",
    "expo-screen-orientation": "~6.0.6",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-paper": "^5.12.3",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-track-player": "^4.0.1",
    "react-native-volume-manager": "^1.10.0",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

(yeah some legacy web in there)

hasnainirfan110 commented 5 months ago

Hey @nottimnik, you can use expo --dev-client to easily integrate react-native-track-player in Expo.

bobOnGitHub commented 5 months ago

@hasnainirfan110 No, the point is it is NOT working with expo (sdk 49) even when you use expo-dev-client.

nandowastaken commented 2 months ago

Hello, I was having the same problem for Expo running on Android, here what it solved for me:

npm install -g eas-cli
npx expo install expo-dev-client

Then create a eas.json in the root folder:

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

Then run:

eas build --profile development --platform android

And then just scan de QR Code and you will be fine. I took this from this Medium article from this guy: https://medium.com/@gionata.brunel/implementing-react-native-track-player-with-expo-including-lock-screen-part-2-android-8987e374f965 He wrote one for iOS as well: https://medium.com/@gionata.brunel/implementing-react-native-track-player-with-expo-including-lock-screen-part-1-ios-9552fea5178c#:~:text=All%20you%20need%20to%20do,Native%20Track%20Player%20with%20Expo.

KrishnaDolas commented 1 month ago

btw i just unplug my speakers while running the code and the error was resolved xd 😂 just try doing it helped me surprisingly

pjnalls commented 1 week ago

Hello, I was having the same problem for Expo running on Android, here what it solved for me:

npm install -g eas-cli
npx expo install expo-dev-client

Then create a eas.json in the root folder:

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

Then run:

eas build --profile development --platform android

And then just scan de QR Code and you will be fine. I took this from this Medium article from this guy: https://medium.com/@gionata.brunel/implementing-react-native-track-player-with-expo-including-lock-screen-part-2-android-8987e374f965 He wrote one for iOS as well: https://medium.com/@gionata.brunel/implementing-react-native-track-player-with-expo-including-lock-screen-part-1-ios-9552fea5178c#:~:text=All%20you%20need%20to%20do,Native%20Track%20Player%20with%20Expo.

@nandowastaken This worked for me too. Thank you!