React-native: [0.57.0] iOS TV 'AwesomeProject' init project fails to compile

[aamalric]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 2.84 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Default RN application fails to compile for iOS-TV

Reproducible Demo

Create a new application with latest RN 0.57, using:

react-native init AwesomeProject

Then use XCode and compile the -tvOS part of the project.

Fails with error:

AwesomeProject/node_modules/react-native/React/Base/RCTConvert.h:18:9: 'WebKit/WebKit.h' file not found

[findmory]

does anyone have a suggest or workaround for this?

[gregaou]

I face the same issue, so i'm also interessted for any workaround / solution

[findmory]

My solution was to comment out import WebKit from RCTConvert.h and also to remove the following React Views;

RCTWKWebView.h
RCTWKWebView.m
RCTWKWebViewManager.h
RCTWKWebViewManager.m

[gtebbutt]

Looks like this has been fixed in https://github.com/facebook/react-native/commit/d82b79870c7c5386b71bdaf6c5f3a7d4e6e85ecc

[f-roland]

if you need to build on CI, you can use this script

#!/usr/bin/env node

const { readFile, writeFile } = require("fs");
const { promisify, inspect } = require("util");
const { resolve } = require("path");

const readFileAsync = promisify(readFile);
const writeFileAsync = promisify(writeFile);

// for me, this file is in a `script` folder, change that depending on where you put this script
const REPO_ROOT = resolve(__dirname, "..");

const REACT_NATIVE_INSTALL_FOLDER = resolve(
  REPO_ROOT,
  "./node_modules/react-native"
);

const BREAK_LINE = "\n";

function replaceStringInFile(file, { lookUpString, correctString }) {
  return file
    .toString()
    .split(BREAK_LINE)
    .map(
      line =>
        line.includes(lookUpString)
          ? line.replace(lookUpString, correctString)
          : line
    )
    .join(BREAK_LINE);
}

async function processFile({ filePath, operation, args }) {
  const fullFilePath = resolve(REACT_NATIVE_INSTALL_FOLDER, filePath);
  console.log(`processing ${fullFilePath}`);
  console.log(`performing ${operation.name} with ${inspect(args)} \n`);

  try {
    const file = await readFileAsync(fullFilePath);
    const fileContent = file.toString();
    const updatedFile = operation(file, args);

    await writeFileAsync(fullFilePath, Buffer.from(updatedFile));
    console.log("done !\n");
    return;
  } catch (e) {
    console.error(`couldn't process ${filePath} - ${e.message}`);
    process.exit(1);
  }
}

const FILES_TO_PATCH = [
  {
    filePath: "./React/Base/RCTConvert.h",
    operation: replaceStringInFile,
    args: {
      lookUpString: "#import <WebKit/WebKit.h>",
      correctString: ""
    }
  }
];

async function run() {
  console.log("-| Patching react native |-");
  FILES_TO_PATCH.forEach(async fileToPatch => await processFile(fileToPatch));
}

run();

you can declare other files & other sort of patching on top of this, but this will do the job for the current issue. simply add a postinstall: "node path/to/script/patch.js" script in your package.json and you're good to go

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[kelset]

Closing as fixed by the commit linked above.