From 93243b5fc581c45e06828c03d2053b06408ea68f Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Wed, 18 Jan 2023 14:24:33 -0800
Subject: [PATCH 1/3] Fix NativeComponentExample not rendering on Fabric

---
 .../NativeComponentExample/js/MyNativeView.js | 71 +++++++------------
 1 file changed, 26 insertions(+), 45 deletions(-)

diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index 49cb3689eab522..373e6d22f856ad 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -29,53 +29,34 @@ const colors = [
 export default function MyNativeView(props: {}): React.Node {
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const [opacity, setOpacity] = useState(1.0);
-  // [macOS Use this "hack" to only render this example if Fabric is enabled and allow CI to pass
-  // Fabric Detection
-  const isFabric =
-    !!(
-      // An internal transform mangles variables with leading "_" as private.
-      // $FlowFixMe
-      ref._internalInstanceHandle?.stateNode?.canonical
-    );
-  if (isFabric) {
-    return null;
-  }
-  // macOS]
-
-  // [macOS
   return (
     <View style={{flex: 1}}>
-      {isFabric && (
-        <>
-          <RNTMyNativeView ref={ref} style={{flex: 1}} opacity={opacity} />
-          <Button
-            title="Change Background"
-            onPress={() => {
-              if (ref.current) {
-                RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
-                  ref.current,
-                  colors[Math.floor(Math.random() * 5)],
-                );
-              }
-            }}
-          />
-          <Button
-            title="Set Opacity"
-            onPress={() => {
-              setOpacity(Math.random());
-            }}
-          />
-          <Button
-            title="Console.log Measure"
-            onPress={() => {
-              ref.current?.measure((x, y, width, height) => {
-                console.log(x, y, width, height);
-              });
-            }}
-          />
-        </>
-      )}
+      <RNTMyNativeView ref={ref} style={{flex: 1}} opacity={opacity} />
+      <Button
+        title="Change Background"
+        onPress={() => {
+          if (ref.current) {
+            RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
+              ref.current,
+              colors[Math.floor(Math.random() * 5)],
+            );
+          }
+        }}
+      />
+      <Button
+        title="Set Opacity"
+        onPress={() => {
+          setOpacity(Math.random());
+        }}
+      />
+      <Button
+        title="Console.log Measure"
+        onPress={() => {
+          ref.current?.measure((x, y, width, height) => {
+            console.log(x, y, width, height);
+          });
+        }}
+      />
     </View>
-    // macOS]
   );
 }

From da58b38937fcd1f272683d91e48275952bca9342 Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 19 Jan 2023 00:13:19 -0800
Subject: [PATCH 2/3] Add back fabric check and conditionally render the
 example

---
 .../NativeComponentExample/js/MyNativeView.js    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index 373e6d22f856ad..28887ca33a5011 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -29,6 +29,22 @@ const colors = [
 export default function MyNativeView(props: {}): React.Node {
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const [opacity, setOpacity] = useState(1.0);
+  const [isFabric, setIsFabric] = useState<boolean>(false);
+
+  const callbackRef = (ref: React.ElementRef<typeof View> | null): void => {
+    if (ref == null) {
+      return;
+    }
+    // Avoid dot notation because at Meta, private properties are obfuscated.
+    // $FlowFixMe[prop-missing]
+    const _internalInstanceHandler = ref['_internalInstanceHandle']; // eslint-disable-line dot-notation
+    setIsFabric(Boolean(_internalInstanceHandler?.stateNode?.canonical));
+  };
+
+  if (!isFabric) {
+    return <View ref={callbackRef} />
+  }
+
   return (
     <View style={{flex: 1}}>
       <RNTMyNativeView ref={ref} style={{flex: 1}} opacity={opacity} />

From b368abb5c8d7b5fba2821ac93a5911c6c1c3e73a Mon Sep 17 00:00:00 2001
From: Shawn Dempsey <shawndempsey@fb.com>
Date: Thu, 19 Jan 2023 00:21:06 -0800
Subject: [PATCH 3/3] Update macOS  tags & re-add comment

---
 .../rn-tester/NativeComponentExample/js/MyNativeView.js    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index 28887ca33a5011..0dc5da0c3179d6 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -29,8 +29,10 @@ const colors = [
 export default function MyNativeView(props: {}): React.Node {
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const [opacity, setOpacity] = useState(1.0);
-  const [isFabric, setIsFabric] = useState<boolean>(false);
 
+  // [macOS Use this "hack" to only render this example if Fabric is enabled and allow CI to pass
+  // Fabric Detection
+  const [isFabric, setIsFabric] = useState<boolean>(false);
   const callbackRef = (ref: React.ElementRef<typeof View> | null): void => {
     if (ref == null) {
       return;
@@ -42,8 +44,9 @@ export default function MyNativeView(props: {}): React.Node {
   };
 
   if (!isFabric) {
-    return <View ref={callbackRef} />
+    return <View ref={callbackRef} />;
   }
+  // macOS]
 
   return (
     <View style={{flex: 1}}>