React-native: [CocoaPods] Podspec doesn't set up header search paths for <CSSLayout> imports

[ide]

RN includes CSSLayout files using angle brackets like #import <CSSLayout/CSSLayout.h>, which don't work with CocoaPods right now since CP flattens the headers by default. We either need to figure out how to preserve the directory hierarchy just for React/CSSLayout or preserve the entire directory hierarchy and set up the header search path to be recursive I think.

[Gladkov-Art]

It seems that I have similar issue related to importing CSSLayout.
I can't build React pod. Compiling of CSSNodeList.c fails with fatal error: 'CSSLayout/CSSLayout.h' file not found.
Probably my setup will be useful:
package.json:

{
  "name": "Chat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "~15.2.1",
    "react-native": "~0.31.0",
    "react-native-gifted-chat": "0.0.3"
  }
}

podfile:

target 'Chat' do
   use_frameworks!

   pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTWebSocket',
    'RCTImage',
  ]
end

I have latest stable version of XCode (7.3.1), cocoapods v1.0.1 and new swift project.
I've tried to delete Pods/, node_modules/, Podfile.lock and install everything again.

I reproduced the issue on my office mac.
BTW, downgrading to 0.30.0 solves it.

[cknitt]

Same problem here, occurs only when use_frameworks! is set in the Podfile (which is required when using pods implemented in Swift).

Downgrading to 0.30 worked for me, too.

[guysegal]

Same here .We have react native project with Swift and the error started to occur on 0.31.
We also downgraded to 0.30 and it solved it..

[moosch]

+1 I did the same as @guysegal and it's fine

[rh389]

This looks to be down to a Cocoapods/Xcode bug, but I haven't found a clean solution yet - https://github.com/CocoaPods/CocoaPods/issues/4605

[sdcooke]

It's not clean but we've worked around this using an npm postinstall script that rewrites imports: replace(/#(include|import) <CSSLayout\/([A-Za-z]+)\.h>/, '#$1 "$2.h"'); (#import <CSSLayout/CSSlayout.h> becomes #import "CSSLayout.h")

Definitely not clean or ideal and may or may not work depending on how you're using React in your codebase. Thought I'd post here just in case it helps anyone else.

[guysegal]

Seems like its a blocker for a lot of projects to upgrade to 0.31..

[rh389]

After doing some digging I think @sdcooke's solution is the right one, so I've submitted a PR to get it changed at source.

In the mean time, I'm using "postinstall": "find ./node_modules/react-native \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:\"\\1\":g'"

[senpng]

In Swift Project.
Try "postinstall": "find ./node_modules/react-native \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:\"\\1\":g'"
And build error，

package.json

[senpng]

I tried to solve this problem。
I was such a modification:
package.json

{
  "name": "xxxxxxx",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle": "react-native bundle --platform ios --entry-file index.ios.js --bundle-output bundle/main.ios.jsbundle --assets-dest bundle/ --dev false",
    "postinstall": "find ./node_modules/react-native \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:\"\\1\":g'"
  },
  "author": "[email protected]",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.0",
    "react-native": "^0.32.0",
    "react-native-fs": "^2.0.1-rc.2"
  }
}

the most important is "postinstall": "find ./node_modules/react-native \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:\"\\1\":g'" (thinks @rh389 )

Edit node_modules/react-native/React.podspec File:
line 46

 s.subspec 'CSSLayout' do |ss|
    ss.source_files        = "React/CSSLayout/**/*.{c,h}"
    ss.header_mappings_dir = "React"
  end

_changed to_

 s.subspec 'CSSLayout' do |ss|
    ss.source_files        = "React/CSSLayout/**/*.{c,h}"
  end

Before pod install

[rh389]

Good find - that seems to be because CocoaPods will usually copy all headers to the same directory, but specifying React as a header_mappings_dir overrides that behaviour to preserve all paths under React, so has quite a wide impact (@alloy may have more insight). https://github.com/facebook/react-native/pull/9544 works too by removing the subspec completely, and I guess adding a recursive user header search path would also work (you could do that from your own Podfile or as a workspace setting).

[alloy]

9544 is definitely the good long-term solution, in the interim there are many stopgap solutions. Yours would work, as would @rh389’s:

I guess adding a recursive user header search path would also work (you could do that from your own Podfile

Which can be done with a post_install hook https://guides.cocoapods.org/syntax/podfile.html#post_install.

[hitbear518]

Can anyone tell me how should I add a recursive user header search path for workaround before pr merged?