react-native 0.71.4 → 0.72.0-rc.0

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -13,24 +13,54 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
+import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
+function createAnimatedStyle(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const style = flattenStyle(inputStyle);
+  const animatedStyles: any = {};
+  for (const key in style) {
+    const value = style[key];
+    if (key === 'transform') {
+      animatedStyles[key] = new AnimatedTransform(value);
+    } else if (value instanceof AnimatedNode) {
+      animatedStyles[key] = value;
+    } else if (value && !Array.isArray(value) && typeof value === 'object') {
+      animatedStyles[key] = createAnimatedStyle(value);
+    }
+  }
+  return animatedStyles;
+}
+
+function createStyleWithAnimatedTransform(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(inputStyle) || ({}: {[string]: any});
+
+  if (style.transform) {
+    style = {
+      ...style,
+      transform: new AnimatedTransform(style.transform),
+    };
+  }
+  return style;
+}
+
 export default class AnimatedStyle extends AnimatedWithChildren {
+  _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    style = flattenStyle(style) || ({}: {[string]: any});
-    if (style.transform) {
-      style = {
-        ...style,
-        transform: new AnimatedTransform(style.transform),
-      };
+    if (Platform.OS === 'web') {
+      this._inputStyle = style;
+      this._style = createAnimatedStyle(style);
+    } else {
+      this._style = createStyleWithAnimatedTransform(style);
     }
-    this._style = style;
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
@@ -50,7 +80,11 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(): Object {
+  __getValue(): Object | Array<Object> {
+    if (Platform.OS === 'web') {
+      return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
+    }
+
     return this._walkStyleAndGetValues(this._style);
   }
 

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -68,7 +68,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __getNativeConfig(): any {
-    const transConfigs = [];
+    const transConfigs: Array<any> = [];
 
     this._transforms.forEach(transform => {
       for (const key in transform) {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -48,21 +48,18 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * this two-phases process is to deal with composite props such as
  * transform which can receive values from multiple parents.
  */
-function _flush(rootNode: AnimatedValue): void {
-  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
-     * delete this comment and run Flow. */
+export function flushValue(rootNode: AnimatedNode): void {
+  const leaves = new Set<{update: () => void, ...}>();
+  function findAnimatedStyles(node: AnimatedNode) {
+    // $FlowFixMe[prop-missing]
     if (typeof node.update === 'function') {
-      animatedStyles.add(node);
+      leaves.add((node: any));
     } else {
       node.__getChildren().forEach(findAnimatedStyles);
     }
   }
   findAnimatedStyles(rootNode);
-  // $FlowFixMe[prop-missing]
-  animatedStyles.forEach(animatedStyle => animatedStyle.update());
+  leaves.forEach(leaf => leaf.update());
 }
 
 /**
@@ -91,7 +88,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
   _animation: ?Animation;
   _tracking: ?AnimatedTracking;
 
-  // $FlowFixMe[missing-local-annot]
   constructor(value: number, config?: ?AnimatedValueConfig) {
     super();
     if (typeof value !== 'number') {
@@ -291,9 +287,9 @@ export default class AnimatedValue extends AnimatedWithChildren {
 
     this._value = value;
     if (flush) {
-      _flush(this);
+      flushValue(this);
     }
-    super.__callListeners(this.__getValue());
+    this.__callListeners(this.__getValue());
   }
 
   __getNativeConfig(): Object {

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -70,7 +70,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     }
   }
 
-  __getChildren(): Array<AnimatedNode> {
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
     return this._children;
   }
 

package/Libraries/Animated/useAnimatedProps.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import {isPublicInstance as isFabricPublicInstance} from '../Renderer/public/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -52,7 +53,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   //   2) Update `onUpdateRef`.
   //   3) Update listeners for `AnimatedEvent` props.
   //
-  // Ideally, each of these would be separat "effects" so that they are not
+  // Ideally, each of these would be separate "effects" so that they are not
   // unnecessarily re-run when irrelevant dependencies change. For example, we
   // should be able to hoist all `AnimatedEvent` props and only do #3 if either
   // the `AnimatedEvent` props change or `instance` changes.
@@ -183,7 +184,7 @@ function getEventTarget<TInstance>(instance: TInstance): TInstance {
 // $FlowFixMe[unclear-type] - Legacy instance assumptions.
 function isFabricInstance(instance: any): boolean {
   return (
-    hasFabricHandle(instance) ||
+    isFabricPublicInstance(instance) ||
     // Some components have a setNativeProps function but aren't a host component
     // such as lists like FlatList and SectionList. These should also use
     // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
@@ -192,13 +193,9 @@ function isFabricInstance(instance: any): boolean {
     // If these components end up using forwardRef then these hacks can go away
     // as instance would actually be the underlying host component and the above check
     // would be sufficient.
-    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
-    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
   );
 }
-
-// $FlowFixMe[unclear-type] - Legacy instance assumptions.
-function hasFabricHandle(instance: any): boolean {
-  // eslint-disable-next-line dot-notation
-  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null;
-}

package/Libraries/AppDelegate/RCTAppDelegate.h

@@ -24,7 +24,7 @@
  * @end
  * ```
  *
- * All the methods implemented by the RCTAppDelegate can be overriden by your AppDelegate if you need to provide a
+ * All the methods implemented by the RCTAppDelegate can be overridden 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.
@@ -100,13 +100,6 @@
 @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).

package/Libraries/AppDelegate/RCTAppDelegate.mm

@@ -6,23 +6,28 @@
  */
 
 #import "RCTAppDelegate.h"
-#import <React/RCTAppSetupUtils.h>
 #import <React/RCTRootView.h>
+#import "RCTAppSetupUtils.h"
 
 #if RCT_NEW_ARCH_ENABLED
 #import <React/CoreModulesPlugins.h>
 #import <React/RCTCxxBridgeDelegate.h>
 #import <React/RCTFabricSurfaceHostingProxyRootView.h>
+#import <React/RCTLegacyViewManagerInteropComponentView.h>
 #import <React/RCTSurfacePresenter.h>
 #import <React/RCTSurfacePresenterBridgeAdapter.h>
 #import <ReactCommon/RCTTurboModuleManager.h>
 #import <react/config/ReactNativeConfig.h>
+#import <react/renderer/runtimescheduler/RuntimeScheduler.h>
+#import <react/renderer/runtimescheduler/RuntimeSchedulerCallInvoker.h>
+#import "RCTLegacyInteropComponents.h"
 
 static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 
 @interface RCTAppDelegate () <RCTTurboModuleManagerDelegate, RCTCxxBridgeDelegate> {
   std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
   facebook::react::ContextContainer::Shared _contextContainer;
+  std::shared_ptr<facebook::react::RuntimeScheduler> _runtimeScheduler;
 }
 @end
 
@@ -30,41 +35,46 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 
 @implementation RCTAppDelegate
 
+#if RCT_NEW_ARCH_ENABLED
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
+    _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
+    _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
+  }
+  return self;
+}
+#endif
+
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
   BOOL enableTM = NO;
 #if RCT_NEW_ARCH_ENABLED
   enableTM = self.turboModuleEnabled;
 #endif
-
   RCTAppSetupPrepareApp(application, enableTM);
 
   if (!self.bridge) {
     self.bridge = [self createBridgeWithDelegate:self launchOptions:launchOptions];
   }
 #if RCT_NEW_ARCH_ENABLED
-  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
-  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
-  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
   self.bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:self.bridge
                                                                contextContainer:_contextContainer];
   self.bridge.surfacePresenter = self.bridgeAdapter.surfacePresenter;
+
+  [self unstable_registerLegacyComponents];
 #endif
 
   NSDictionary *initProps = [self prepareInitialProps];
   UIView *rootView = [self createRootViewWithBridge:self.bridge moduleName:self.moduleName initProps:initProps];
 
-  if (@available(iOS 13.0, *)) {
-    rootView.backgroundColor = [UIColor systemBackgroundColor];
-  } else {
-    rootView.backgroundColor = [UIColor whiteColor];
-  }
-
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [self createRootViewController];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+
   return YES;
 }
 
@@ -75,19 +85,14 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
   return nil;
 }
 
-- (BOOL)concurrentRootEnabled
-{
-  [NSException raise:@"concurrentRootEnabled not implemented"
-              format:@"Subclasses must implement a valid concurrentRootEnabled method"];
-  return true;
-}
-
 - (NSDictionary *)prepareInitialProps
 {
   NSMutableDictionary *initProps = self.initialProps ? [self.initialProps mutableCopy] : [NSMutableDictionary new];
 
 #ifdef RCT_NEW_ARCH_ENABLED
-  initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]);
+  // Hardcoding the Concurrent Root as it it not recommended to
+  // have the concurrentRoot turned off when Fabric is enabled.
+  initProps[kRNConcurrentRoot] = @([self fabricEnabled]);
 #endif
 
   return initProps;
@@ -106,7 +111,14 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 #if RCT_NEW_ARCH_ENABLED
   enableFabric = self.fabricEnabled;
 #endif
-  return RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
+  UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
+  if (@available(iOS 13.0, *)) {
+    rootView.backgroundColor = [UIColor systemBackgroundColor];
+  } else {
+    rootView.backgroundColor = [UIColor whiteColor];
+  }
+
+  return rootView;
 }
 
 - (UIViewController *)createRootViewController
@@ -116,13 +128,16 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 
 #if RCT_NEW_ARCH_ENABLED
 #pragma mark - RCTCxxBridgeDelegate
-
 - (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
 {
-  self.turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
-                                                                 delegate:self
-                                                                jsInvoker:bridge.jsCallInvoker];
-  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
+  _runtimeScheduler = _runtimeScheduler =
+      std::make_shared<facebook::react::RuntimeScheduler>(RCTRuntimeExecutorFromBridge(bridge));
+  std::shared_ptr<facebook::react::CallInvoker> callInvoker =
+      std::make_shared<facebook::react::RuntimeSchedulerCallInvoker>(_runtimeScheduler);
+  self.turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge delegate:self jsInvoker:callInvoker];
+  _contextContainer->erase("RuntimeScheduler");
+  _contextContainer->insert("RuntimeScheduler", _runtimeScheduler);
+  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager, _runtimeScheduler);
 }
 
 #pragma mark RCTTurboModuleManagerDelegate
@@ -162,6 +177,15 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
   return YES;
 }
 
+#pragma mark - New Arch Utilities
+
+- (void)unstable_registerLegacyComponents
+{
+  for (NSString *legacyComponent in [RCTLegacyInteropComponents legacyInteropComponents]) {
+    [RCTLegacyViewManagerInteropComponentView supportLegacyViewManagerWithName:legacyComponent];
+  }
+}
+
 #endif
 
 @end

package/{React/AppSetup → Libraries/AppDelegate}/RCTAppSetupUtils.h

@@ -31,11 +31,17 @@
 #endif
 
 #if RCT_NEW_ARCH_ENABLED
+// Forward declaration to decrease compilation coupling
+namespace facebook::react {
+class RuntimeScheduler;
+}
+
 RCT_EXTERN id<RCTTurboModule> RCTAppSetupDefaultModuleFromClass(Class moduleClass);
 
 std::unique_ptr<facebook::react::JSExecutorFactory> RCTAppSetupDefaultJsExecutorFactory(
     RCTBridge *bridge,
-    RCTTurboModuleManager *turboModuleManager);
+    RCTTurboModuleManager *turboModuleManager,
+    std::shared_ptr<facebook::react::RuntimeScheduler> const &runtimeScheduler);
 #endif
 
 #endif // __cplusplus

package/{React/AppSetup → Libraries/AppDelegate}/RCTAppSetupUtils.mm

@@ -21,6 +21,8 @@
 
 // Fabric
 #import <React/RCTFabricSurfaceHostingProxyRootView.h>
+#import <react/renderer/runtimescheduler/RuntimeScheduler.h>
+#import <react/renderer/runtimescheduler/RuntimeSchedulerBinding.h>
 #endif
 
 #ifdef FB_SONARKIT_ENABLED
@@ -96,7 +98,8 @@ id<RCTTurboModule> RCTAppSetupDefaultModuleFromClass(Class moduleClass)
 
 std::unique_ptr<facebook::react::JSExecutorFactory> RCTAppSetupDefaultJsExecutorFactory(
     RCTBridge *bridge,
-    RCTTurboModuleManager *turboModuleManager)
+    RCTTurboModuleManager *turboModuleManager,
+    std::shared_ptr<facebook::react::RuntimeScheduler> const &runtimeScheduler)
 {
   // Necessary to allow NativeModules to lookup TurboModules
   [bridge setRCTTurboModuleRegistry:turboModuleManager];
@@ -118,14 +121,18 @@ std::unique_ptr<facebook::react::JSExecutorFactory> RCTAppSetupDefaultJsExecutor
 #else
   return std::make_unique<facebook::react::JSCExecutorFactory>(
 #endif
-      facebook::react::RCTJSIExecutorRuntimeInstaller([turboModuleManager, bridge](facebook::jsi::Runtime &runtime) {
-        if (!bridge || !turboModuleManager) {
-          return;
-        }
-        facebook::react::RuntimeExecutor syncRuntimeExecutor =
-            [&](std::function<void(facebook::jsi::Runtime & runtime_)> &&callback) { callback(runtime); };
-        [turboModuleManager installJSBindingWithRuntimeExecutor:syncRuntimeExecutor];
-      }));
+      facebook::react::RCTJSIExecutorRuntimeInstaller(
+          [turboModuleManager, bridge, runtimeScheduler](facebook::jsi::Runtime &runtime) {
+            if (!bridge || !turboModuleManager) {
+              return;
+            }
+            if (runtimeScheduler) {
+              facebook::react::RuntimeSchedulerBinding::createAndInstallIfNeeded(runtime, runtimeScheduler);
+            }
+            facebook::react::RuntimeExecutor syncRuntimeExecutor =
+                [&](std::function<void(facebook::jsi::Runtime & runtime_)> &&callback) { callback(runtime); };
+            [turboModuleManager installJSBindingWithRuntimeExecutor:syncRuntimeExecutor];
+          }));
 }
 
 #endif

package/{React/Base/RCTWeakProxy.h → Libraries/AppDelegate/RCTLegacyInteropComponents.h}

@@ -7,10 +7,12 @@
 
 #import <Foundation/Foundation.h>
 
-@interface RCTWeakProxy : NSObject
+NS_ASSUME_NONNULL_BEGIN
 
-@property (nonatomic, weak, readonly) id target;
+@interface RCTLegacyInteropComponents : NSObject
 
-+ (instancetype)weakProxyWithTarget:(id)target;
++ (NSArray<NSString *> *)legacyInteropComponents;
 
 @end
+
+NS_ASSUME_NONNULL_END

package/{React/Views/RCTSliderManager.h → Libraries/AppDelegate/RCTLegacyInteropComponents.mm}

@@ -5,8 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import <React/RCTViewManager.h>
+#import "RCTLegacyInteropComponents.h"
 
-@interface RCTSliderManager : RCTViewManager
+@implementation RCTLegacyInteropComponents
+
++ (NSArray<NSString *> *)legacyInteropComponents
+{
+  return @[];
+}
 
 @end

package/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -16,14 +16,17 @@ else
   source[:tag] = "v#{version}"
 end
 
-folly_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1'
+folly_flags = ' -DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1'
 folly_compiler_flags = folly_flags + ' ' + '-Wno-comma -Wno-shorten-64-to-32'
 
-new_arch_enabled_flag="RCT_NEW_ARCH_ENABLED"
-is_new_arch_enabled = ENV[new_arch_enabled_flag] == "1"
-other_cflags = "$(inherited) -DRN_FABRIC_ENABLED " + folly_flags + (is_new_arch_enabled ? " -D"+"RCT_NEW_ARCH_ENABLED" : "")
+is_new_arch_enabled = ENV["RCT_NEW_ARCH_ENABLED"] == "1"
+new_arch_enabled_flag = (is_new_arch_enabled ? " -DRCT_NEW_ARCH_ENABLED" : "")
+is_fabric_enabled = is_new_arch_enabled || ENV["RCT_FABRIC_ENABLED"]
+fabric_flag = (is_fabric_enabled ? " -DRN_FABRIC_ENABLED" : "")
+other_cflags = "$(inherited)" + folly_flags + new_arch_enabled_flag + fabric_flag
 
 use_hermes = ENV['USE_HERMES'] == '1'
+use_frameworks = ENV['USE_FRAMEWORKS'] != nil
 
 header_search_paths = [
   "$(PODS_TARGET_SRCROOT)/ReactCommon",
@@ -37,6 +40,13 @@ header_search_paths = [
 ].concat(use_hermes ? [
   "$(PODS_ROOT)/Headers/Public/React-hermes",
   "$(PODS_ROOT)/Headers/Public/hermes-engine"
+] : []).concat(use_frameworks ? [
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers/",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-NativeModulesApple/React_NativeModulesApple.framework/Headers",
+  "$(PODS_CONFIGURATION_BUILD_DIR)/React-RCTFabric/RCTFabric.framework/Headers/",
 ] : []).map{|p| "\"#{p}\""}.join(" ")
 
 Pod::Spec.new do |s|
@@ -46,7 +56,7 @@ Pod::Spec.new do |s|
   s.homepage               = "https://reactnative.dev/"
   s.documentation_url      = "https://reactnative.dev/docs/actionsheetios"
   s.license                = package["license"]
-  s.author                 = "Facebook, Inc. and its affiliates"
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
   s.platforms              = { :ios => "12.4" }
   s.source                 = source
   s.source_files            = "**/*.{c,h,m,mm,S,cpp}"
@@ -69,5 +79,16 @@ Pod::Spec.new do |s|
   if is_new_arch_enabled
     s.dependency "React-RCTFabric"
     s.dependency "React-graphics"
+
+    s.script_phases = {
+      :name => "Generate Legacy Components Interop",
+      :script => "
+. ${PODS_ROOT}/../.xcode.env
+${NODE_BINARY} ${REACT_NATIVE_PATH}/scripts/codegen/generate-legacy-interop-components.js -p #{ENV['APP_PATH']} -o ${REACT_NATIVE_PATH}/Libraries/AppDelegate
+      ",
+      :execution_position => :before_compile,
+      :input_files => ["#{ENV['APP_PATH']}/react-native.config.js"],
+      :output_files => ["${REACT_NATIVE_PATH}/Libraries/AppDelegate/RCTLegacyInteropComponents.mm"],
+    }
   end
 end

package/Libraries/BatchedBridge/MessageQueue.js

@@ -207,7 +207,7 @@ class MessageQueue {
           });
           warnOnce(
             'excessive-number-of-pending-callbacks',
-            `Please report: Excessive number of pending callbacks: ${
+            `Excessive number of pending callbacks: ${
               this._successCallbacks.size
             }. Some pending callbacks that might have leaked by never being called from native code: ${stringifySafe(
               info,
@@ -381,6 +381,7 @@ class MessageQueue {
     return (
       // $FlowFixMe[cannot-resolve-name]
       typeof DebuggerInternal !== 'undefined' &&
+      // $FlowFixMe[cannot-resolve-name]
       DebuggerInternal.shouldPauseOnThrow === true
     );
   }

package/Libraries/BatchedBridge/NativeModules.d.ts

@@ -8,7 +8,7 @@
  */
 
 /**
- * Interface for NativeModules which allows to augment NativeModules with type informations.
+ * Interface for NativeModules which allows to augment NativeModules with type information.
  * See react-native-sensor-manager for example.
  */
 interface NativeModulesStatic {

package/Libraries/BatchedBridge/NativeModules.js

@@ -134,6 +134,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       const onSuccess: ?(mixed) => void = hasSuccessCallback ? lastArg : null;
       // $FlowFixMe[incompatible-type]
       const onFail: ?(mixed) => void = hasErrorCallback ? secondLastArg : null;
+      // $FlowFixMe[unsafe-addition]
       const callbackCount = hasSuccessCallback + hasErrorCallback;
       const newArgs = args.slice(0, args.length - callbackCount);
       if (type === 'sync') {

package/Libraries/Blob/Blob.js

@@ -98,6 +98,10 @@ class Blob {
           // $FlowFixMe[reassign-const]
           end = this.size + end;
         }
+        if (end > this.size) {
+          // $FlowFixMe[reassign-const]
+          end = this.size;
+        }
         size = end - start;
       }
     }
@@ -105,6 +109,12 @@ class Blob {
       blobId: this.data.blobId,
       offset,
       size,
+      /* Since `blob.slice()` creates a new view onto the same binary
+       * data as the original blob, we should re-use the same collector
+       * object so that the underlying resource gets deallocated when
+       * the last view into the data is released, not the first.
+       */
+      __collector: this.data.__collector,
     });
   }
 

package/Libraries/Blob/FileReader.js

@@ -11,6 +11,7 @@
 import type Blob from './Blob';
 
 import NativeFileReaderModule from './NativeFileReaderModule';
+import {toByteArray} from 'base64-js';
 
 const EventTarget = require('event-target-shim');
 
@@ -74,8 +75,35 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
     }
   }
 
-  readAsArrayBuffer(): any {
-    throw new Error('FileReader.readAsArrayBuffer is not implemented');
+  readAsArrayBuffer(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+
+        const base64 = text.split(',')[1];
+        const typedArray = toByteArray(base64);
+
+        this._result = typedArray.buffer;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
   }
 
   readAsDataURL(blob: ?Blob): void {