react-native 0.70.3 → 0.71.0-rc.0

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -12,14 +12,14 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const ReactNative = require('../../Renderer/shims/ReactNative');
-const {AnimatedEvent} = require('../AnimatedEvent');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedStyle = require('./AnimatedStyle');
-const invariant = require('invariant');
-
-class AnimatedProps extends AnimatedNode {
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {AnimatedEvent} from '../AnimatedEvent';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedStyle from './AnimatedStyle';
+import invariant from 'invariant';
+
+export default class AnimatedProps extends AnimatedNode {
   _props: Object;
   _animatedView: any;
   _callback: () => void;
@@ -36,22 +36,12 @@ class AnimatedProps extends AnimatedNode {
     this._callback = callback;
   }
 
-  __getValue(initialProps: ?Object): Object {
+  __getValue(): Object {
     const props: {[string]: any | ((...args: any) => void)} = {};
     for (const key in this._props) {
       const value = this._props[key];
       if (value instanceof AnimatedNode) {
-        // During initial render we want to use the initial value of both natively and non-natively
-        // driven nodes. On subsequent renders, we cannot use the value of natively driven nodes
-        // as they may not be up to date, so we use the initial value to ensure that values of
-        // native animated nodes do not impact rerenders.
-        if (value instanceof AnimatedStyle) {
-          props[key] = value.__getValue(initialProps?.style);
-        } else if (!initialProps || !value.__isNative) {
-          props[key] = value.__getValue();
-        } else if (initialProps.hasOwnProperty(key)) {
-          props[key] = initialProps[key];
-        }
+        props[key] = value.__getValue();
       } else if (value instanceof AnimatedEvent) {
         props[key] = value.__getHandler();
       } else {
@@ -132,9 +122,7 @@ class AnimatedProps extends AnimatedNode {
 
   __connectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = ReactNative.findNodeHandle(
-      this._animatedView,
-    );
+    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',
@@ -147,9 +135,7 @@ class AnimatedProps extends AnimatedNode {
 
   __disconnectAnimatedView(): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag: ?number = ReactNative.findNodeHandle(
-      this._animatedView,
-    );
+    const nativeViewTag: ?number = findNodeHandle(this._animatedView);
     invariant(
       nativeViewTag != null,
       'Unable to locate attached view in the native tree',
@@ -185,5 +171,3 @@ class AnimatedProps extends AnimatedNode {
     };
   }
 }
-
-module.exports = AnimatedProps;

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,13 +12,13 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const flattenStyle = require('../../StyleSheet/flattenStyle');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedTransform = require('./AnimatedTransform');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import flattenStyle from '../../StyleSheet/flattenStyle';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedTransform from './AnimatedTransform';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
-class AnimatedStyle extends AnimatedWithChildren {
+export default class AnimatedStyle extends AnimatedWithChildren {
   _style: Object;
 
   constructor(style: any) {
@@ -34,23 +34,15 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style: any, initialStyle: ?Object) {
+  _walkStyleAndGetValues(style: any): {[string]: any | {...}} {
     const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];
       if (value instanceof AnimatedNode) {
-        // During initial render we want to use the initial value of both natively and non-natively
-        // driven nodes. On subsequent renders, we cannot use the value of natively driven nodes
-        // as they may not be up to date, so we use the initial value to ensure that values of
-        // native animated nodes do not impact rerenders.
-        if (!initialStyle || !value.__isNative) {
-          updatedStyle[key] = value.__getValue();
-        } else if (initialStyle.hasOwnProperty(key)) {
-          updatedStyle[key] = initialStyle[key];
-        }
+        updatedStyle[key] = value.__getValue();
       } else if (value && !Array.isArray(value) && typeof value === 'object') {
         // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetValues(value, initialStyle);
+        updatedStyle[key] = this._walkStyleAndGetValues(value);
       } else {
         updatedStyle[key] = value;
       }
@@ -58,12 +50,12 @@ class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(initialStyle: ?Object): Object {
-    return this._walkStyleAndGetValues(this._style, initialStyle);
+  __getValue(): Object {
+    return this._walkStyleAndGetValues(this._style);
   }
 
   // Recursively get animated values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetAnimatedValues(style: any) {
+  _walkStyleAndGetAnimatedValues(style: any): {[string]: any | {...}} {
     const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];
@@ -128,5 +120,3 @@ class AnimatedStyle extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedStyle;

package/Libraries/Animated/nodes/AnimatedSubtraction.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
-
-import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {InterpolationConfigType} from './AnimatedInterpolation';
+import type AnimatedNode from './AnimatedNode';
 
-class AnimatedSubtraction extends AnimatedWithChildren {
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
+
+export default class AnimatedSubtraction extends AnimatedWithChildren {
   _a: AnimatedNode;
   _b: AnimatedNode;
 
@@ -62,5 +62,3 @@ class AnimatedSubtraction extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedSubtraction;

package/Libraries/Animated/nodes/AnimatedTracking.js

@@ -10,17 +10,14 @@
 
 'use strict';
 
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedNode = require('./AnimatedNode');
-const {
-  generateNewAnimationId,
-  shouldUseNativeDriver,
-} = require('../NativeAnimatedHelper');
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
+import type AnimatedValue from './AnimatedValue';
+
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
 
-class AnimatedTracking extends AnimatedNode {
+export default class AnimatedTracking extends AnimatedNode {
   _value: AnimatedValue;
   _parent: AnimatedNode;
   _callback: ?EndCallback;
@@ -40,7 +37,8 @@ class AnimatedTracking extends AnimatedNode {
     this._parent = parent;
     this._animationClass = animationClass;
     this._animationConfig = animationConfig;
-    this._useNativeDriver = shouldUseNativeDriver(animationConfig);
+    this._useNativeDriver =
+      NativeAnimatedHelper.shouldUseNativeDriver(animationConfig);
     this._callback = callback;
     this.__attach();
   }
@@ -93,12 +91,10 @@ class AnimatedTracking extends AnimatedNode {
     const animationConfig = animation.__getNativeAnimationConfig();
     return {
       type: 'tracking',
-      animationId: generateNewAnimationId(),
+      animationId: NativeAnimatedHelper.generateNewAnimationId(),
       animationConfig,
       toValue: this._parent.__getNativeTag(),
       value: this._value.__getNativeTag(),
     };
   }
 }
-
-module.exports = AnimatedTracking;

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -12,11 +12,11 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const AnimatedNode = require('./AnimatedNode');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedWithChildren from './AnimatedWithChildren';
 
-class AnimatedTransform extends AnimatedWithChildren {
+export default class AnimatedTransform extends AnimatedWithChildren {
   _transforms: $ReadOnlyArray<Object>;
 
   constructor(transforms: $ReadOnlyArray<Object>) {
@@ -37,34 +37,11 @@ class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __getValue(): $ReadOnlyArray<Object> {
-    return this._transforms.map(transform => {
-      const result: {[string]: any} = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getValue();
-        } else {
-          result[key] = value;
-        }
-      }
-      return result;
-    });
+    return this._get(animatedNode => animatedNode.__getValue());
   }
 
   __getAnimatedValue(): $ReadOnlyArray<Object> {
-    return this._transforms.map(transform => {
-      const result: {[string]: any} = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getAnimatedValue();
-        } else {
-          // All transform components needed to recompose matrix
-          result[key] = value;
-        }
-      }
-      return result;
-    });
+    return this._get(animatedNode => animatedNode.__getAnimatedValue());
   }
 
   __attach(): void {
@@ -118,6 +95,36 @@ class AnimatedTransform extends AnimatedWithChildren {
       transforms: transConfigs,
     };
   }
-}
 
-module.exports = AnimatedTransform;
+  _get(getter: AnimatedNode => any): $ReadOnlyArray<Object> {
+    return this._transforms.map(transform => {
+      const result: {[string]: any} = {};
+      for (const key in transform) {
+        const value = transform[key];
+        if (value instanceof AnimatedNode) {
+          result[key] = getter(value);
+        } else if (Array.isArray(value)) {
+          result[key] = value.map(element => {
+            if (element instanceof AnimatedNode) {
+              return getter(element);
+            } else {
+              return element;
+            }
+          });
+        } else if (typeof value === 'object') {
+          result[key] = {};
+          for (const [nestedKey, nestedValue] of Object.entries(value)) {
+            if (nestedValue instanceof AnimatedNode) {
+              result[key][nestedKey] = getter(nestedValue);
+            } else {
+              result[key][nestedKey] = nestedValue;
+            }
+          }
+        } else {
+          result[key] = value;
+        }
+      }
+      return result;
+    });
+  }
+}

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -10,16 +10,16 @@
 
 'use strict';
 
-const AnimatedInterpolation = require('./AnimatedInterpolation');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
-const InteractionManager = require('../../Interaction/InteractionManager');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-
-import type AnimatedNode from './AnimatedNode';
 import type Animation, {EndCallback} from '../animations/Animation';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
+import type AnimatedNode from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
+import InteractionManager from '../../Interaction/InteractionManager';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedInterpolation from './AnimatedInterpolation';
+import AnimatedWithChildren from './AnimatedWithChildren';
+
 export type AnimatedValueConfig = $ReadOnly<{
   useNativeDriver: boolean,
 }>;
@@ -49,7 +49,7 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * transform which can receive values from multiple parents.
  */
 function _flush(rootNode: AnimatedValue): void {
-  const animatedStyles = new Set();
+  const animatedStyles = new Set<AnimatedValue | AnimatedNode>();
   function findAnimatedStyles(node: AnimatedValue | AnimatedNode) {
     /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
      * suppresses an error found when Flow v0.68 was deployed. To see the error
@@ -84,13 +84,14 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  *
  * See https://reactnative.dev/docs/animatedvalue
  */
-class AnimatedValue extends AnimatedWithChildren {
+export default class AnimatedValue extends AnimatedWithChildren {
   _value: number;
   _startingValue: number;
   _offset: number;
   _animation: ?Animation;
   _tracking: ?AnimatedTracking;
 
+  // $FlowFixMe[missing-local-annot]
   constructor(value: number, config?: ?AnimatedValueConfig) {
     super();
     if (typeof value !== 'number') {
@@ -303,5 +304,3 @@ class AnimatedValue extends AnimatedWithChildren {
     };
   }
 }
-
-module.exports = AnimatedValue;

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -12,10 +12,9 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-const AnimatedValue = require('./AnimatedValue');
-const AnimatedWithChildren = require('./AnimatedWithChildren');
-
-const invariant = require('invariant');
+import AnimatedValue from './AnimatedValue';
+import AnimatedWithChildren from './AnimatedWithChildren';
+import invariant from 'invariant';
 
 export type AnimatedValueXYConfig = $ReadOnly<{
   useNativeDriver: boolean,
@@ -34,7 +33,7 @@ let _uniqueId = 1;
  *
  * See https://reactnative.dev/docs/animatedvaluexy
  */
-class AnimatedValueXY extends AnimatedWithChildren {
+export default class AnimatedValueXY extends AnimatedWithChildren {
   x: AnimatedValue;
   y: AnimatedValue;
   _listeners: {
@@ -249,5 +248,3 @@ class AnimatedValueXY extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 }
-
-module.exports = AnimatedValueXY;

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -11,10 +11,11 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
-const AnimatedNode = require('./AnimatedNode');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 
-class AnimatedWithChildren extends AnimatedNode {
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+
+export default class AnimatedWithChildren extends AnimatedNode {
   _children: Array<AnimatedNode>;
 
   constructor() {
@@ -85,5 +86,3 @@ class AnimatedWithChildren extends AnimatedNode {
     }
   }
 }
-
-module.exports = AnimatedWithChildren;

package/Libraries/Animated/useAnimatedProps.js

@@ -10,10 +10,10 @@
 
 'use strict';
 
-import AnimatedProps from './nodes/AnimatedProps';
-import {AnimatedEvent} from './AnimatedEvent';
 import useRefEffect from '../Utilities/useRefEffect';
+import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
+import AnimatedProps from './nodes/AnimatedProps';
 import {
   useCallback,
   useEffect,
@@ -21,7 +21,6 @@ import {
   useMemo,
   useReducer,
   useRef,
-  useState,
 } from 'react';
 
 type ReducedProps<TProps> = {
@@ -31,12 +30,10 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
-let animatedComponentNextId = 1;
-
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
-  const [, scheduleUpdate] = useReducer(count => count + 1, 0);
+  const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
   const onUpdateRef = useRef<?() => void>(null);
 
   // TODO: Only invalidate `node` if animated props or `style` change. In the
@@ -63,7 +60,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   // But there is no way to transparently compose three separate callback refs,
   // so we just combine them all into one for now.
   const refEffect = useCallback(
-    instance => {
+    (instance: TInstance) => {
       // NOTE: This may be called more often than necessary (e.g. when `props`
       // changes), but `setNativeView` already optimizes for that.
       node.setNativeView(instance);
@@ -141,16 +138,11 @@ function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
-  const [animatedComponentId] = useState(
-    () => `${animatedComponentNextId++}:animatedComponent`,
-  );
-
-  useLayoutEffect(() => {
-    NativeAnimatedHelper.API.setWaitingForIdentifier(animatedComponentId);
-  });
-
   useEffect(() => {
-    NativeAnimatedHelper.API.unsetWaitingForIdentifier(animatedComponentId);
+    // It is ok for multiple components to call `flushQueue` because it noops
+    // if the queue is empty. When multiple animated components are mounted at
+    // the same time. Only first component flushes the queue and the others will noop.
+    NativeAnimatedHelper.API.flushQueue();
   });
 
   useLayoutEffect(() => {

package/Libraries/Animated/useAnimatedValue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedValue(
+  initialValue: number,
+  config?: Animated.AnimatedConfig,
+): Animated.Value;

package/Libraries/Animated/useAnimatedValue.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {AnimatedValueConfig} from './nodes/AnimatedValue';
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedValue(
+  initialValue: number,
+  config?: ?AnimatedValueConfig,
+): Animated.Value {
+  const ref = useRef<null | Animated.Value>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+  return ref.current;
+}

package/Libraries/AppDelegate/RCTAppDelegate.h

@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <React/RCTBridge.h>
+#import <React/RCTBridgeDelegate.h>
+#import <UIKit/UIKit.h>
+
+#if RCT_NEW_ARCH_ENABLED
+// When the new architecture is enabled, the RCTAppDelegate imports some additional headers
+#import <React/RCTCxxBridgeDelegate.h>
+#import <React/RCTSurfacePresenterBridgeAdapter.h>
+#import <ReactCommon/RCTTurboModuleManager.h>
+
+#endif
+
+/**
+ * The RCTAppDelegate is an utility class that implements some base configurations for all the React Native apps.
+ * It is not mandatory to use it, but it could simplify your AppDelegate code.
+ *
+ * To use it, you just need to make your AppDelegate a subclass of RCTAppDelegate:
+ *
+ * ```objc
+ * #import <React/RCTAppDelegate.h>
+ * @interface AppDelegate: RCTAppDelegate
+ * @end
+ * ```
+ *
+ * All the methods implemented by the RCTAppDelegate can be overriden by your AppDelegate if you need to provide a
+ custom implementation.
+ * If you need to customize the default implementation, you can invoke `[super <method_name>]` and use the returned
+ object.
+ *
+ * Overridable methods
+ * Shared:
+ *   - (RCTBridge *)createBridgeWithDelegate:(id<RCTBridgeDelegate>)delegate launchOptions:(NSDictionary
+ *)launchOptions;
+ *   - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge moduleName:(NSString*)moduleName initProps:(NSDictionary
+ *)initProps;
+ *   - (UIViewController *)createRootViewController;
+ * New Architecture:
+ *   - (BOOL)concurrentRootEnabled
+ *   - (BOOL)turboModuleEnabled;
+ *   - (BOOL)fabricEnabled;
+ *   - (NSDictionary *)prepareInitialProps
+ *   - (Class)getModuleClassFromName:(const char *)name
+ *   - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
+ *   - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                     initParams:
+                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
+ *   - (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
+ */
+@interface RCTAppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+
+/// The window object, used to render the UViewControllers
+@property (nonatomic, strong) UIWindow *window;
+@property (nonatomic, strong) RCTBridge *bridge;
+@property (nonatomic, strong) NSString *moduleName;
+
+/**
+ * It creates a `RCTBridge` using a delegate and some launch options.
+ * By default, it is invoked passing `self` as a delegate.
+ * You can override this function to customize the logic that creates the RCTBridge
+ *
+ * @parameter: delegate - an object that implements the `RCTBridgeDelegate` protocol.
+ * @parameter: launchOptions - a dictionary with a set of options.
+ *
+ * @returns: a newly created instance of RCTBridge.
+ */
+- (RCTBridge *)createBridgeWithDelegate:(id<RCTBridgeDelegate>)delegate launchOptions:(NSDictionary *)launchOptions;
+
+/**
+ * It creates a `UIView` starting from a bridge, a module name and a set of initial properties.
+ * By default, it is invoked using the bridge created by `createBridgeWithDelegate:launchOptions` and
+ * the name in the `self.moduleName` variable.
+ * You can override this function to customize the logic that creates the Root View.
+ *
+ * @parameter: bridge - an instance of the `RCTBridge` object.
+ * @parameter: moduleName - the name of the app, used by Metro to resolve the module.
+ * @parameter: initProps - a set of initial properties.
+ *
+ * @returns: a UIView properly configured with a bridge for React Native.
+ */
+- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
+                          moduleName:(NSString *)moduleName
+                           initProps:(NSDictionary *)initProps;
+
+/**
+ * It creates the RootViewController.
+ * By default, it creates a new instance of a `UIViewController`.
+ * You can override it to provide your own initial ViewController.
+ *
+ * @return: an instance of `UIViewController`.
+ */
+- (UIViewController *)createRootViewController;
+
+@end
+
+#if RCT_NEW_ARCH_ENABLED
+/// Extension that makes the RCTAppDelegate conform to New Architecture delegates
+@interface RCTAppDelegate () <RCTTurboModuleManagerDelegate, RCTCxxBridgeDelegate>
+
+/// The TurboModule manager
+@property (nonatomic, strong) RCTTurboModuleManager *turboModuleManager;
+@property (nonatomic, strong) RCTSurfacePresenterBridgeAdapter *bridgeAdapter;
+
+/// This method controls whether the `concurrentRoot` feature of React18 is turned on or off.
+///
+/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
+/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
+/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
+- (BOOL)concurrentRootEnabled;
+
+/// This method controls whether the `turboModules` feature of the New Architecture is turned on or off.
+///
+/// @note: This is required to be rendering on Fabric (i.e. on the New Architecture).
+/// @return: `true` if the Turbo Native Module are enabled. Otherwise, it returns `false`.
+- (BOOL)turboModuleEnabled;
+
+/// This method controls whether the App will use the Fabric renderer of the New Architecture or not.
+///
+/// @return: `true` if the Fabric Renderer is enabled. Otherwise, it returns `false`.
+- (BOOL)fabricEnabled;
+
+@end
+#endif