Yoga error building React Native from source

Question

I'm trying to build React Native from source to use some changes I made to its Camera Roll functions. I've followed the guide for how to do that, but I'm running into some downright arcane errors when trying to compile the whole thing.

Here's the whole pile:

[armeabi-v7a] Compile++ thumb: yogacore <= Utils.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGEnums.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGNodePrint.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGNode.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= Yoga.cpp

C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGEnums.cpp:228:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGEnums.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGEnums.o] Error 1
make.exe: *** Waiting for unfinished jobs....

[armeabi-v7a] StaticLibrary  : libreactnative.a

C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGNodePrint.cpp:227:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNodePrint.o.d: No such file or directory
 } // namespace facebook
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNodePrint.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/Utils.cpp:31:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Utils.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Utils.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/YGNode.cpp:668:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNode.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/YGNode.o] Error 1
C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/../ReactCommon/yoga/yoga/Yoga.cpp:3493:1: fatal error: opening dependency file C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Yoga.o.d: No such file or directory
 }
 ^
compilation terminated.
make.exe: *** [C:\Users\jon-g\OneDrive\Documents\GitHub\kulaapp\node_modules\react-native\ReactAndroid\build\tmp\buildReactNdkLib/local/armeabi-v7a/objs/yogacore/C_/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/__/ReactCommon/yoga/yoga/Yoga.o] Error 1

make.exe: Leaving directory `C:/Users/jon-g/OneDrive/Documents/GitHub/kulaapp/node_modules/react-native/ReactAndroid/src/main/jni/react/jni'
:ReactAndroid:buildReactNdkLib FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':ReactAndroid:buildReactNdkLib'.
> Process 'command 'C:\Users\jon-g\AppData\Local\Android\Ndk\android-ndk-r10e\ndk-build.cmd'' finished with non-zero exit value 2

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

None of this makes much sense to me. These file paths are entirely ridiculous.

Why is this happening? How do I get this to compile?

Answer 1

In Android, i fixed this error by doing the following:

First you need to make sure you setup your NDK enviroment correctly: https://facebook.github.io/react-native/docs/building-from-source.html

Make sure your environment variable ANDROID_NDK path and ndk.dir=C\:\\Users\\jb\\android-ndk\\android-ndk-r10e (local.properties) are configured correctly.

After that, in the Top level Gradle of your project add this line where you reference your React Native project location:

allprojects {
    repositories {
        buildDir = "G:\\ReactNativ\\MyReactNativeProjectApp\\etc.."
        mavenLocal()
        jcenter()
    }
}

Delete your build folders in the android folders, then do a clean build.

Answer 2

Append following in Podfile: (Ref: facebook/yoga#711)

def fix_cplusplus_header_compiler_error
    filepath = '../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[32].include? "&"
        contents.insert(26, "#ifdef __cplusplus")
        contents[36] = "#endif"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def fix_unused_yoga_headers
    filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'

    contents = []

    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close

    if contents[12].include? "Utils.h"
        contents.delete_at(15) # #import "YGNode.h"
        contents.delete_at(15) # #import "YGNodePrint.h"
        contents.delete_at(15) # #import "Yoga-internal.h"
        contents.delete_at(12) # #import "Utils.h"

        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def react_native_fix
    fix_cplusplus_header_compiler_error
    fix_unused_yoga_headers
end

post_install do |installer|
    react_native_fix
end

And modify package.json to fix fishhook error: (Ref: facebook/react-native#16039)

"scripts": {
    "postinstall": "sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m"
}

Related PR: facebook/react-native#18492.