refactor: RN$Bridgeless as isFabric (#7043)

## Summary

Since Bridgeless by default `RN$Bridgeless` global property is injected
before any library code is executed. We don't support "Bridgeful" mode
anymore so we can depend on this variable to detect the architecture.

## Test plan

See that `console.log(globalThis.RN$Bridgeless);` yields `true` when
added in top-level scope of any file.

Author: tjzel

packages/react-native-reanimated/src/AnimatedPropsRegistry.ts

@@ -12,8 +12,10 @@ export function removeFromPropsRegistry(viewTag: number) {
   }
 }
 
+const IS_FABRIC = isFabric();
+
 function flush() {
-  if (__DEV__ && !isFabric()) {
+  if (__DEV__ && !IS_FABRIC) {
     throw new ReanimatedError(
       'AnimatedPropsRegistry is only available on Fabric.'
     );

packages/react-native-reanimated/src/PlatformChecker.ts

@@ -35,7 +35,7 @@ export function shouldBeUseWeb() {
 }
 
 export function isFabric() {
-  return !!(global as localGlobal)._IS_FABRIC;
+  return !!globalThis.RN$Bridgeless;
 }
 
 export function isWindowAvailable() {

packages/react-native-reanimated/src/ReanimatedModule/NativeReanimated.ts

@@ -32,6 +32,7 @@ import type {
 } from './reanimatedModuleProxy';
 
 const IS_WEB = shouldBeUseWeb();
+const IS_FABRIC = isFabric();
 
 export function createNativeReanimatedModule(): IReanimatedModule {
   return new NativeReanimatedModule();
@@ -73,7 +74,7 @@ class NativeReanimatedModule implements IReanimatedModule {
 See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#native-part-of-reanimated-doesnt-seem-to-be-initialized for more details.`
       );
     }
-    if (!isFabric() && !IS_WEB) {
+    if (!IS_FABRIC && !IS_WEB) {
       throw new ReanimatedError(
         'Reanimated 4 supports only the React Native New Architecture and web.'
       );
@@ -130,7 +131,7 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
     callback?: (result: T) => void
   ) {
     let shadowNodeWrapper;
-    if (isFabric()) {
+    if (IS_FABRIC) {
       shadowNodeWrapper = getShadowNodeWrapperFromRef(
         component as React.Component
       );

packages/react-native-reanimated/src/UpdateLayoutAnimations.ts

@@ -12,6 +12,8 @@ import {
 } from './core';
 import { isFabric, shouldBeUseWeb } from './PlatformChecker';
 
+const IS_FABRIC = isFabric();
+
 function createUpdateManager() {
   const animations: LayoutAnimationBatchItem[] = [];
   // When a stack is rerendered we reconfigure all the shared elements.
@@ -27,7 +29,7 @@ function createUpdateManager() {
         animations.push(batchItem);
       }
       if (animations.length + deferredAnimations.length === 1) {
-        isFabric() ? this.flush() : setImmediate(this.flush);
+        IS_FABRIC ? this.flush() : setImmediate(this.flush);
       }
     },
     flush(this: void) {

packages/react-native-reanimated/src/core.ts

@@ -34,6 +34,7 @@ export {
 
 const EDGE_TO_EDGE = isEdgeToEdge();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
+const IS_FABRIC = isFabric();
 
 /** @returns `true` in Reanimated 3, doesn't exist in Reanimated 2 or 1 */
 export const isReanimated3 = () => true;
@@ -53,7 +54,7 @@ export function getViewProp<T>(
   propName: string,
   component?: React.Component // required on Fabric
 ): Promise<T> {
-  if (isFabric() && !component) {
+  if (IS_FABRIC && !component) {
     throw new ReanimatedError(
       'Function `getViewProp` requires a component to be passed as an argument on Fabric.'
     );

packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.tsx

@@ -46,6 +46,7 @@ let id = 0;
 const IS_WEB = isWeb();
 const IS_JEST = isJest();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
+const IS_FABRIC = isFabric();
 
 if (IS_WEB) {
   configureWebLayoutAnimations();
@@ -98,7 +99,7 @@ export default class AnimatedComponent
       !entering ||
       getReducedMotionFromConfig(entering as CustomConfig) ||
       skipEntering ||
-      !isFabric()
+      !IS_FABRIC
     ) {
       return;
     }
@@ -184,7 +185,7 @@ export default class AnimatedComponent
         this._componentDOMRef as ReanimatedHTMLElement,
         LayoutAnimationType.EXITING
       );
-    } else if (exiting && !IS_WEB && !isFabric()) {
+    } else if (exiting && !IS_WEB && !IS_FABRIC) {
       const reduceMotionInExiting =
         'getReduceMotion' in exiting &&
         typeof exiting.getReduceMotion === 'function'
@@ -209,7 +210,7 @@ export default class AnimatedComponent
       if (this.props.animatedProps?.viewDescriptors) {
         this.props.animatedProps.viewDescriptors.remove(viewTag);
       }
-      if (isFabric()) {
+      if (IS_FABRIC) {
         removeFromPropsRegistry(viewTag);
       }
     }
@@ -404,7 +405,7 @@ export default class AnimatedComponent
       if (sharedTransitionTag) {
         this._configureSharedTransition();
       }
-      if (exiting && isFabric()) {
+      if (exiting && IS_FABRIC) {
         const reduceMotionInExiting =
           'getReduceMotion' in exiting &&
           typeof exiting.getReduceMotion === 'function'
@@ -420,7 +421,7 @@ export default class AnimatedComponent
       }
 
       const skipEntering = this.context?.current;
-      if (entering && !isFabric() && !skipEntering && !IS_WEB) {
+      if (entering && !IS_FABRIC && !skipEntering && !IS_WEB) {
         updateLayoutAnimations(
           tag,
           LayoutAnimationType.ENTERING,
@@ -468,7 +469,7 @@ export default class AnimatedComponent
 
     const skipEntering = this.context?.current;
     const nativeID =
-      skipEntering || !isFabric() ? undefined : `${this.reanimatedID}`;
+      skipEntering || !IS_FABRIC ? undefined : `${this.reanimatedID}`;
 
     const jestProps = IS_JEST
       ? {

packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts

@@ -3,7 +3,7 @@ import type { NativeModule } from 'react-native';
 import { NativeEventEmitter, Platform } from 'react-native';
 
 import type { StyleProps } from '../commonTypes';
-import { shouldBeUseWeb } from '../PlatformChecker';
+import { isFabric, shouldBeUseWeb } from '../PlatformChecker';
 import NativeReanimatedModule from '../specs/NativeReanimatedModule';
 import { runOnJS, runOnUIImmediately } from '../WorkletsResolver';
 import type {
@@ -147,7 +147,7 @@ type JSPropsUpdaterOptions =
 let JSPropsUpdater: JSPropsUpdaterOptions;
 if (SHOULD_BE_USE_WEB) {
   JSPropsUpdater = JSPropsUpdaterWeb;
-} else if (global._IS_FABRIC) {
+} else if (isFabric()) {
   JSPropsUpdater = JSPropsUpdaterFabric;
 } else {
   JSPropsUpdater = JSPropsUpdaterPaper;

packages/react-native-reanimated/src/css/component/AnimatedComponent.tsx

@@ -21,6 +21,7 @@ import { filterNonCSSStyleProps } from './utils';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 const IS_WEB = isWeb();
+const IS_FABRIC = isFabric();
 
 export type AnimatedComponentProps = Record<string, unknown> & {
   ref?: Ref<Component>;
@@ -98,7 +99,7 @@ export default class AnimatedComponent<
       viewTag = viewInfo.viewTag;
       viewName = viewInfo.viewName;
       viewConfig = viewInfo.viewConfig;
-      shadowNodeWrapper = isFabric()
+      shadowNodeWrapper = IS_FABRIC
         ? getShadowNodeWrapperFromRef(this, hostInstance)
         : null;
     }
@@ -155,7 +156,7 @@ export default class AnimatedComponent<
   componentDidMount() {
     this._updateStyles(this.props);
 
-    if (isFabric() || IS_WEB) {
+    if (IS_FABRIC || IS_WEB) {
       this._CSSManager = new CSSManager(this._getViewInfo());
       this._CSSManager?.attach(this._cssStyle);
     }

packages/react-native-reanimated/src/hook/useAnimatedRef.ts

@@ -16,6 +16,7 @@ import type { AnimatedRef, AnimatedRefOnUI } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
 
 const IS_WEB = isWeb();
+const IS_FABRIC = isFabric();
 
 interface MaybeScrollableComponent extends Component {
   getNativeScrollRef?: FlatList['getNativeScrollRef'];
@@ -28,9 +29,9 @@ interface MaybeScrollableComponent extends Component {
 }
 
 function getComponentOrScrollable(component: MaybeScrollableComponent) {
-  if (isFabric() && component.getNativeScrollRef) {
+  if (IS_FABRIC && component.getNativeScrollRef) {
     return component.getNativeScrollRef();
-  } else if (!isFabric() && component.getScrollableNode) {
+  } else if (!IS_FABRIC && component.getScrollableNode) {
     return component.getScrollableNode();
   }
   return component;
@@ -57,7 +58,7 @@ export function useAnimatedRef<
     ) => {
       // enters when ref is set by attaching to a component
       if (component) {
-        const getTagValueFunction = isFabric()
+        const getTagValueFunction = IS_FABRIC
           ? getShadowNodeWrapperFromRef
           : findNodeHandle;
 
@@ -70,13 +71,13 @@ export function useAnimatedRef<
         tag.value = getTagOrShadowNodeWrapper();
 
         // On Fabric we have to unwrap the tag from the shadow node wrapper
-        fun.getTag = isFabric()
+        fun.getTag = IS_FABRIC
           ? () => findNodeHandle(getComponentOrScrollable(component))
           : getTagOrShadowNodeWrapper;
 
         fun.current = component;
         // viewName is required only on iOS with Paper
-        if (Platform.OS === 'ios' && !isFabric()) {
+        if (Platform.OS === 'ios' && !IS_FABRIC) {
           viewName.value =
             (component as MaybeScrollableComponent)?.viewConfig
               ?.uiViewClassName || 'RCTView';

packages/react-native-reanimated/src/platform-specific/findHostInstance.ts

@@ -39,11 +39,13 @@ function findHostInstanceFastPath(maybeNativeRef: HostInstance | undefined) {
   return undefined;
 }
 
+const IS_FABRIC = isFabric();
+
 function resolveFindHostInstance_DEPRECATED() {
   if (findHostInstance_DEPRECATED !== undefined) {
     return;
   }
-  if (isFabric()) {
+  if (IS_FABRIC) {
     try {
       const ReactFabric = require('react-native/Libraries/Renderer/shims/ReactFabric');
       // Since RN 0.77 ReactFabric exports findHostInstance_DEPRECATED in default object so we're trying to
@@ -86,7 +88,7 @@ export function findHostInstance(
     a valid React ref.
   */
   return findHostInstance_DEPRECATED(
-    !isFabric() || (component as IAnimatedComponentInternal).hasAnimatedRef()
+    !IS_FABRIC || (component as IAnimatedComponentInternal).hasAnimatedRef()
       ? (component as IAnimatedComponentInternal)._componentRef
       : component
   );

packages/react-native-reanimated/src/privateGlobals.d.ts

@@ -23,7 +23,6 @@ import type { UpdatePropsManager } from './UpdateProps';
 declare global {
   var __DISALLOW_WORKLETS_IMPORT: boolean | undefined;
   var _REANIMATED_IS_REDUCED_MOTION: boolean | undefined;
-  var _IS_FABRIC: boolean | undefined;
   var _REANIMATED_VERSION_CPP: string | undefined;
   var _REANIMATED_VERSION_JS: string | undefined;
   var __reanimatedModuleProxy: ReanimatedModuleProxy | undefined;
@@ -88,4 +87,5 @@ declare global {
     shadowNodeWrapper: ShadowNodeWrapper,
     propName: string
   ) => string;
+  var RN$Bridgeless: boolean | undefined;
 }

packages/react-native-reanimated/src/publicGlobals.ts

@@ -20,4 +20,7 @@ declare global {
    * Reanimated UI runtime.
    */
   var _WORKLET_RUNTIME: ArrayBuffer;
+
+  /** @deprecated Don't use. */
+  var _IS_FABRIC: boolean | undefined;
 }

packages/react-native-worklets/Common/cpp/worklets/WorkletRuntime/RNRuntimeWorkletDecorator.cpp

@@ -7,6 +7,8 @@ void RNRuntimeWorkletDecorator::decorate(
     const std::shared_ptr<WorkletsModuleProxy> &workletsModuleProxy) {
   rnRuntime.global().setProperty(rnRuntime, "_WORKLET", false);
 
+  // TODO: Remove _IS_FABRIC sometime in the future
+  // react-native-screens 4.9.0 depends on it
 #ifdef RCT_NEW_ARCH_ENABLED
   constexpr auto isFabric = true;
 #else

packages/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletRuntimeDecorator.cpp

@@ -47,6 +47,8 @@ void WorkletRuntimeDecorator::decorate(
 
   rt.global().setProperty(rt, "_LABEL", jsi::String::createFromAscii(rt, name));
 
+  // TODO: Remove _IS_FABRIC sometime in the future
+  // react-native-screens 4.9.0 depends on it
 #ifdef RCT_NEW_ARCH_ENABLED
   constexpr auto isFabric = true;
 #else

packages/react-native-worklets/src/worklets/PlatformChecker.ts

@@ -35,7 +35,7 @@ export function shouldBeUseWeb() {
 }
 
 export function isFabric() {
-  return !!(global as localGlobal)._IS_FABRIC;
+  return !!globalThis.RN$Bridgeless;
 }
 
 export function isWindowAvailable() {

packages/react-native-worklets/src/worklets/privateGlobals.d.ts

@@ -38,4 +38,5 @@ declare global {
     runtime: WorkletRuntime,
     worklet: ShareableRef<() => void>
   ) => void;
+  var RN$Bridgeless: boolean | undefined;
 }