Integration With Existing iOS Project failed: 'CSSLayout/CSSLayout.h' file not found

[hitbear518]

Description

After upgrade to react-native@0.39, Integration With Existing Empty iOS Project failed, and old workaround "postinstall": "find ./node_modules/react-native \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:\"\\1\":g'" doesn't work now

react-native@0.38 works just fine

Reproduction

1. create an empty iOS project with swift
2. follow the official guide of integration with existing app
3. try run iOS app and then failed

Additional Information

• React Native version: 0.39
• Platform: iOS
• Operating System: MacOS Sierra 10.12.1
• CocoaPods: 1.1.1

[hitbear518]

It seems there is a workaround in #9014 which is

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

but I really don't know how to set that config.

and it seems like the pr https://github.com/facebook/react-native/commit/6e216d20343fccbb7bf9853ffb06a0d2628e9fc5 won't be merged until 0.40

[joncursi]

I bumped into this same issue with the react-native-youtube library when trying to upgrade to 0.39.x. See davidohayon669/react-native-youtube#88

[notjosh]

I wrote a post_install function to handle this issue, along with #11502 (only tested on React Native 0.39.2)

# only for React Native ^0.39.[0-2] afaik
def patch_csslayout(installer)
  version = `node -p -e "require('#{REACT_NATIVE_PATH}/package.json').version"`

  unless version =~ /^0\.39\.[0-2]$/
    puts ">> Unsure if I should patch for CSSLayout on React Native #{version}. Skipping."
    return
  end

  puts ">> Patching for CSSLayout on React Native #{version}"

  # patch header files
  # https://github.com/facebook/react-native/issues/11272
  `find #{REACT_NATIVE_PATH} \\( -name *.h -o -name *.m \\) -print0 | xargs -0 sed -i '' -e 's:<CSSLayout/\\(.*\\)>:"\\1":g'`

  # exclude duplicate symbols
  # https://github.com/facebook/react-native/issues/11502
  installer.pods_project.targets.each do |target|
    next unless target.name == 'React'

    source_files = target.source_build_phase.files
    uniqs = source_files.uniq { |f| f.file_ref.path }
    (source_files - uniqs).each { |dup| source_files.delete(dup) }
  end
end

Use as follows:

post_install do |installer|
  patch_csslayout(installer)
end

Hope that helps unblock others on 0.39.2!

---

Also: I first tried the "add a header search path" version. It builds the library fine, but broken when building the Swift module/bridge. It might be fine for objc projects though, so here's the code if it's useful to anyone:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    next unless target.name == 'React'

    target.build_configurations.each do |config|
      xcconfig_path = config.base_configuration_reference.real_path

      # read from xcconfig to build_settings dictionary
      build_settings = Hash[*File.read(xcconfig_path).lines.map { |x|
        x.split(/\s*=\s*/, 2)
      }.flatten]

      # modify HEADER_SEARCH_PATHS
      path = "${PODS_ROOT}/../#{REACT_NATIVE_PATH}/ReactCommon/**"

      build_settings['HEADER_SEARCH_PATHS'] = '' unless build_settings['HEADER_SEARCH_PATHS']
      build_settings['HEADER_SEARCH_PATHS'].rstrip! << " #{path}" unless build_settings['HEADER_SEARCH_PATHS'].include?(path)

      # write build_settings dictionary to xcconfig
      File.open(xcconfig_path, 'w+') do |file|
        build_settings.each do |key, value|
          file.puts "#{key} = #{value}"
        end
      end
    end
  end
end

Then you can cat /Users/joshua/dev/work/Taxfix/taxfix-ios/Pods/Target\ Support\ Files/React/React.xcconfig to verify it's there afterward.

[robhogan]

At a glance (I'm not using pods in my current project), it looks like 7c91f89 undid some of #9544 and broke pod builds again for the same reason as 4e056e9 did - CSSLayout builds as part of the React framework in open-source/pods world, even after moving files to ReactCommon, and a framework shouldn't import its own internal headers using angle brackets. There was a hack/compromise to allow open-source to work while FB does its own thing internally, but that's been removed. cc @javache

[arthurnn]

FWIW CSSLayout was renamed on latest react-native 7f8c298