react-native-tvos 0.76.5-0 → 0.77.0-0

package/Libraries/AppDelegate/RCTRootViewFactory.mm

@@ -26,7 +26,6 @@
 #import <React/RCTFabricSurface.h>
 #import <React/RCTSurfaceHostingProxyRootView.h>
 #import <React/RCTSurfacePresenter.h>
-#import <ReactCommon/RCTContextContainerHandling.h>
 #if USE_HERMES
 #import <ReactCommon/RCTHermesInstance.h>
 #else
@@ -35,23 +34,27 @@
 #import <ReactCommon/RCTHost+Internal.h>
 #import <ReactCommon/RCTHost.h>
 #import <ReactCommon/RCTTurboModuleManager.h>
-#import <react/config/ReactNativeConfig.h>
 #import <react/renderer/runtimescheduler/RuntimeScheduler.h>
 #import <react/renderer/runtimescheduler/RuntimeSchedulerCallInvoker.h>
 #import <react/runtime/JSRuntimeFactory.h>
 
-static NSString *const kRNConcurrentRoot = @"concurrentRoot";
+@implementation RCTRootViewFactoryConfiguration
 
-static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabricEnabled)
+- (instancetype)initWithBundleURL:(NSURL *)bundleURL newArchEnabled:(BOOL)newArchEnabled
 {
-  NSMutableDictionary *mutableProps = initialProps != NULL ? [initialProps mutableCopy] : [NSMutableDictionary new];
-  // Hardcoding the Concurrent Root as it it not recommended to
-  // have the concurrentRoot turned off when Fabric is enabled.
-  mutableProps[kRNConcurrentRoot] = @(isFabricEnabled);
-  return mutableProps;
+  return [self initWithBundleURL:bundleURL
+                  newArchEnabled:newArchEnabled
+              turboModuleEnabled:newArchEnabled
+               bridgelessEnabled:newArchEnabled];
 }
 
-@implementation RCTRootViewFactoryConfiguration
+- (instancetype)initWithBundleURLBlock:(RCTBundleURLBlock)bundleURLBlock newArchEnabled:(BOOL)newArchEnabled
+{
+  return [self initWithBundleURLBlock:bundleURLBlock
+                       newArchEnabled:newArchEnabled
+                   turboModuleEnabled:newArchEnabled
+                    bridgelessEnabled:newArchEnabled];
+}
 
 - (instancetype)initWithBundleURL:(NSURL *)bundleURL
                    newArchEnabled:(BOOL)newArchEnabled
@@ -83,13 +86,8 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
 @end
 
-@interface RCTRootViewFactory () <RCTContextContainerHandling> {
-  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
-  facebook::react::ContextContainer::Shared _contextContainer;
-}
-@end
-
 @interface RCTRootViewFactory () <RCTCxxBridgeDelegate> {
+  facebook::react::ContextContainer::Shared _contextContainer;
   std::shared_ptr<facebook::react::RuntimeScheduler> _runtimeScheduler;
 }
 @end
@@ -108,8 +106,6 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
     _configuration = configuration;
     _hostDelegate = hostdelegate;
     _contextContainer = std::make_shared<const facebook::react::ContextContainer>();
-    _reactNativeConfig = std::make_shared<const facebook::react::EmptyReactNativeConfig>();
-    _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
     _turboModuleManagerDelegate = turboModuleManagerDelegate;
   }
   return self;
@@ -142,15 +138,10 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 }
 
 - (UIView *)viewWithModuleName:(NSString *)moduleName
-             initialProperties:(NSDictionary *)initialProperties
+             initialProperties:(NSDictionary *)initProps
                  launchOptions:(NSDictionary *)launchOptions
 {
-  NSDictionary *initProps = updateInitialProps(initialProperties, self->_configuration.fabricEnabled);
-
-  if (self->_configuration.bridgelessEnabled) {
-    // Enable native view config interop only if both bridgeless mode and Fabric is enabled.
-    RCTSetUseNativeViewConfigsInBridgelessMode(self->_configuration.fabricEnabled);
-
+  if (_configuration.bridgelessEnabled) {
     // Enable TurboModule interop by default in Bridgeless mode
     RCTEnableTurboModuleInterop(YES);
     RCTEnableTurboModuleInteropBridgeProxy(YES);
@@ -159,14 +150,14 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
     RCTFabricSurface *surface = [self.reactHost createSurfaceWithModuleName:moduleName initialProperties:initProps];
 
-    RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView = [[RCTSurfaceHostingProxyRootView alloc]
-        initWithSurface:surface
-        sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
+    RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView =
+        [[RCTSurfaceHostingProxyRootView alloc] initWithSurface:surface];
+
 #if !TARGET_OS_TV
     surfaceHostingProxyRootView.backgroundColor = [UIColor systemBackgroundColor];
 #endif
-    if (self->_configuration.customizeRootView != nil) {
-      self->_configuration.customizeRootView(surfaceHostingProxyRootView);
+    if (_configuration.customizeRootView != nil) {
+      _configuration.customizeRootView(surfaceHostingProxyRootView);
     }
     return surfaceHostingProxyRootView;
   }
@@ -175,13 +166,13 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   [self createBridgeAdapterIfNeeded];
 
   UIView *rootView;
-  if (self->_configuration.createRootViewWithBridge != nil) {
-    rootView = self->_configuration.createRootViewWithBridge(self.bridge, moduleName, initProps);
+  if (_configuration.createRootViewWithBridge != nil) {
+    rootView = _configuration.createRootViewWithBridge(self.bridge, moduleName, initProps);
   } else {
     rootView = [self createRootViewWithBridge:self.bridge moduleName:moduleName initProps:initProps];
   }
-  if (self->_configuration.customizeRootView != nil) {
-    self->_configuration.customizeRootView(rootView);
+  if (_configuration.customizeRootView != nil) {
+    _configuration.customizeRootView(rootView);
   }
   return rootView;
 }
@@ -195,7 +186,7 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
                           moduleName:(NSString *)moduleName
                            initProps:(NSDictionary *)initProps
 {
-  BOOL enableFabric = self->_configuration.fabricEnabled;
+  BOOL enableFabric = _configuration.fabricEnabled;
   UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
 
 #if !TARGET_OS_TV
@@ -272,7 +263,6 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   [reactHost setBundleURLProvider:^NSURL *() {
     return [weakSelf bundleURL];
   }];
-  [reactHost setContextContainerHandler:self];
   [reactHost start];
   return reactHost;
 }
@@ -280,18 +270,12 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 - (std::shared_ptr<facebook::react::JSRuntimeFactory>)createJSRuntimeFactory
 {
 #if USE_HERMES
-  return std::make_shared<facebook::react::RCTHermesInstance>(
-      _reactNativeConfig, nullptr, /* allocInOldGenBeforeTTI */ false);
+  return std::make_shared<facebook::react::RCTHermesInstance>(nullptr, nullptr, /* allocInOldGenBeforeTTI */ false);
 #else
   return std::make_shared<facebook::react::RCTJscInstance>();
 #endif
 }
 
-- (void)didCreateContextContainer:(std::shared_ptr<facebook::react::ContextContainer>)contextContainer
-{
-  contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
-}
-
 - (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
 {
   if (_configuration.extraModulesForBridge != nil) {

package/Libraries/AppDelegate/RCTUIConfiguratorProtocol.h

@@ -0,0 +1,56 @@
+/*
+ * 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/RCTConvert.h>
+#import <UIKit/UIKit.h>
+
+@class RCTRootView;
+
+@protocol RCTUIConfiguratorProtocol
+/**
+ * The default `RCTColorSpace` for the app. It defaults to `RCTColorSpaceSRGB`.
+ */
+- (RCTColorSpace)defaultColorSpace;
+
+/**
+ * This method can be used to customize the rootView that is passed to React Native.
+ * A typical example is to override this method in the AppDelegate to change the background color.
+ * To achieve this, add in your `AppDelegate.mm`:
+ * ```
+ * - (void)customizeRootView:(RCTRootView *)rootView
+ * {
+ *   rootView.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
+ *     if ([traitCollection userInterfaceStyle] == UIUserInterfaceStyleDark) {
+ *       return [UIColor blackColor];
+ *     } else {
+ *       return [UIColor whiteColor];
+ *     }
+ *   }];
+ * }
+ * ```
+ *
+ * @parameter: rootView - The root view to customize.
+ */
+- (void)customizeRootView:(RCTRootView *)rootView;
+
+/**
+ * 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;
+
+/**
+ * It assigns the rootView to the rootViewController
+ * By default, it assigns the rootView to the view property of the rootViewController
+ * If you are not using a simple UIViewController, then there could be other methods to use to setup the rootView.
+ * For example: UISplitViewController requires `setViewController(_:for:)`
+ */
+- (void)setRootView:(UIView *)rootView toRootViewController:(UIViewController *)rootViewController;
+@end

package/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -32,6 +32,7 @@ header_search_paths = [
   "$(PODS_ROOT)/Headers/Private/React-Core",
   "$(PODS_ROOT)/boost",
   "$(PODS_ROOT)/DoubleConversion",
+  "$(PODS_ROOT)/fast_float/include",
   "$(PODS_ROOT)/fmt/include",
   "$(PODS_ROOT)/RCT-Folly",
   "${PODS_ROOT}/Headers/Public/FlipperKit",
@@ -73,7 +74,7 @@ Pod::Spec.new do |s|
   s.dependency "React-RCTImage"
   s.dependency "React-CoreModules"
   s.dependency "React-nativeconfig"
-  s.dependency "ReactCodegen"
+  s.dependency "React-RCTFBReactNativeSpec"
   s.dependency "React-defaultsnativemodule"
 
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])

package/Libraries/Blob/React-RCTBlob.podspec

@@ -24,6 +24,7 @@ header_search_paths = [
   "\"$(PODS_ROOT)/RCT-Folly\"",
   "\"$(PODS_ROOT)/boost\"",
   "\"$(PODS_ROOT)/DoubleConversion\"",
+  "\"$(PODS_ROOT)/fast_float/include\"",
   "\"$(PODS_ROOT)/fmt/include\"",
   "\"${PODS_ROOT}/Headers/Public/ReactCodegen/react/renderer/components\"",
 ]
@@ -48,6 +49,7 @@ Pod::Spec.new do |s|
                              }
 
   s.dependency "DoubleConversion"
+  s.dependency "fast_float", "6.1.4"
   s.dependency "fmt", "9.1.0"
   s.dependency "RCT-Folly", folly_version
   s.dependency "React-jsi"
@@ -55,7 +57,7 @@ Pod::Spec.new do |s|
   s.dependency "React-Core/RCTWebSocket"
   s.dependency "React-RCTNetwork"
 
-  add_dependency(s, "ReactCodegen")
+  add_dependency(s, "React-RCTFBReactNativeSpec")
   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/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -7,8 +7,7 @@
  * @format
  */
 
-import type * as React from 'react';
-import {HostComponent} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
 
 type AccessibilityChangeEventName =
@@ -17,6 +16,8 @@ type AccessibilityChangeEventName =
   | 'grayscaleChanged' // iOS-only Event
   | 'invertColorsChanged' // iOS-only Event
   | 'reduceMotionChanged'
+  | 'highTextContrastChanged' // Android-only Event
+  | 'darkerSystemColorsChanged' // iOS-only Event
   | 'screenReaderChanged'
   | 'reduceTransparencyChanged'; // iOS-only Event
 
@@ -69,6 +70,21 @@ export interface AccessibilityInfoStatic {
    */
   isReduceMotionEnabled: () => Promise<boolean>;
 
+  /**
+   *
+   * Query whether high text contrast is currently enabled.
+   *
+   * @platform android
+   */
+  isHighTextContrastEnabled: () => Promise<boolean>;
+
+  /**
+   * Query whether darker system colors is currently enabled.
+   *
+   * @platform ios
+   */
+  isDarkerSystemColorsEnabled: () => Promise<boolean>;
+
   /**
    * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
    *
@@ -148,7 +164,7 @@ export interface AccessibilityInfoStatic {
    */
   getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;
   sendAccessibilityEvent: (
-    handle: React.ElementRef<HostComponent<unknown>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) => void;
 }

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -8,9 +8,8 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
 import {sendAccessibilityEvent} from '../../ReactNative/RendererProxy';
@@ -22,6 +21,7 @@ import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
 // Events that are only supported on Android.
 type AccessibilityEventDefinitionsAndroid = {
   accessibilityServiceChanged: [boolean],
+  highTextContrastChanged: [boolean],
 };
 
 // Events that are only supported on iOS.
@@ -31,6 +31,7 @@ type AccessibilityEventDefinitionsIOS = {
   grayscaleChanged: [boolean],
   invertColorsChanged: [boolean],
   reduceTransparencyChanged: [boolean],
+  darkerSystemColorsChanged: [boolean],
 };
 
 type AccessibilityEventDefinitions = {
@@ -51,8 +52,11 @@ const EventNames: Map<
   ? new Map([
       ['change', 'touchExplorationDidChange'],
       ['reduceMotionChanged', 'reduceMotionDidChange'],
+      ['highTextContrastChanged', 'highTextContrastDidChange'],
       ['screenReaderChanged', 'touchExplorationDidChange'],
       ['accessibilityServiceChanged', 'accessibilityServiceDidChange'],
+      ['invertColorsChanged', 'invertColorDidChange'],
+      ['grayscaleChanged', 'grayscaleModeDidChange'],
     ])
   : new Map([
       ['announcementFinished', 'announcementFinished'],
@@ -63,6 +67,7 @@ const EventNames: Map<
       ['reduceMotionChanged', 'reduceMotionChanged'],
       ['reduceTransparencyChanged', 'reduceTransparencyChanged'],
       ['screenReaderChanged', 'screenReaderChanged'],
+      ['darkerSystemColorsChanged', 'darkerSystemColorsChanged'],
     ]);
 
 /**
@@ -110,7 +115,13 @@ const AccessibilityInfo = {
    */
   isGrayscaleEnabled(): Promise<boolean> {
     if (Platform.OS === 'android') {
-      return Promise.resolve(false);
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isGrayscaleEnabled != null) {
+          NativeAccessibilityInfoAndroid.isGrayscaleEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
     } else {
       return new Promise((resolve, reject) => {
         if (NativeAccessibilityManagerIOS != null) {
@@ -135,7 +146,13 @@ const AccessibilityInfo = {
    */
   isInvertColorsEnabled(): Promise<boolean> {
     if (Platform.OS === 'android') {
-      return Promise.resolve(false);
+      return new Promise((resolve, reject) => {
+        if (NativeAccessibilityInfoAndroid?.isInvertColorsEnabled != null) {
+          NativeAccessibilityInfoAndroid.isInvertColorsEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      });
     } else {
       return new Promise((resolve, reject) => {
         if (NativeAccessibilityManagerIOS != null) {
@@ -179,6 +196,52 @@ const AccessibilityInfo = {
     });
   },
 
+  /**
+   * Query whether high text contrast is currently enabled. Android only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when high text contrast is enabled and `false` otherwise.
+   */
+  isHighTextContrastEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        if (NativeAccessibilityInfoAndroid?.isHighTextContrastEnabled != null) {
+          NativeAccessibilityInfoAndroid.isHighTextContrastEnabled(resolve);
+        } else {
+          reject(null);
+        }
+      } else {
+        return Promise.resolve(false);
+      }
+    });
+  },
+
+  /**
+   * Query whether dark system colors is currently enabled. iOS only.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when dark system colors is enabled and `false` otherwise.
+   */
+  isDarkerSystemColorsEnabled(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (Platform.OS === 'android') {
+        return Promise.resolve(false);
+      } else {
+        if (
+          NativeAccessibilityManagerIOS?.getCurrentDarkerSystemColorsState !=
+          null
+        ) {
+          NativeAccessibilityManagerIOS.getCurrentDarkerSystemColorsState(
+            resolve,
+            reject,
+          );
+        } else {
+          reject(null);
+        }
+      }
+    });
+  },
+
   /**
    * Query whether reduce motion and prefer cross-fade transitions settings are currently enabled.
    *
@@ -319,6 +382,15 @@ const AccessibilityInfo = {
    *     - `announcement`: The string announced by the screen reader.
    *     - `success`: A boolean indicating whether the announcement was
    *       successfully made.
+   * - `darkerSystemColorsChanged`: iOS-only event. Fires when the state of the dark system colors
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   dark system colors is enabled and `false` otherwise.
+   *
+   * These events are only supported on Android:
+   *
+   * - `highTextContrastChanged`: Android-only event. Fires when the state of the high text contrast
+   *   toggle changes. The argument to the event handler is a boolean. The boolean is `true` when
+   *   high text contrast is enabled and `false` otherwise.
    *
    * See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
    */
@@ -347,7 +419,7 @@ const AccessibilityInfo = {
    * Send a named accessibility event to a HostComponent.
    */
   sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) {
     // iOS only supports 'focus' event types

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -153,10 +153,10 @@ const ActivityIndicator = (
 ```
 */
 
-const ActivityIndicatorWithRef: React.AbstractComponent<
-  Props,
-  HostComponent<mixed>,
-> = React.forwardRef(ActivityIndicator);
+const ActivityIndicatorWithRef: component(
+  ref: React.RefSetter<HostComponent<empty>>,
+  ...props: Props
+) = React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({

package/Libraries/Components/Button.js

@@ -283,10 +283,12 @@ type ButtonProps = $ReadOnly<{|
 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) => {
+type ButtonRef = React.ElementRef<typeof Touchable>;
+
+const Button: component(
+  ref: React.RefSetter<ButtonRef>,
+  ...props: ButtonProps
+) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -379,6 +381,9 @@ const Button: React.AbstractComponent<
       disabled={disabled}
       onPress={onPress}
       touchSoundDisabled={touchSoundDisabled}
+      // $FlowFixMe[incompatible-exact]
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-type-arg]
       ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.js

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+module.exports =
+  require('../UnimplementedViews/UnimplementedView') as $FlowFixMe;

package/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -116,6 +116,8 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
+    event.persist();
+
     const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
@@ -191,6 +193,11 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   }
 
   componentDidMount(): void {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     if (Platform.OS === 'ios') {
       this._subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),

package/Libraries/Components/Pressable/Pressable.d.ts

@@ -20,7 +20,7 @@ import {
 import {View} from '../View/View';
 import {AccessibilityProps} from '../View/ViewAccessibility';
 import {ViewProps} from '../View/ViewPropTypes';
-import {TVParallaxProperties} from '../../../types/public/ReactNativeTVTypes';
+import {TVParallaxProperties} from '../../../types/index';
 
 export interface PressableStateCallbackType {
   readonly pressed: boolean;
@@ -166,7 +166,7 @@ export interface PressableProps
    *
    * @platform ios
    */
-  tvParallaxProperties?: TVParallaxProperties;
+  tvParallaxProperties?: TVParallaxProperties | undefined;
 }
 
 // TODO use React.AbstractComponent when available

package/Libraries/Components/Pressable/Pressable.js

@@ -9,12 +9,13 @@
  */
 
 import type {
-  FocusEvent,
   BlurEvent,
+  FocusEvent,
   LayoutEvent,
   MouseEvent,
   PressEvent,
 } from '../../Types/CoreEventTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -27,9 +28,8 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
 import useMergeRefs from '../../Utilities/useMergeRefs';
-import View from '../View/View';
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
+import View from '../View/View';
 import useAndroidRippleForView, {
   type RippleConfig,
 } from './useAndroidRippleForView';
@@ -427,7 +427,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
 const MemoedPressable = React.memo(React.forwardRef(Pressable));
 MemoedPressable.displayName = 'Pressable';
 
-export default (MemoedPressable: React.AbstractComponent<
-  Props,
-  React.ElementRef<typeof View>,
->);
+export default (MemoedPressable: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: Props
+));

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -78,15 +78,23 @@ export type ProgressBarAndroidProps = $ReadOnly<{|
  * },
  * ```
  */
-const ProgressBarAndroid = (
+const ProgressBarAndroidWithForwardedRef: component(
+  ref: React.RefSetter<
+    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
+  >,
+  ...props: ProgressBarAndroidProps
+) = React.forwardRef(function ProgressBarAndroid(
   {
+    // $FlowFixMe[incompatible-type]
     styleAttr = 'Normal',
     indeterminate = true,
     animating = true,
     ...restProps
   }: ProgressBarAndroidProps,
-  forwardedRef: ?React.Ref<typeof ProgressBarAndroidNativeComponent>,
-) => {
+  forwardedRef: ?React.RefSetter<
+    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
+  >,
+) {
   return (
     <ProgressBarAndroidNativeComponent
       styleAttr={styleAttr}
@@ -96,12 +104,10 @@ const ProgressBarAndroid = (
       ref={forwardedRef}
     />
   );
-};
-
-const ProgressBarAndroidToExport = React.forwardRef(ProgressBarAndroid);
+});
 
 module.exports =
   /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
    * error found when Flow v0.89 was deployed. To see the error, delete this
    * comment and run Flow. */
-  (ProgressBarAndroidToExport: typeof ProgressBarAndroidNativeComponent);
+  (ProgressBarAndroidWithForwardedRef: typeof ProgressBarAndroidNativeComponent);

package/Libraries/Components/RefreshControl/__mocks__/RefreshControlMock.js

@@ -14,8 +14,9 @@ import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 import * as React from 'react';
 
-const RCTRefreshControl: HostComponent<mixed> =
-  requireNativeComponent<mixed>('RCTRefreshControl');
+const RCTRefreshControl: HostComponent<{}> = requireNativeComponent<{}>(
+  'RCTRefreshControl',
+);
 
 class RefreshControlMock extends React.Component<{...}> {
   static latestRef: ?RefreshControlMock;

package/Libraries/Components/SafeAreaView/SafeAreaView.js

@@ -23,10 +23,10 @@ import * as React from 'react';
  * limitation of the screen, such as rounded corners or camera notches (aka
  * sensor housing area on iPhone X).
  */
-const exported: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof View>,
-> = Platform.select({
+const exported: component(
+  ref: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: ViewProps
+) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,
   default: View,
 });