react-native-tvos 0.74.5-0 → 0.75.2-0rc1

package/Libraries/AppDelegate/RCTRootViewFactory.mm

@@ -83,7 +83,7 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
 @end
 
-@interface RCTRootViewFactory () <RCTContextContainerHandling> {
+@interface RCTRootViewFactory () <RCTContextContainerHandling, RCTHostDelegate> {
   std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
   facebook::react::ContextContainer::Shared _contextContainer;
 }
@@ -95,7 +95,6 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 @end
 
 @implementation RCTRootViewFactory {
-  RCTHost *_reactHost;
   RCTRootViewFactoryConfiguration *_configuration;
   __weak id<RCTTurboModuleManagerDelegate> _turboModuleManagerDelegate;
 }
@@ -105,14 +104,19 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 {
   if (self = [super init]) {
     _configuration = configuration;
-    _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
-    _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
+    _contextContainer = std::make_shared<const facebook::react::ContextContainer>();
+    _reactNativeConfig = std::make_shared<const facebook::react::EmptyReactNativeConfig>();
     _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
     _turboModuleManagerDelegate = turboModuleManagerDelegate;
   }
   return self;
 }
 
+- (instancetype)initWithConfiguration:(RCTRootViewFactoryConfiguration *)configuration
+{
+  return [self initWithConfiguration:configuration andTurboModuleManagerDelegate:nil];
+}
+
 - (UIView *)viewWithModuleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties
 {
   return [self viewWithModuleName:moduleName initialProperties:initialProperties launchOptions:nil];
@@ -139,12 +143,14 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
     [self createReactHostIfNeeded:launchOptions];
 
-    RCTFabricSurface *surface = [_reactHost createSurfaceWithModuleName:moduleName initialProperties:initProps];
+    RCTFabricSurface *surface = [self.reactHost createSurfaceWithModuleName:moduleName initialProperties:initProps];
 
     RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView = [[RCTSurfaceHostingProxyRootView alloc]
         initWithSurface:surface
         sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
-
+#if !TARGET_OS_TV
+    surfaceHostingProxyRootView.backgroundColor = [UIColor systemBackgroundColor];
+#endif
     if (self->_configuration.customizeRootView != nil) {
       self->_configuration.customizeRootView(surfaceHostingProxyRootView);
     }
@@ -185,6 +191,26 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   return rootView;
 }
 
+#pragma mark - RCTHostDelegate
+
+- (void)hostDidStart:(RCTHost *)host
+{
+  if (self->_configuration.hostDidStartBlock) {
+    self->_configuration.hostDidStartBlock(host);
+  }
+}
+
+- (void)host:(RCTHost *)host
+    didReceiveJSErrorStack:(NSArray<NSDictionary<NSString *, id> *> *)stack
+                   message:(NSString *)message
+               exceptionId:(NSUInteger)exceptionId
+                   isFatal:(BOOL)isFatal
+{
+  if (self->_configuration.hostDidReceiveJSErrorStackBlock) {
+    self->_configuration.hostDidReceiveJSErrorStackBlock(host, stack, message, exceptionId, isFatal);
+  }
+}
+
 #pragma mark - RCTCxxBridgeDelegate
 - (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
 {
@@ -232,23 +258,29 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
 - (void)createReactHostIfNeeded:(NSDictionary *)launchOptions
 {
-  if (_reactHost) {
+  if (self.reactHost) {
     return;
   }
+  self.reactHost = [self createReactHost:launchOptions];
+}
 
+- (RCTHost *)createReactHost:(NSDictionary *)launchOptions
+{
   __weak __typeof(self) weakSelf = self;
-  _reactHost = [[RCTHost alloc] initWithBundleURLProvider:self->_configuration.bundleURLBlock
-                                             hostDelegate:nil
-                               turboModuleManagerDelegate:_turboModuleManagerDelegate
-                                         jsEngineProvider:^std::shared_ptr<facebook::react::JSRuntimeFactory>() {
-                                           return [weakSelf createJSRuntimeFactory];
-                                         }
-                                            launchOptions:launchOptions];
-  [_reactHost setBundleURLProvider:^NSURL *() {
+  RCTHost *reactHost =
+      [[RCTHost alloc] initWithBundleURLProvider:self->_configuration.bundleURLBlock
+                                    hostDelegate:self
+                      turboModuleManagerDelegate:_turboModuleManagerDelegate
+                                jsEngineProvider:^std::shared_ptr<facebook::react::JSRuntimeFactory>() {
+                                  return [weakSelf createJSRuntimeFactory];
+                                }
+                                   launchOptions:launchOptions];
+  [reactHost setBundleURLProvider:^NSURL *() {
     return [weakSelf bundleURL];
   }];
-  [_reactHost setContextContainerHandler:self];
-  [_reactHost start];
+  [reactHost setContextContainerHandler:self];
+  [reactHost start];
+  return reactHost;
 }
 
 - (std::shared_ptr<facebook::react::JSRuntimeFactory>)createJSRuntimeFactory
@@ -265,11 +297,38 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
 }
 
+- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
+{
+  if (_configuration.extraModulesForBridge != nil) {
+    return _configuration.extraModulesForBridge(bridge);
+  }
+  return nil;
+}
+
+- (NSDictionary<NSString *, Class> *)extraLazyModuleClassesForBridge:(RCTBridge *)bridge
+{
+  if (_configuration.extraLazyModuleClassesForBridge != nil) {
+    return _configuration.extraLazyModuleClassesForBridge(bridge);
+  }
+  return nil;
+}
+
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
+  if (_configuration.sourceURLForBridge != nil) {
+    return _configuration.sourceURLForBridge(bridge);
+  }
   return [self bundleURL];
 }
 
+- (BOOL)bridge:(RCTBridge *)bridge didNotFindModule:(NSString *)moduleName
+{
+  if (_configuration.bridgeDidNotFindModule != nil) {
+    return _configuration.bridgeDidNotFindModule(bridge, moduleName);
+  }
+  return NO;
+}
+
 - (NSURL *)bundleURL
 {
   return self->_configuration.bundleURLBlock();

package/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -21,7 +21,7 @@ folly_compiler_flags = folly_config[:compiler_flags]
 folly_version = folly_config[:version]
 
 is_new_arch_enabled = ENV["RCT_NEW_ARCH_ENABLED"] == "1"
-use_hermes =  ENV['USE_HERMES'] == nil || ENV['USE_HERMES'] == '1'
+use_hermes = ENV['USE_HERMES'] == nil || ENV['USE_HERMES'] == '1'
 
 new_arch_enabled_flag = (is_new_arch_enabled ? " -DRCT_NEW_ARCH_ENABLED" : "")
 is_fabric_enabled = true #is_new_arch_enabled || ENV["RCT_FABRIC_ENABLED"]
@@ -66,8 +66,6 @@ Pod::Spec.new do |s|
   }
   s.user_target_xcconfig   = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/Headers/Private/React-Core\""}
 
-  use_hermes = ENV['USE_HERMES'] == nil || ENV['USE_HERMES'] == "1"
-
   s.dependency "React-Core"
   s.dependency "RCT-Folly", folly_version
   s.dependency "RCTRequired"
@@ -76,7 +74,8 @@ Pod::Spec.new do |s|
   s.dependency "React-RCTImage"
   s.dependency "React-CoreModules"
   s.dependency "React-nativeconfig"
-  s.dependency "React-Codegen"
+  s.dependency "ReactCodegen"
+  s.dependency "React-defaultsnativemodule"
 
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
   add_dependency(s, "React-NativeModulesApple")

package/Libraries/BatchedBridge/MessageQueue.js

@@ -424,6 +424,7 @@ class MessageQueue {
           A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`,
         );
       }
+      // $FlowFixMe[invalid-computed-prop]
       if (!moduleMethods[method]) {
         invariant(
           false,

package/Libraries/Blob/RCTBlobCollector.mm

@@ -45,7 +45,10 @@ void RCTBlobCollector::install(RCTBlobManager *blobManager)
                 [blobManager](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) {
                   auto blobId = args[0].asString(rt).utf8(rt);
                   auto blobCollector = std::make_shared<RCTBlobCollector>(blobManager, blobId);
-                  return jsi::Object::createFromHostObject(rt, blobCollector);
+                  auto blobCollectorJsObject = jsi::Object::createFromHostObject(rt, blobCollector);
+                  blobCollectorJsObject.setExternalMemoryPressure(
+                      rt, [blobManager lengthOfBlobWithId:[NSString stringWithUTF8String:blobId.c_str()]]);
+                  return blobCollectorJsObject;
                 }));
       }
               queue:RCTJSThread];

package/Libraries/Blob/RCTBlobManager.h

@@ -18,6 +18,8 @@ RCT_EXTERN void RCTEnableBlobManagerProcessingQueue(BOOL enabled);
 
 - (void)store:(NSData *)data withId:(NSString *)blobId;
 
+- (NSUInteger)lengthOfBlobWithId:(NSString *)blobId;
+
 - (NSData *)resolve:(NSDictionary<NSString *, id> *)blob;
 
 - (NSData *)resolve:(NSString *)blobId offset:(NSInteger)offset size:(NSInteger)size;

package/Libraries/Blob/RCTBlobManager.mm

@@ -98,6 +98,12 @@ RCT_EXPORT_MODULE(BlobModule)
   _blobs[blobId] = data;
 }
 
+- (NSUInteger)lengthOfBlobWithId:(NSString *)blobId
+{
+  std::lock_guard<std::mutex> lock(_blobsMutex);
+  return _blobs[blobId].length;
+}
+
 - (NSData *)resolve:(NSDictionary<NSString *, id> *)blob
 {
   NSString *blobId = [RCTConvert NSString:blob[@"blobId"]];

package/Libraries/Blob/React-RCTBlob.podspec

@@ -25,7 +25,7 @@ header_search_paths = [
   "\"$(PODS_ROOT)/boost\"",
   "\"$(PODS_ROOT)/DoubleConversion\"",
   "\"$(PODS_ROOT)/fmt/include\"",
-  "\"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\"",
+  "\"${PODS_ROOT}/Headers/Public/ReactCodegen/react/renderer/components\"",
 ]
 
 Pod::Spec.new do |s|
@@ -55,7 +55,7 @@ Pod::Spec.new do |s|
   s.dependency "React-Core/RCTWebSocket"
   s.dependency "React-RCTNetwork"
 
-  add_dependency(s, "React-Codegen")
+  add_dependency(s, "ReactCodegen")
   add_dependency(s, "React-NativeModulesApple")
   add_dependency(s, "React-jsinspector", :framework_name => 'jsinspector_modern')
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])

package/Libraries/Components/Button.js

@@ -280,7 +280,13 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
+const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof Touchable>,
+> = React.forwardRef((props: ButtonProps, ref) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -345,8 +351,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
   );
   const formattedTitle =
     Platform.OS === 'android' ? title.toUpperCase() : title;
-  const Touchable =
-    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
   // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
   const _importantForAccessibility =
@@ -374,7 +378,8 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       testID={testID}
       disabled={disabled}
       onPress={onPress}
-      touchSoundDisabled={touchSoundDisabled}>
+      touchSoundDisabled={touchSoundDisabled}
+      ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>
           {formattedTitle}
@@ -382,7 +387,7 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       </View>
     </Touchable>
   );
-};
+});
 
 Button.displayName = 'Button';
 

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -119,7 +119,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 type State = {|
-  statusBarBackgroundColor: ColorValue,
+  drawerOpened: boolean,
 |};
 
 /**
@@ -168,7 +168,9 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
       React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
     >();
 
-  state: State = {statusBarBackgroundColor: null};
+  state: State = {
+    drawerOpened: false,
+  };
 
   render(): React.Node {
     const {
@@ -189,6 +191,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
             backgroundColor: drawerBackgroundColor,
           },
         ]}
+        pointerEvents={this.state.drawerOpened ? 'auto' : 'none'}
         collapsable={false}>
         {renderNavigationView()}
         {drawStatusBar && <View style={styles.drawerStatusBar} />}
@@ -245,12 +248,18 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
   };
 
   _onDrawerOpen = () => {
+    this.setState({
+      drawerOpened: true,
+    });
     if (this.props.onDrawerOpen) {
       this.props.onDrawerOpen();
     }
   };
 
   _onDrawerClose = () => {
+    this.setState({
+      drawerOpened: false,
+    });
     if (this.props.onDrawerClose) {
       this.props.onDrawerClose();
     }

package/Libraries/Components/Pressable/Pressable.js

@@ -217,13 +217,16 @@ type Props = $ReadOnly<{|
   'aria-label'?: ?string,
 |}>;
 
+type Instance = React.ElementRef<typeof View>;
+
 /**
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
  */
-/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- * LTI update could not be added via codemod */
-function Pressable(props: Props, forwardedRef): React.Node {
+function Pressable(
+  props: Props,
+  forwardedRef: React.RefSetter<Instance>,
+): React.Node {
   const {
     accessible,
     accessibilityState,
@@ -266,7 +269,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps
   } = props;
 
-  const viewRef = useRef<React.ElementRef<typeof View> | null>(null);
+  const viewRef = useRef<Instance | null>(null);
   const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
@@ -329,8 +332,18 @@ function Pressable(props: Props, forwardedRef): React.Node {
       delayPressIn: unstable_pressDelay,
       onHoverIn,
       onHoverOut,
-      onBlur,
-      onFocus,
+      onBlur(event: HWEvent): void {
+        shouldUpdatePressed && setFocused(false);
+        if (onBlur != null) {
+          onBlur(event);
+        }
+      },
+      onFocus(event: HWEvent): void {
+        shouldUpdatePressed && setFocused(true);
+        if (onFocus != null) {
+          onFocus(event);
+        }
+      },
       onLongPress,
       onPress,
       onPressIn(event: PressEvent): void {
@@ -403,7 +416,16 @@ function Pressable(props: Props, forwardedRef): React.Node {
         onLongPress && onLongPress(evt);
       }
     },
-    [focused, onBlur, onFocus, onLongPress, onPress, focusable, isTVSelectable, shouldUpdatePressed],
+    [
+      focused,
+      onBlur,
+      onFocus,
+      onLongPress,
+      onPress,
+      focusable,
+      isTVSelectable,
+      shouldUpdatePressed,
+    ],
   );
 
   React.useEffect(() => {

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,13 +23,17 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
+    maintainVisibleContentPosition: true,
     endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
     pagingEnabled: true,
     persistentScrollbar: true,
+    horizontal: true,
+    enableSyncOnScroll: true,
     scrollEnabled: true,
+    scrollEventThrottle: true,
     scrollPerfTag: true,
     sendMomentumEvents: true,
     showsHorizontalScrollIndicator: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -33,6 +33,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Dimensions from '../../Utilities/Dimensions';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
+import EventEmitter from '../../vendor/emitter/EventEmitter';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import View from '../View/View';
@@ -266,33 +267,6 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   canCancelContentTouches?: ?boolean,
-  /**
-   * When set, the scroll view will adjust the scroll position so that the first child that is
-   * currently visible and at or beyond `minIndexForVisible` will not change position. This is
-   * useful for lists that are loading content in both directions, e.g. a chat thread, where new
-   * messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
-   * but other values such as 1 can be used to skip loading spinners or other content that should
-   * not maintain position.
-   *
-   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
-   * to the top after making the adjustment if the user was within the threshold of the top before
-   * the adjustment was made. This is also useful for chat-like applications where you want to see
-   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
-   * disruptive to scroll a bunch.
-   *
-   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
-   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
-   * don't re-order the content of any ScrollViews or Lists that use this feature.
-   *
-   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
-   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
-   * whether content is "visible" or not.
-   *
-   */
-  maintainVisibleContentPosition?: ?$ReadOnly<{|
-    minIndexForVisible: number,
-    autoscrollToTopThreshold?: ?number,
-  |}>,
   /**
    * The maximum allowed zoom scale. The default value is 1.0.
    * @platform ios
@@ -471,6 +445,20 @@ export type Props = $ReadOnly<{|
    *   - `'fast'`: 0.99 on iOS, 0.9 on Android
    */
   decelerationRate?: ?DecelerationRateType,
+
+  /**
+   * *Experimental, iOS Only*. The API is experimental and will change in future releases.
+   *
+   * Controls how much distance is travelled after user stops scrolling.
+   * Value greater than 1 will increase the distance travelled.
+   * Value less than 1 will decrease the distance travelled.
+   *
+   * @deprecated
+   *
+   * The default value is 1.
+   */
+  experimental_endDraggingSensitivityMultiplier?: ?number,
+
   /**
    * When true, the scroll view's children are arranged horizontally in a row
    * instead of vertically in a column. The default value is false.
@@ -511,6 +499,33 @@ export type Props = $ReadOnly<{|
    *   - `true`, deprecated, use 'always' instead
    */
   keyboardShouldPersistTaps?: ?('always' | 'never' | 'handled' | true | false),
+  /**
+   * When set, the scroll view will adjust the scroll position so that the first child that is
+   * partially or fully visible and at or beyond `minIndexForVisible` will not change position.
+   * This is useful for lists that are loading content in both directions, e.g. a chat thread,
+   * where new messages coming in might otherwise cause the scroll position to jump. A value of 0
+   * is common, but other values such as 1 can be used to skip loading spinners or other content
+   * that should not maintain position.
+   *
+   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
+   * to the top after making the adjustment if the user was within the threshold of the top before
+   * the adjustment was made. This is also useful for chat-like applications where you want to see
+   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
+   * disruptive to scroll a bunch.
+   *
+   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
+   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
+   * don't re-order the content of any ScrollViews or Lists that use this feature.
+   *
+   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
+   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
+   * whether content is "visible" or not.
+   *
+   */
+  maintainVisibleContentPosition?: ?$ReadOnly<{|
+    minIndexForVisible: number,
+    autoscrollToTopThreshold?: ?number,
+  |}>,
   /**
    * Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
    */
@@ -668,6 +683,9 @@ export type Props = $ReadOnly<{|
 
 type State = {|
   layoutHeight: ?number,
+  onScrollEmitter: ?EventEmitter<{
+    scroll: [{x: number, y: number}],
+  }>,
 |};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
@@ -753,6 +771,7 @@ class ScrollView extends React.Component<Props, State> {
 
   state: State = {
     layoutHeight: null,
+    onScrollEmitter: null,
   };
 
   componentDidMount() {
@@ -821,6 +840,8 @@ class ScrollView extends React.Component<Props, State> {
     if (this._scrollAnimatedValueAttachment) {
       this._scrollAnimatedValueAttachment.detach();
     }
+
+    this.state.onScrollEmitter?.removeAllListeners();
   }
 
   /**
@@ -940,6 +961,44 @@ class ScrollView extends React.Component<Props, State> {
     Commands.flashScrollIndicators(this._scrollView.nativeInstance);
   };
 
+  _subscribeToOnScroll: (
+    callback: ({x: number, y: number}) => void,
+  ) => EventSubscription = callback => {
+    // An undefined value means the listener has not been added, yet.
+    // A null value means the listener has been removed.
+    let subscription: ?EventSubscription;
+
+    this.setState(
+      ({onScrollEmitter}) => {
+        if (onScrollEmitter) {
+          return null;
+        } else {
+          return {onScrollEmitter: new EventEmitter()};
+        }
+      },
+      () => {
+        // If `subscription` is null, that means it was removed before we got
+        // here so do nothing.
+        if (subscription !== null) {
+          subscription = nullthrows(this.state.onScrollEmitter).addListener(
+            'scroll',
+            callback,
+          );
+        }
+      },
+    );
+
+    return {
+      remove() {
+        // If `subscription` was created before this invocation, remove it.
+        subscription?.remove();
+        // Record this invocation by setting `subscription` to null, in case it
+        // ends up being created after this invocation.
+        subscription = null;
+      },
+    };
+  };
+
   /**
    * This method should be used as the callback to onFocus in a TextInputs'
    * parent view. Note that any module using this mixin needs to return
@@ -1146,6 +1205,11 @@ class ScrollView extends React.Component<Props, State> {
   _handleScroll = (e: ScrollEvent) => {
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
+
+    this.state.onScrollEmitter?.emit('scroll', {
+      x: e.nativeEvent.contentOffset.x,
+      y: e.nativeEvent.contentOffset.y,
+    });
   };
 
   _handleLayout = (e: LayoutEvent) => {
@@ -1194,6 +1258,8 @@ class ScrollView extends React.Component<Props, State> {
           scrollToEnd: this.scrollToEnd,
           flashScrollIndicators: this.flashScrollIndicators,
           scrollResponderZoomTo: this.scrollResponderZoomTo,
+          // TODO: Replace unstable_subscribeToOnScroll once scrollView.addEventListener('scroll', (e: ScrollEvent) => {}, {passive: false});
+          unstable_subscribeToOnScroll: this._subscribeToOnScroll,
           scrollResponderScrollNativeHandleToKeyboard:
             this.scrollResponderScrollNativeHandleToKeyboard,
         },
@@ -1708,6 +1774,13 @@ class ScrollView extends React.Component<Props, State> {
     const hasStickyHeaders =
       Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;
 
+    // Some ScrollView native component behaviors rely on using the metrics
+    // of mounted views for anchoring. Make sure not to flatten children if
+    // this is the case.
+    const preserveChildren =
+      this.props.maintainVisibleContentPosition != null ||
+      (Platform.OS === 'android' && this.props.snapToAlignment != null);
+
     const contentContainer = (
       <NativeDirectionalScrollContentView
         {...contentSizeChangeProps}
@@ -1720,7 +1793,8 @@ class ScrollView extends React.Component<Props, State> {
             ? false
             : this.props.removeClippedSubviews
         }
-        collapsable={false}>
+        collapsable={false}
+        collapsableChildren={!preserveChildren}>
         {children}
       </NativeDirectionalScrollContentView>
     );
@@ -1739,8 +1813,11 @@ class ScrollView extends React.Component<Props, State> {
       this.props.horizontal === true
         ? styles.baseHorizontal
         : styles.baseVertical;
+
+    const {experimental_endDraggingSensitivityMultiplier, ...otherProps} =
+      this.props;
     const props = {
-      ...this.props,
+      ...otherProps,
       alwaysBounceHorizontal,
       alwaysBounceVertical,
       style: StyleSheet.compose(baseStyle, this.props.style),
@@ -1765,6 +1842,9 @@ class ScrollView extends React.Component<Props, State> {
       onTouchStart: this._handleTouchStart,
       onTouchCancel: this._handleTouchCancel,
       onScroll: this._handleScroll,
+      endDraggingSensitivityMultiplier:
+        experimental_endDraggingSensitivityMultiplier,
+      enableSyncOnScroll: this.state.onScrollEmitter ? true : undefined,
       scrollEventThrottle: hasStickyHeaders
         ? 1
         : this.props.scrollEventThrottle,