Yoga.cpp issue with Xcode 14.3 (14E222b)

[nicolasdevienne]

Description

An issue occurs when we try to build project : "Yoga.cpp : Use of bitwise '|' with boolean operands".
When we double the '|', it works...

React Native Version

0.66.4

Output of npx react-native info

System:
OS: macOS 13.3
CPU: (8) arm64 Apple M1 Pro
Memory: 90.30 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 19.7.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.5.0 - /opt/homebrew/bin/npm
Watchman: 2023.02.27.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: 11.0.15 - /opt/homebrew/opt/openjdk@11/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.4 => 0.66.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Update Xcode with last version 14.3 (14E222b) and try to build project.

Snack, code example, screenshot, or link to a repository

[github-actions]

⚠️

Unsupported Version of React Native

ℹ️

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[boyphongsakorn]

yeah i same error as you
how to fix that?

double the '|', it works

[keisan1231]

double the '|', it works

Me too. Thanks

[kelset]

duplicate #36739

[sunnylqm]

@kelset this is NOT a dulicate issue.

This affects rn version < 0.69 with Xcode 14.3
52d8a79

[kelset]

I see, thanks for clarifying. But 0.69 is the lowest version supported, so is there a specific reason we should keep this one one if it's only for versions lower than 0.69?

[sunnylqm]

I have no objection to close this issue, but there should be a link or explanation for the correct fix provided. The use of "duplicate" made me think that issue was the correct fix, but I later found out it was not.

[xhirazi]

+1

double the | can solve the issue but what about he permanent solution?

[sunnylqm]

+1

double the | can solve the issue but what about he permanent solution?

this is the official fix applied on version>=0.69, see my comment and link above

[Abhishek2250]

I'm also getting this issue on xcode cloud CI using react-native version 0.68.4. How can I fix the issue there?
Any ideas?

Thanks

[awatt-cox]

We have a pipeline that reinstalls all of the dependencies when it builds the app. Does anyone have a post-install script that can fix the broken line of code so our pipeline can build successfully? We have a large, complex app using react-native 67.5, so "just update to 0.69" is not a quick change.

[sunnylqm]

1. install patch-package https://github.com/ds300/patch-package
2. Modify the source code like this commit 52d8a79
3. run npx patch-package react-native
4. commit your changes. Done.

[fabiendem]

1. install patch-package ds300/patch-package
2. Modify the source code like this commit 52d8a79
3. run npx patch-package react-native
4. commit your changes. Done.

Does that work even if you don't build React Native from the source?

[kthilagarajan]

1. install patch-package https://github.com/ds300/patch-package
2. Modify the source code like this commit 52d8a79
3. run npx patch-package react-native
4. commit your changes. Done.

I was in react-native 0.66.4. Xcode version 14.3.

This worked for me. Thankyou.

[shinnthantminn]

fix error

i am add || [Logical OR] operator in hadOverflow() fix this error

[DIOGO-MOTA]

remove this line of code

it worked for me

[dgdapp]

remove this line of code

it worked for me

Yes, it worked for me too!! thankk

[andreas-bergstrom]

Not sure removing that line is such a good move... Just use patch-package and apply the fix

[a7chax]

i am using react-native 0.64, i fix it by downgrading my xcode to version 14.2, facebook/yoga#1224 (comment)

[pvshum]

If you don't want to use patch-package, but rather add a singe line in post install you can just run:

sed -i.bo 's/    node->getLayout()\.hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

When I run this code, it unfortunately replaces node->getLayout().hadOverflow() | to 0| instead of adding one more pipe.

[yorickshan]

1. install patch-package https://github.com/ds300/patch-package
2. Modify the source code like this commit 52d8a79
3. run npx patch-package react-native
4. commit your changes. Done.

worked for me

[TatianaMatumoto]

remove this line of code

it worked for me

i don't know if this is a good solution, but that worked for me. Adding more '|' throws error on everything on my project.

Tranks for the solution!

[fondue-tech]

Another day another Yoga issue.
The patch file is the best solution right now, especially if you can't just migrate to another react native version.

[danmoz]

If you don't want to use patch-package, but rather add a singe line in post install you can just run:
sed -i.bo 's/ node->getLayout().hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

When I run this code, it unfortunately replaces node->getLayout().hadOverflow() | to 0| instead of adding one more pipe.

Try this instead:

sed -i -e 's/ \|$/ ||/g' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

[miallo]

If you don't want to use patch-package, but rather add a singe line in post install you can just run:

sed -i.bo 's/ node->getLayout().hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

When I run this code, it unfortunately replaces node->getLayout().hadOverflow() | to 0| instead of adding one more pipe.

Are you sure that you have the \ in front of the 0? \0 is referencing the matched search instead of the literal "0". Otherwise you can just type the same thing again that was in the search part of the command...

[fujikazu]

My error message was

The following build commands failed:
	CompileC /Users/*****/Library/Developer/Xcode/DerivedData/*****-app-efbyvyvzhapcgcaazbonipqeicgj/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Yoga.build/Objects-normal/x86_64/Yoga.o /Users/*****/Desktop/*****-app/*****-app-develop/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'Yoga' from project 'Pods')
(1 failure)

The following build commands failed:CompileC  (in target 'Yoga' from project 'Pods')

and I tried this command.

./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

sed -i.bo 's/    node->getLayout()\.hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

this worked for me .

[richarddrum]

If you don't want to use patch-package, but rather add a singe line in post install you can just run:

sed -i.bo 's/    node->getLayout()\.hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

When I run this code, it unfortunately replaces node->getLayout().hadOverflow() | to 0| instead of adding one more pipe.

You can try this instead:
sed -i.bo 's/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

[jerodji]

it works for me，add (int)

    node->setLayoutHadOverflow(
        (int)node->getLayout().hadOverflow |
        (int)currentRelativeChild->getLayout().hadOverflow);

[sufyansalim]

If you don't want to use patch-package, but rather add a singe line in post install you can just run:

sed -i.bo 's/    node->getLayout()\.hadOverflow() |$/\0|/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

When I run this code, it unfortunately replaces node->getLayout().hadOverflow() | to 0| instead of adding one more pipe.

You can try this instead: sed -i.bo 's/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

after adding this line i get the following build commands failed: CompileC /Users/myname/projects/projectname/ios/DerivedData/aido/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/arm64/json.o /Users/myname/projects/projectname/ios/Pods/RCT-Folly/folly/json.cpp normal arm64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'RCT-Folly' from project 'Pods') (1 failure)

[matthewbal]

You can try this instead: sed -i.bo 's/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

By the way, for our version of RN/Yoga, this sed command will also find replace 2 other occurrences which should not be changed and may cause subtle build issues.

We recommend using sed with a line number restriction so that it only changes the one line causing the issue, here is the completed command that we are using in our pipeline to make yoga work with node 16.

sed -i.bo '2289s/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

For us the line number was 2289 with react native 0.64.0, for other versions of RN/yoga it may be a different line number so make sure you check your xcode error and only replace the specific line number you have the issue on.

[sufyansalim]

i

You can try this instead: sed -i.bo 's/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

By the way, for our version of RN/Yoga, this sed command will also find replace 2 other occurrences which should not be changed and may cause subtle build issues.

We recommend using sed with a line number restriction so that it only changes the one line causing the issue, here is the completed command that we are using in our pipeline to make yoga work with node 16.

sed -i.bo '2289s/ node->getLayout()\.hadOverflow() |/ node->getLayout()\.hadOverflow() ||/' ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp

For us the line number was 2289 with react native 0.64.0, for other versions of RN/yoga it may be a different line number so make sure you check your xcode error and only replace the specific line number you have the issue on.

i even manually changed the line didnt work work me instead i get
after adding this line i get the following build commands failed: CompileC /Users/myname/projects/projectname/ios/DerivedData/aido/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/arm64/json.o /Users/myname/projects/projectname/ios/Pods/RCT-Folly/folly/json.cpp normal arm64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'RCT-Folly' from project 'Pods') (1 failure)

[moustaouiSalaheddine]

install patch-package
solution commit
in yoga/Yoga.cpp
change this
node->getLayout().hadOverflow() |
to this
node->getLayout().hadOverflow() ||

run patch-package to create a .patch file
npx patch-package react-native

after that commit and push your changes

[Symous]

use patch-packgae or modify the source code manually is too heavy, I provide another elegant way.

in ios/Podfile add find_add_replace method (I copy this method from the community to solve other XCode related issue before):

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

in pod_install section use find_and_replace to replace the related lines:

find_and_replace("../node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp",
  "node->getLayout().hadOverflow() |\n","node->getLayout().hadOverflow() ||\n")

execute pod install and run again.

[mochadwi]

use patch-packgae or modify the source code manually is too heavy, I provide another elegant way.

in ios/Podfile add find_add_replace method (I copy this method from the community to solve other XCode related issue before):

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

in pod_install section use find_and_replace to replace the related lines:

find_and_replace("../node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp",
  "node->getLayout().hadOverflow() |\n","node->getLayout().hadOverflow() ||\n")

execute pod install and run again.

unfortunately, when run in CI this is not possible. I tried to run through Xcode Cloud, it failed.

[andreas-bergstrom]

use patch-packgae or modify the source code manually is too heavy, I provide another elegant way.

in ios/Podfile add find_add_replace method (I copy this method from the community to solve other XCode related issue before):

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

in pod_install section use find_and_replace to replace the related lines:

find_and_replace("../node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp",
  "node->getLayout().hadOverflow() |\n","node->getLayout().hadOverflow() ||\n")

execute pod install and run again.

How is it "too heavy", it's just a few steps and a few min at most?

Shameless plug:
https://dev.to/andreasbergstrom/patch-package-the-essential-tool-for-managing-dependencies-in-both-modern-and-legacy-projects-4hnn

[Symous]

@andreas-bergstrom what I said "too heavy" is that use patch-package to apply the changes will generate extra but not "important and necessary" patch files.