fix: make ForeignObject ordinary YogaLayoutableShadowNode (#2833)

# Summary

It does the same thing as #2802 without affecting the performance. 

## Test Plan

I've added a few more examples that works the same as on web.

Author: jakex7

apps/common/example/examples/ForeignObject.tsx

@@ -38,17 +38,86 @@ ForeignObjectExample.title = 'ForeignObject with centered Text';
 
 function ForeignObjectWithView() {
   return (
-    <Svg height="300" width="300" style={{backgroundColor: 'lightgray'}}>
-      <ForeignObject width={300} height={300}>
+    <Svg
+      height="300"
+      width="300"
+      style={{backgroundColor: 'lightgray'}}
+      viewBox="0 0 400 400">
+      <ForeignObject x={50} y={50} width={300} height={300}>
+        <View style={{width: '100%', height: '100%', backgroundColor: 'blue'}}>
+          <View
+            style={{
+              width: '50%',
+              height: '50%',
+              backgroundColor: 'red',
+            }}
+          />
+        </View>
+      </ForeignObject>
+      <ForeignObject x={150} y={150} width={100} height={100}>
         <View
-          style={{width: '100%', height: '100%', backgroundColor: 'blue'}}
-        />
+          style={{width: '100%', height: '100%', backgroundColor: 'red'}}
+          collapsable={false}>
+          <View
+            style={{
+              width: '50%',
+              height: '50%',
+              backgroundColor: 'blue',
+            }}
+          />
+        </View>
       </ForeignObject>
     </Svg>
   );
 }
 ForeignObjectWithView.title = 'ForeignObject with full size View';
 
+function ForeignObjectWithBigView() {
+  return (
+    <Svg
+      height="300"
+      width="300"
+      style={{backgroundColor: 'lightgray'}}
+      viewBox="0 0 600 600">
+      <ForeignObject width={600} height={600}>
+        <View style={{width: 600, height: 600, backgroundColor: 'blue'}}>
+          <View
+            style={{
+              width: 300,
+              height: 300,
+              backgroundColor: 'red',
+            }}
+          />
+        </View>
+      </ForeignObject>
+    </Svg>
+  );
+}
+ForeignObjectWithBigView.title = 'ForeignObject with big View';
+
+function ForeignObjectWithFlexView() {
+  return (
+    <Svg
+      height="300"
+      width="300"
+      style={{backgroundColor: 'lightgray'}}
+      viewBox="0 0 600 600">
+      <ForeignObject width={600} height={600}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'blue',
+            flexDirection: 'row',
+          }}>
+          <View style={{flex: 1 / 2, backgroundColor: 'red'}} />
+        </View>
+      </ForeignObject>
+    </Svg>
+  );
+}
+ForeignObjectWithFlexView.title = 'ForeignObject with flex View';
+
 const styles = StyleSheet.create({
   iconContainer: {
     width: 15,
@@ -75,6 +144,11 @@ const icon = (
     </ForeignObject>
   </Svg>
 );
-const samples = [ForeignObjectExample, ForeignObjectWithView];
+const samples = [
+  ForeignObjectExample,
+  ForeignObjectWithView,
+  ForeignObjectWithBigView,
+  ForeignObjectWithFlexView,
+];
 
 export {icon, samples};

common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h

@@ -7,17 +7,17 @@
 
 namespace facebook::react {
 
-template <const char *concreteComponentName, typename PropsT = ViewProps>
+template <const char *concreteComponentName, typename PropsT = ViewProps, typename ShadowNode = RNSVGLayoutableShadowNode>
 class RNSVGConcreteShadowNode : public ConcreteShadowNode<
                                     concreteComponentName,
-                                    RNSVGLayoutableShadowNode,
+                                    ShadowNode,
                                     PropsT,
                                     ViewEventEmitter,
                                     StateData> {
  public:
   using BaseShadowNode = ConcreteShadowNode<
       concreteComponentName,
-      RNSVGLayoutableShadowNode,
+      ShadowNode,
       PropsT,
       ViewEventEmitter,
       StateData>;

common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h

@@ -3,6 +3,7 @@
 #include <jsi/jsi.h>
 #include <react/renderer/components/rnsvg/EventEmitters.h>
 #include <react/renderer/components/rnsvg/Props.h>
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
 #include "RNSVGConcreteShadowNode.h"
 #include "RNSVGImageState.h"
 
@@ -114,7 +115,8 @@ JSI_EXPORT extern const char RNSVGForeignObjectComponentName[];
  */
 using RNSVGForeignObjectShadowNode = RNSVGConcreteShadowNode<
     RNSVGForeignObjectComponentName,
-    RNSVGForeignObjectProps>;
+    RNSVGForeignObjectProps,
+    YogaLayoutableShadowNode>;
 
 JSI_EXPORT extern const char RNSVGGroupComponentName[];