React Native Xcode Bitwise OR with Boolean Error

Problem Statement

After updating Xcode to version 14.3, builds fail for React Native projects using the Yoga layout engine with the error:

Use of bitwise '|' with boolean operands

This error occurs in the Yoga library code and prevents successful iOS builds. The issue stems from stricter type checking in Xcode 14.3, which flags the use of | (bitwise OR) between boolean values as invalid syntax.

⚠️ Common troubleshooting steps like these won't resolve the issue:

• Clearing derived data and build cache
• Removing node_modules and reinstalling
• Reinstalling CocoaPods

Recommended Solutions

Update Yoga to Fixed Version (Recommended)

This issue was resolved in Yoga v1.19.0 (commit f174de7).

# Check if your project uses compatible Yoga version:
grep '"yoga"' node_modules/react-native/package.json

# Upgrade React Native if possible to get Yoga v1.19.0+
npm install react-native@latest

ℹ️ Verify the Yoga version in node_modules/react-native/ReactCommon/yoga/yoga/version.h - it should be 1.19.0 or higher.

Permanent Patch with patch-package (Alternative)

For projects that can't upgrade React Native, use patch-package to apply a fix:

1. Install patch-package:

npm install patch-package --save-dev

2. Create a postinstall script in package.json:

"scripts": {
  "postinstall": "patch-package"
}

3. Modify node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp:

   • Find lines containing | between boolean expressions
   • Replace each occurrence of | with || (logical OR)

   Example before fix:

if ((child->style.positionType() == positionType) |
    (child->style.positionType() == PositionType::Absolute)) {

After fix:

if ((child->style.positionType() == positionType) ||
    (child->style.positionType() == PositionType::Absolute)) {

4. Create permanent patch:

npx patch-package react-native

5. Commit changes to version control:

git add patches/react-native+*.patch
git commit -m "Patch Yoga for Xcode 14.3 compatibility"

Temporary Manual Fix (Quick Test Only)

For testing purposes only (changes are lost on npm install):

1. Open Yoga.cpp:

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

2. Replace all boolean | operations with ||:
   • Find: <expression> | <expression>
   • Replace: <expression> || <expression>

WARNING

This is temporary! Use patch-package for persistent fixes. Manual changes are overwritten by package reinstalls.

Technical Explanation

Xcode 14.3 introduced enhanced type safety that flags boolean-bitwise operations as errors. The original Yoga code used | which:

1. Is a bitwise operator intended for integers
2. Doesn't short-circuit like logical OR (||)
3. Converts booleans to integers (true→1, false→0)
4. Produces integer results rather than booleans

The fix uses logical OR (||) which:

• Maintains boolean context
• Short-circuits evaluation
• Keeps expression purity
• Matches intention of conditional checks

Prevention Strategies

1. Dependency Hygiene: Keep React Native updated
2. Patch Management:

   # After dependency changes
   npx patch-package

3. CI/CD Verification:

# Sample GitHub Action
jobs:
  build:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npx patch-package --check
      - run: xcodebuild build ...

Verification

Confirm successful builds by:

1. Cleaning Xcode project (Product → Clean Build Folder)
2. Building via CLI:

xcodebuild clean build -workspace ios/YourApp.xcworkspace -scheme YourApp

Using the recommended solutions should resolve the Xcode 14.3 build error while maintaining project stability.