react-native: Error : Use of undeclared identifier 'YGValue' when building iOS

Experiencing this with 0.69.0 release

So this has to do with case sensitive file systems. My drive says it isn’t, but i believe it was encrypted in the past. The temporary solution is to add this step to the build process, as mentioned : https://github.com/facebook/react-native/issues/33648

This really needs a fix tho, many hours lost by a lot of people.

rm -rf node_modules ios/Pods
yarn
sed -i -e "s/spec.module_name = 'yoga'/spec.module_name = 'Yoga'/g" node_modules/react-native/ReactCommon/yoga/Yoga.podspec
npx pod-install
expo run:ios

I missed your RCTBaseTextShadowView.m renaming!

It now compiles correctly with your 2 patches 🎉

I have the same problem but @mfik’s workaround is not working for me.

For some reason, the type error is fixed when I rename RCTInputAccessoryShadowView.m to RCTInputAccessoryShadowView.mm so Obj-C++ is used to compile it.

I had to change node_modules/react-native/Libraries/Text/React-RCTText.podspec so *.mm files are taken into account. After reinstalling pods, type error is fixed. I don’t have case-sensitive FS. I am currently investigating why Obj-C++ is able to correctly see types from yoga/Yoga.h types and Obj-C is not. Any ideas?

patches/react-native+0.69.0.patch:

diff --git a/node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.m b/node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.mm
similarity index 100%
rename from node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.m
rename to node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.mm
diff --git a/node_modules/react-native/Libraries/Text/React-RCTText.podspec b/node_modules/react-native/Libraries/Text/React-RCTText.podspec
index 793a8db..e324b03 100644
--- a/node_modules/react-native/Libraries/Text/React-RCTText.podspec
+++ b/node_modules/react-native/Libraries/Text/React-RCTText.podspec
@@ -26,7 +26,7 @@ Pod::Spec.new do |s|
   s.author                 = "Facebook, Inc. and its affiliates"
   s.platforms              = { :ios => "12.4" }
   s.source                 = source
-  s.source_files           = "**/*.{h,m}"
+  s.source_files           = "**/*.{h,m,mm}"
   s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"
   s.header_dir             = "RCTText"

diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.m b/node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.mm
similarity index 83%
rename from node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.m
rename to node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.mm
index 8322bfc..47d6b5a 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.m
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTInputAccessoryShadowView.mm
@@ -14,7 +14,7 @@ @implementation RCTInputAccessoryShadowView
 - (void)insertReactSubview:(RCTShadowView *)subview atIndex:(NSInteger)atIndex
 {
   [super insertReactSubview:subview atIndex:atIndex];
-  subview.width = (YGValue) { RCTScreenSize().width, YGUnitPoint };
+  subview.width = (YGValue) { static_cast<float>(RCTScreenSize().width), YGUnitPoint };
 }

 @end

I’ve added my changes to https://github.com/facebook/react-native/pull/34064

For completeness, I had to edit also react-native-safe-area-context:

diff --git a/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.m b/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.mm
similarity index 88%
rename from node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.m
rename to node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.mm
index 1597bc8..1394e33 100644
--- a/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.m
+++ b/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.mm
@@ -116,16 +116,16 @@ - (void)updateInsets
 
   if (mode == RNCSafeAreaViewModePadding) {
     [self extractEdges:_paddingMetaProps top:&top right:&right bottom:&bottom left:&left];
-    super.paddingTop = (YGValue){insetTop + top, YGUnitPoint};
-    super.paddingRight = (YGValue){insetRight + right, YGUnitPoint};
-    super.paddingBottom = (YGValue){insetBottom + bottom, YGUnitPoint};
-    super.paddingLeft = (YGValue){insetLeft + left, YGUnitPoint};
+    super.paddingTop = (YGValue){static_cast<float>(insetTop + top), YGUnitPoint};
+    super.paddingRight = (YGValue){static_cast<float>(insetRight + right), YGUnitPoint};
+    super.paddingBottom = (YGValue){static_cast<float>(insetBottom + bottom), YGUnitPoint};
+    super.paddingLeft = (YGValue){static_cast<float>(insetLeft + left), YGUnitPoint};
   } else if (mode == RNCSafeAreaViewModeMargin) {
     [self extractEdges:_marginMetaProps top:&top right:&right bottom:&bottom left:&left];
-    super.marginTop = (YGValue){insetTop + top, YGUnitPoint};
-    super.marginRight = (YGValue){insetRight + right, YGUnitPoint};
-    super.marginBottom = (YGValue){insetBottom + bottom, YGUnitPoint};
-    super.marginLeft = (YGValue){insetLeft + left, YGUnitPoint};
+    super.marginTop = (YGValue){static_cast<float>(insetTop + top), YGUnitPoint};
+    super.marginRight = (YGValue){static_cast<float>(insetRight + right), YGUnitPoint};
+    super.marginBottom = (YGValue){static_cast<float>(insetBottom + bottom), YGUnitPoint};
+    super.marginLeft = (YGValue){static_cast<float>(insetLeft + left), YGUnitPoint};
   }
 }
 

Thanks @ph4r05 this indeed makes the build move forward for me (case-insensitive FS as well).

But it fails a bit later with:

/Users/renchap/dev/project/node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.m:17:42: error: missing '#include "yoga/Yoga.h"'; 'YGNodeRef' must be declared before it is used
static void RCTInlineViewYogaNodeDirtied(YGNodeRef node)
                                         ^
In module 'React' imported from /Users/renchap/dev/project/node_modules/react-native/Libraries/Text/BaseText/RCTBaseTextShadowView.m:8:
/Users/renchap/dev/project/packages/mobile/ios/Pods/Headers/Public/Yoga/yoga/Yoga.h:34:24: note: declaration here is not visible
typedef struct YGNode* YGNodeRef;

Once this file has been renamed to RCTBaseTextShadowView.mm, it proceeds until:

/Users/renchap/dev/notos/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.m:25:3: error: missing '#include "yoga/YGValue.h"'; 'YGValue' must be declared before it is used
  YGValue _paddingMetaProps[META_PROP_COUNT];
  ^
In module 'React' imported from /Users/renchap/dev/notos/node_modules/react-native-safe-area-context/ios/RNCSafeAreaShadowView.h:1:
/Users/renchap/dev/notos/packages/mobile/ios/Pods/Headers/Public/Yoga/yoga/YGValue.h:35:3: note: declaration here is not visible
} YGValue;
  ^

It seems to be the same kind of error. Might it be that those .m files are included by libraries, but somehow are no longer correctly picked up by the build system?

This would explain why it does not happen on a newly created app, and I am hitting more of those than you.