diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js index 49cb3689eab522..0dc5da0c3179d6 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js +++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js @@ -29,53 +29,53 @@ const colors = [ export default function MyNativeView(props: {}): React.Node { const ref = useRef | 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(false); + const callbackRef = (ref: React.ElementRef | 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 ; } // macOS] - // [macOS return ( - {isFabric && ( - <> - -