[Fabric] Fix NativeComponentExample not rendering on Fabric

packages/rn-tester/NativeComponentExample/js/MyNativeView.js

@@ -29,53 +29,53 @@ 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;
+  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} />;
   }
   // 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]
   );
 }