React-native-track-player: [iOS] The Swift pod `react-native-track-player` depends upon `React`, which do not define modules.

[sideokyou]

Hi,

I followed the instruction on [https://react-native-kit.github.io/react-native-track-player/api/]

After execution react-native link, I got a message that successfully linked.

But, while running on iOS emulator, there is an error message that "native module cannot be null".

So, I go to ios folder and ran pod install. But, I got an error message

Using boost-for-react-native (1.63.0)
Using glog (0.3.5)
Installing react-native-track-player (1.1.3)
Using yoga (0.58.6.React)
[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod react-native-track-player depends upon React, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

After that, I coulnd't running emaultor and build fails.

Any tips?

package.json

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-swift": "^1.2.2",
    "react-native-track-player": "^1.1.3",
    "react-native-unimodules": "0.2.0",
    "react-navigation": "^3.5.1"
  },
  "devDependencies": {
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.52.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true,
  "isSwift": true
}

react-native info

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 23.37 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.11.0 - /usr/local/bin/node
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 10, 11, 12, 13, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.3, 29.0.0
        System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.58.6 => 0.58.6
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-snap-carousel: 3.6.0

[sideokyou]

Also, I followed linking library manually, but it doesn't work. I tried to create dummy.swift, but nothing came out.

[sideokyou]

[Resovled]

Okay. the problem was that I was using EXPO. In order to use this library, I had to eject from EXPO. Because EXPO doesn't support audio for background, so I had to eject my project form EXPO. If those of you who have the same experience as me, I would recommend you go with react-native cli.

Even you start with expo-cli with bare workflow, it causes an error for using this library.

Hope this help.

THanks

[Guichaguri]

Yes, Expo is not fully supported on both Android and iOS at the moment.

[styrken]

Any plans to support it? :-)

[Guichaguri]

On Android, one of the key requirements for this package is the Headless JS feature, which straight up crashes on Expo.

Unless Expo starts supporting it, there are no plans for it.

[FrankGoortani]

If you are not using Expo, Using pods and get this error, adding use_modular_headers! to top of Podfile works.

[waqas19921]

I am getting the same error while using react-native version 0.59.10 and purely managing dependencies through pods.
After using use_modular_headers! getting following error

<module-includes>:1:9: note: in file included from <module-includes>:1:
#import "react-native-track-player-umbrella.h"
        ^
/Users/waqasahmed/Desktop/projects/react-native/tazkia/Tazkia/ios/Pods/Headers/Public/react_native_track_player/react-native-track-player-umbrella.h:25:9: note: in file included from /Users/waqasahmed/Desktop/projects/react-native/tazkia/Tazkia/ios/Pods/Headers/Public/react_native_track_player/react-native-track-player-umbrella.h:25:
#import "Quick.h"
        ^
/Users/waqasahmed/Desktop/projects/react-native/tazkia/Tazkia/node_modules/react-native-track-player/ios/RNTrackPlayer/Vendor/AudioPlayer/Example/Pods/Quick/Sources/QuickObjectiveC/Quick.h:9:9: note: in file included from /Users/waqasahmed/Desktop/projects/react-native/tazkia/Tazkia/node_modules/react-native-track-player/ios/RNTrackPlayer/Vendor/AudioPlayer/Example/Pods/Quick/Sources/QuickObjectiveC/Quick.h:9:
#import "QuickSpec.h"
        ^
/Users/waqasahmed/Desktop/projects/react-native/tazkia/Tazkia/node_modules/react-native-track-player/ios/RNTrackPlayer/Vendor/AudioPlayer/Example/Pods/Quick/Sources/QuickObjectiveC/QuickSpec.h:1:9: error: 'XCTest/XCTest.h' file not found
#import <XCTest/XCTest.h>
        ^
<unknown>:0: error: could not build Objective-C module 'react_native_track_player'

[waqas19921]

I have also tried that using react-native version 0.60.3 and getting following error with autolinking on pod install

Detected React Native module pods for RNGestureHandler and react-native-track-player
Analyzing dependencies
Fetching podspec for `RNGestureHandler` from `../node_modules/react-native-gesture-handler`
Fetching podspec for `React` from `../node_modules/react-native/`
Fetching podspec for `React-Core` from `../node_modules/react-native/React`
Fetching podspec for `React-DevSupport` from `../node_modules/react-native/React`
Fetching podspec for `React-RCTActionSheet` from `../node_modules/react-native/Libraries/ActionSheetIOS`
Fetching podspec for `React-RCTAnimation` from `../node_modules/react-native/Libraries/NativeAnimation`
Fetching podspec for `React-RCTBlob` from `../node_modules/react-native/Libraries/Blob`
Fetching podspec for `React-RCTImage` from `../node_modules/react-native/Libraries/Image`
Fetching podspec for `React-RCTLinking` from `../node_modules/react-native/Libraries/LinkingIOS`
Fetching podspec for `React-RCTNetwork` from `../node_modules/react-native/Libraries/Network`
Fetching podspec for `React-RCTSettings` from `../node_modules/react-native/Libraries/Settings`
Fetching podspec for `React-RCTText` from `../node_modules/react-native/Libraries/Text`
Fetching podspec for `React-RCTVibration` from `../node_modules/react-native/Libraries/Vibration`
Fetching podspec for `React-RCTWebSocket` from `../node_modules/react-native/Libraries/WebSocket`
Fetching podspec for `React-cxxreact` from `../node_modules/react-native/ReactCommon/cxxreact`
Fetching podspec for `React-fishhook` from `../node_modules/react-native/Libraries/fishhook`
Fetching podspec for `React-jsi` from `../node_modules/react-native/ReactCommon/jsi`
Fetching podspec for `React-jsiexecutor` from `../node_modules/react-native/ReactCommon/jsiexecutor`
Fetching podspec for `React-jsinspector` from `../node_modules/react-native/ReactCommon/jsinspector`
Fetching podspec for `react-native-track-player` from `../node_modules/react-native-track-player`
Fetching podspec for `yoga` from `../node_modules/react-native/ReactCommon/yoga`
Downloading dependencies
Using DoubleConversion (1.1.6)
Using Folly (2018.10.22.00)
Using RNGestureHandler (1.3.0)
Using React (0.60.3)
Using React-Core (0.60.3)
Using React-DevSupport (0.60.3)
Using React-RCTActionSheet (0.60.3)
Using React-RCTAnimation (0.60.3)
Using React-RCTBlob (0.60.3)
Using React-RCTImage (0.60.3)
Using React-RCTLinking (0.60.3)
Using React-RCTNetwork (0.60.3)
Using React-RCTSettings (0.60.3)
Using React-RCTText (0.60.3)
Using React-RCTVibration (0.60.3)
Using React-RCTWebSocket (0.60.3)
Using React-cxxreact (0.60.3)
Using React-fishhook (0.60.3)
Using React-jsi (0.60.3)
Using React-jsiexecutor (0.60.3)
Using React-jsinspector (0.60.3)
Using boost-for-react-native (1.63.0)
Using glog (0.3.5)
Installing react-native-track-player 2.0.0-rc12 (was 1.2.0)
Using yoga (0.60.3.React)
[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `react-native-track-player` depends upon `React-Core`, `React-DevSupport`, `React-RCTActionSheet`, `React-RCTAnimation`, `React-RCTBlob`, `React-RCTImage`, `React-RCTLinking`, `React-RCTNetwork`, `React-RCTSettings`, `React-RCTText`, `React-RCTVibration`, `React-RCTWebSocket`, `Folly`, `React-cxxreact`, `React-jsiexecutor`, `yoga`, `React-fishhook`, `DoubleConversion`, `glog`, `React-jsinspector`, and `React-jsi`, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

[waqas19921]

@Guichaguri @FrankGoortani @dcvz @mhabegger any idea how to deal with that?

[mhabegger]

@waqas19921 I assume you create the RN project from scratch with npx ?

What version of pod do you have?

pod —version

[waqas19921]

@mhabegger no i have created project using react-native init and my pod version is 1.5.3

[mhabegger]

@waqas19921
I have 1.7.3. Can you try upgrading pod with

sudo gem install cocoapods --pre

Also regarding react-native CLI, from what I saw it's not recommended anymore to install the module globally but use npx to generate new project. But the documentation is not up to date yet. But I'm not sure this has any influence on the generated project. https://github.com/react-native-community/cli#using-npx-recommended

[waqas19921]

@mhabegger Thanks that worked after updating pods version and following two steps more

1. added this to the track player pod spec to ignore example project s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]
2. Added :modular_headers => true against React so that whole line becomes pod 'React', :path => '../node_modules/react-native', :modular_headers => true in my pod file to get rid of the error.

[rochapablo]

@waqas19921 thanks!

Just to make it clear:

1. node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]

2. yourapp/ios/Podfile
pod 'React', :path => '../node_modules/react-native', :modular_headers => true

[philjoseph]

I've applied those changes but have now an error on a different 3rd partie (react-native-image-crop-picker) that was building ok before those changes but cannot compile with the modular_headers thing. I've reacted to their issue here: https://github.com/ivpusic/react-native-image-crop-picker/issues/1132

The error I am getting is
Definition of 'RCTBridge' must be imported from module 'React.React.RCTBridge' before it is required

So we are in a catch 22 situation where we need to choose between this library and the other one. Do you have a less instrusive solution to our issue than :modular_headers ==> true ?

[GeekChao]

@waqas19921 thanks!

Just to make it clear:

1. node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]
2. yourapp/ios/Podfile
pod 'React', :path => '../node_modules/react-native', :modular_headers => true

Good solution. Besides the version of swift, I want to set "exclude_files" in Podfile. Do you how to do it?
//podspec:
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]

//Podfile: (try to set "exclude_files" in Podfile)

config.build_settings['EXCLUDE_FILES'] = '../node_modules/react-native-track-player/ios/RNTrackPlayer/Vendor/AudioPlayer/Example'

[Esirei]

@waqas19921 thanks!

Just to make it clear:

1. node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]
2. yourapp/ios/Podfile
pod 'React', :path => '../node_modules/react-native', :modular_headers => true

node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]

How does this work? I have to modify the packages podspec or what?

Also I've not worked on iOS/cocoapods before, but what's the effect of adding the :modular_headers => true option to the React's pod definition?

[RollnCode]

@waqas19921 thanks!
Just to make it clear:

1. node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]
2. yourapp/ios/Podfile
pod 'React', :path => '../node_modules/react-native', :modular_headers => true

node_modules/react-native-track-player/react-native-track-player.podspec
s.exclude_files = ["ios/RNTrackPlayer/Vendor/AudioPlayer/Example"]

How does this work? I have to modify the packages podspec or what?

Also I've not worked on iOS/cocoapods before, but what's the effect of adding the :modular_headers => true option to the React's pod definition?

Yes, you should update file _node_modules/react-native-track-player/react-native-track-player.podspec_ each time after update node_modules. That solution works for me

[yjose]

@RollnCode , @waqas19921 You can make it easy using https://www.npmjs.com/package/patch-package

[willianhf]

Everytime that a new dependency is installed I'll have to change the react-native-track-player.podspec? There's a forecast when this will be fixed?