react-native 0.68.1 → 0.69.0-rc.0

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict
- * @generated SignedSource<<ec11b46a06877b4f7f3f0b6c1f5d46c3>>
+ * @generated SignedSource<<fb8a7e52d219403fad0cf916954e5185>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -76,6 +76,7 @@ export type ViewConfig = $ReadOnly<{
       phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
+        skipBubbling?: ?boolean,
       }>,
     }>,
     ...,

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<a81ed33269e71024fedad145e843fab0>>
+ * @generated SignedSource<<a5b40ebf1f5b17d6dc83479c1c597566>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -22,6 +22,7 @@ const customBubblingEventTypes: {
     phasedRegistrationNames: $ReadOnly<{|
       captured: string,
       bubbled: string,
+      skipBubbling?: ?boolean,
     |}>,
   |}>,
   ...,

package/Libraries/Settings/React-RCTSettings.podspec

@@ -27,7 +27,7 @@ Pod::Spec.new do |s|
   s.documentation_url      = "https://reactnative.dev/docs/settings"
   s.license                = package["license"]
   s.author                 = "Facebook, Inc. and its affiliates"
-  s.platforms              = { :ios => "11.0" }
+  s.platforms              = { :ios => "12.4" }
   s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
   s.source                 = source
   s.source_files           = "*.{m,mm}"
@@ -35,7 +35,7 @@ Pod::Spec.new do |s|
   s.header_dir             = "RCTSettings"
   s.pod_target_xcconfig    = {
                                "USE_HEADERMAP" => "YES",
-                               "CLANG_CXX_LANGUAGE_STANDARD" => "c++14",
+                               "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
                                "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Codegen/React_Codegen.framework/Headers\""
                              }
 

package/Libraries/StyleSheet/EdgeInsetsPropType.js

@@ -10,6 +10,9 @@
 
 'use strict';
 
-import type {Rect} from './Rect';
+import type {Rect, RectOrSize} from './Rect';
 
+// TODO: allow all EdgeInsets-like property to be set using a single number
+// and unify EdgeInsetsProp with EdgeInsetsOrSizeProp
 export type EdgeInsetsProp = Rect;
+export type EdgeInsetsOrSizeProp = RectOrSize;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -14,21 +14,31 @@ const AnimatedNode = require('../Animated/nodes/AnimatedNode');
 
 import type {NativeColorValue} from './PlatformColorValueTypes';
 
-export type ____ColorValue_Internal = null | string | NativeColorValue;
+export type ____ColorValue_Internal = null | string | number | NativeColorValue;
 
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
-export type PointValue = {|
+export type PointValue = {
   x: number,
   y: number,
-|};
-export type EdgeInsetsValue = {|
+};
+export type EdgeInsetsValue = {
   top: number,
   left: number,
   right: number,
   bottom: number,
-|};
+};
 export type DimensionValue = null | number | string | AnimatedNode;
 
+import type {
+  ____DangerouslyImpreciseStyle_InternalOverrides,
+  ____ImageStyle_InternalOverrides,
+  ____ShadowStyle_InternalOverrides,
+  ____TextStyle_InternalOverrides,
+  ____ViewStyle_InternalOverrides,
+} from './private/_StyleSheetTypesOverrides';
+
+import type {____TransformStyle_Internal} from './private/_TransformStyle';
+
 /**
  * React Native's layout system is based on Flexbox and is powered both
  * on iOS and Android by an open source project called `Yoga`:
@@ -42,7 +52,7 @@ export type DimensionValue = null | number | string | AnimatedNode;
  * These properties are a subset of our styles that are consumed by the layout
  * algorithm and affect the positioning and sizing of views.
  */
-type ____LayoutStyle_Internal = $ReadOnly<{|
+type ____LayoutStyle_Internal = $ReadOnly<{
   /** `display` sets the display type of this component.
    *
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
@@ -472,49 +482,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    *  @platform ios
    */
   direction?: 'inherit' | 'ltr' | 'rtl',
-|}>;
-
-type ____TransformStyle_Internal = $ReadOnly<{|
-  /**
-   * `transform` accepts an array of transformation objects. Each object specifies
-   * the property that will be transformed as the key, and the value to use in the
-   * transformation. Objects should not be combined. Use a single key/value pair
-   * per object.
-   *
-   * The rotate transformations require a string so that the transform may be
-   * expressed in degrees (deg) or radians (rad). For example:
-   *
-   * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
-   *
-   * The skew transformations require a string so that the transform may be
-   * expressed in degrees (deg). For example:
-   *
-   * `transform([{ skewX: '45deg' }])`
-   */
-  transform?: $ReadOnlyArray<
-    | {|+perspective: number | AnimatedNode|}
-    | {|+rotate: string | AnimatedNode|}
-    | {|+rotateX: string | AnimatedNode|}
-    | {|+rotateY: string | AnimatedNode|}
-    | {|+rotateZ: string | AnimatedNode|}
-    | {|+scale: number | AnimatedNode|}
-    | {|+scaleX: number | AnimatedNode|}
-    | {|+scaleY: number | AnimatedNode|}
-    | {|+translateX: number | AnimatedNode|}
-    | {|+translateY: number | AnimatedNode|}
-    | {|
-        +translate:
-          | [number | AnimatedNode, number | AnimatedNode]
-          | AnimatedNode,
-      |}
-    | {|+skewX: string|}
-    | {|+skewY: string|}
-    // TODO: what is the actual type it expects?
-    | {|
-        +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
-      |},
-  >,
-|}>;
+}>;
 
 /**
  * These props can be used to dynamically generate shadows on views, images, text, etc.
@@ -526,7 +494,7 @@ type ____TransformStyle_Internal = $ReadOnly<{|
  * To add a drop shadow to a view use the [`elevation` property](docs/viewstyleproptypes.html#elevation) (Android 5.0+).
  * To customize the color use the [`shadowColor` property](docs/shadow-props.html#shadowColor) (Android 9.0+).
  */
-export type ____ShadowStyle_Internal = $ReadOnly<{|
+export type ____ShadowStyle_InternalCore = $ReadOnly<{
   /**
    * Sets the drop shadow color
    * @platform ios
@@ -536,10 +504,10 @@ export type ____ShadowStyle_Internal = $ReadOnly<{|
    * Sets the drop shadow offset
    * @platform ios
    */
-  shadowOffset?: $ReadOnly<{|
+  shadowOffset?: $ReadOnly<{
     width?: number,
     height?: number,
-  |}>,
+  }>,
   /**
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
@@ -550,9 +518,14 @@ export type ____ShadowStyle_Internal = $ReadOnly<{|
    * @platform ios
    */
   shadowRadius?: number,
-|}>;
+}>;
+
+export type ____ShadowStyle_Internal = $ReadOnly<{
+  ...____ShadowStyle_InternalCore,
+  ...____ShadowStyle_InternalOverrides,
+}>;
 
-export type ____ViewStyle_Internal = $ReadOnly<{|
+export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
@@ -584,7 +557,12 @@ export type ____ViewStyle_Internal = $ReadOnly<{|
   borderTopWidth?: number | AnimatedNode,
   opacity?: number | AnimatedNode,
   elevation?: number,
-|}>;
+}>;
+
+export type ____ViewStyle_Internal = $ReadOnly<{
+  ...____ViewStyle_InternalCore,
+  ...____ViewStyle_InternalOverrides,
+}>;
 
 export type ____FontWeight_Internal =
   | 'normal'
@@ -599,7 +577,7 @@ export type ____FontWeight_Internal =
   | '800'
   | '900';
 
-export type ____TextStyle_Internal = $ReadOnly<{|
+export type ____TextStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   color?: ____ColorValue_Internal,
   fontFamily?: string,
@@ -613,10 +591,10 @@ export type ____TextStyle_Internal = $ReadOnly<{|
     | 'tabular-nums'
     | 'proportional-nums',
   >,
-  textShadowOffset?: $ReadOnly<{|
+  textShadowOffset?: $ReadOnly<{
     width: number,
     height: number,
-  |}>,
+  }>,
   textShadowRadius?: number,
   textShadowColor?: ____ColorValue_Internal,
   letterSpacing?: number,
@@ -633,22 +611,37 @@ export type ____TextStyle_Internal = $ReadOnly<{|
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
-|}>;
+}>;
 
-export type ____ImageStyle_Internal = $ReadOnly<{|
+export type ____TextStyle_Internal = $ReadOnly<{
+  ...____TextStyle_InternalCore,
+  ...____TextStyle_InternalOverrides,
+}>;
+
+export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
-|}>;
+}>;
+
+export type ____ImageStyle_Internal = $ReadOnly<{
+  ...____ImageStyle_InternalCore,
+  ...____ImageStyle_InternalOverrides,
+}>;
 
-export type ____DangerouslyImpreciseStyle_Internal = {
+export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  +tintColor?: ____ColorValue_Internal,
-  +overlayColor?: string,
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  tintColor?: ____ColorValue_Internal,
+  overlayColor?: string,
+}>;
+
+export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
+  ...____DangerouslyImpreciseStyle_InternalCore,
+  ...____DangerouslyImpreciseStyle_InternalOverrides,
   ...
-};
+}>;
 
 type GenericStyleProp<+T> =
   | null

package/Libraries/StyleSheet/normalizeColor.js

@@ -22,7 +22,7 @@ function normalizeColor(
     const {normalizeColorObject} = require('./PlatformColorValueTypes');
     const normalizedColor = normalizeColorObject(color);
     if (normalizedColor != null) {
-      return color;
+      return normalizedColor;
     }
   }
 

package/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js

@@ -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.
+ *
+ * @flow strict
+ * @format
+ */
+
+export type ____DangerouslyImpreciseStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ImageStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ShadowStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____TextStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ViewStyle_InternalOverrides = $ReadOnly<{}>;

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -0,0 +1,53 @@
+/**
+ * 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
+ */
+
+const AnimatedNode = require('../../Animated/nodes/AnimatedNode');
+
+export type ____TransformStyle_Internal = $ReadOnly<{|
+  /**
+   * `transform` accepts an array of transformation objects. Each object specifies
+   * the property that will be transformed as the key, and the value to use in the
+   * transformation. Objects should not be combined. Use a single key/value pair
+   * per object.
+   *
+   * The rotate transformations require a string so that the transform may be
+   * expressed in degrees (deg) or radians (rad). For example:
+   *
+   * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
+   *
+   * The skew transformations require a string so that the transform may be
+   * expressed in degrees (deg). For example:
+   *
+   * `transform([{ skewX: '45deg' }])`
+   */
+  transform?: $ReadOnlyArray<
+    | {|+perspective: number | AnimatedNode|}
+    | {|+rotate: string | AnimatedNode|}
+    | {|+rotateX: string | AnimatedNode|}
+    | {|+rotateY: string | AnimatedNode|}
+    | {|+rotateZ: string | AnimatedNode|}
+    | {|+scale: number | AnimatedNode|}
+    | {|+scaleX: number | AnimatedNode|}
+    | {|+scaleY: number | AnimatedNode|}
+    | {|+translateX: number | AnimatedNode|}
+    | {|+translateY: number | AnimatedNode|}
+    | {|
+        +translate:
+          | [number | AnimatedNode, number | AnimatedNode]
+          | AnimatedNode,
+      |}
+    | {|+skewX: string|}
+    | {|+skewY: string|}
+    // TODO: what is the actual type it expects?
+    | {|
+        +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
+      |},
+  >,
+|}>;

package/Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponent.h

@@ -8,6 +8,7 @@
 #import <ComponentKit/CKComponent.h>
 #import <ComponentKit/CKCompositeComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponentOptions.h>
+#import <React/RCTSurfacePresenter.h>
 
 @class RCTBridge;
 
@@ -19,6 +20,7 @@
 @interface RCTSurfaceBackedComponent : CKCompositeComponent
 
 + (instancetype)newWithBridge:(RCTBridge *)bridge
+             surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
                    moduleName:(NSString *)moduleName
                    properties:(NSDictionary *)properties
                       options:(RCTSurfaceHostingComponentOptions)options;

package/Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponent.mm

@@ -13,6 +13,7 @@
 #import <ComponentKit/CKOverlayLayoutComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponent.h>
 #import <React/RCTSurface.h>
+#import <React/RCTFabricSurface.h>
 
 #import "RCTSurfaceBackedComponentState.h"
 
@@ -24,6 +25,7 @@
 }
 
 + (instancetype)newWithBridge:(RCTBridge *)bridge
+             surfacePresenter:(RCTSurfacePresenter *)surfacePresenter
                    moduleName:(NSString *)moduleName
                    properties:(NSDictionary *)properties
                       options:(RCTSurfaceHostingComponentOptions)options
@@ -32,12 +34,21 @@
 
   RCTSurfaceBackedComponentState *state = scope.state();
 
-  if (state.surface == nil || ![state.surface.moduleName isEqualToString:moduleName]) {
-    RCTSurface *surface =
-      [[RCTSurface alloc] initWithBridge:bridge
-                              moduleName:moduleName
-                       initialProperties:properties];
+  // JavaScript entrypoints expects "fabric" key for Fabric surfaces
+  NSMutableDictionary *adjustedProperties = [[NSMutableDictionary alloc] initWithDictionary:properties];
+  adjustedProperties[@"fabric"] = surfacePresenter ? @YES : nil;
 
+  if (state.surface == nil || ![state.surface.moduleName isEqualToString:moduleName]) {
+    id<RCTSurfaceProtocol> surface;
+    if (surfacePresenter) {
+      surface = [[RCTFabricSurface alloc] initWithSurfacePresenter:surfacePresenter
+                                              moduleName:moduleName
+                                              initialProperties:adjustedProperties];
+    } else {
+      surface = [[RCTSurface alloc] initWithBridge:bridge
+                                moduleName:moduleName
+                         initialProperties:adjustedProperties];
+    }
     [surface start];
 
     state = [RCTSurfaceBackedComponentState newWithSurface:surface];
@@ -45,8 +56,8 @@
     CKComponentScope::replaceState(scope, state);
   }
   else {
-    if (![state.surface.properties isEqualToDictionary:properties]) {
-      state.surface.properties = properties;
+    if (![state.surface.properties isEqualToDictionary:adjustedProperties]) {
+      state.surface.properties = adjustedProperties;
     }
   }
 
@@ -58,10 +69,8 @@
   if (options.activityIndicatorComponentFactory == nil || RCTSurfaceStageIsRunning(state.surface.stage)) {
     component = surfaceHostingComponent;
   } else {
-    component = CK::OverlayLayoutComponentBuilder()
-    .component(surfaceHostingComponent)
-    .overlay(options.activityIndicatorComponentFactory())
-    .build();
+    component = [[CKOverlayLayoutComponent alloc] initWithComponent:surfaceHostingComponent
+                                                            overlay:options.activityIndicatorComponentFactory()];
   }
 
   return [super newWithComponent:component];

package/Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponentState.h

@@ -7,12 +7,12 @@
 
 #import <UIKit/UIKit.h>
 
-@class RCTSurface;
+@protocol RCTSurfaceProtocol;
 
 @interface RCTSurfaceBackedComponentState: NSObject
 
-@property (atomic, readonly, strong) RCTSurface *surface;
+@property (atomic, readonly, strong) id<RCTSurfaceProtocol> surface;
 
-+ (instancetype)newWithSurface:(RCTSurface *)surface;
++ (instancetype)newWithSurface:(id<RCTSurfaceProtocol>)surface;
 
 @end

package/Libraries/SurfaceBackedComponent/RCTSurfaceBackedComponentState.mm

@@ -7,16 +7,14 @@
 
 #import "RCTSurfaceBackedComponentState.h"
 
-#import <React/RCTSurface.h>
-
 @implementation RCTSurfaceBackedComponentState
 
-+ (instancetype)newWithSurface:(RCTSurface *)surface
++ (instancetype)newWithSurface:(id<RCTSurfaceProtocol>)surface
 {
   return [[self alloc] initWithSurface:surface];
 }
 
-- (instancetype)initWithSurface:(RCTSurface *)surface
+- (instancetype)initWithSurface:(id<RCTSurfaceProtocol>)surface
 {
   if (self = [super init]) {
     _surface = surface;

package/Libraries/SurfaceHostingComponent/RCTSurfaceHostingComponent+Internal.h

@@ -8,12 +8,11 @@
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponentOptions.h>
 
-@class RCTSurface;
 @class RCTSurfaceHostingComponentState;
 
 @interface RCTSurfaceHostingComponent ()
 
-@property (nonatomic, strong, readonly) RCTSurface *surface;
+@property (nonatomic, strong, readonly) id<RCTSurfaceProtocol> surface;
 @property (nonatomic, retain, readonly) RCTSurfaceHostingComponentState *state;
 @property (nonatomic, assign, readonly) RCTSurfaceHostingComponentOptions options;
 

package/Libraries/SurfaceHostingComponent/RCTSurfaceHostingComponent.h

@@ -7,14 +7,13 @@
 
 #import <ComponentKit/CKComponent.h>
 #import <RCTSurfaceHostingComponent/RCTSurfaceHostingComponentOptions.h>
-
-@class RCTSurface;
+#import <React/RCTSurfaceProtocol.h>
 
 /**
  * ComponentKit component represents given Surface instance.
  */
 @interface RCTSurfaceHostingComponent : CKComponent
 
-+ (instancetype)newWithSurface:(RCTSurface *)surface options:(RCTSurfaceHostingComponentOptions)options;
++ (instancetype)newWithSurface:(id<RCTSurfaceProtocol>)surface options:(RCTSurfaceHostingComponentOptions)options;
 
 @end

package/Libraries/SurfaceHostingComponent/RCTSurfaceHostingComponent.mm

@@ -11,6 +11,7 @@
 #import <UIKit/UIKit.h>
 
 #import <ComponentKit/CKComponentSubclass.h>
+#import <React/RCTFabricSurface.h>
 #import <React/RCTSurface.h>
 #import <React/RCTSurfaceView.h>
 
@@ -29,7 +30,7 @@
   return [RCTSurfaceHostingComponentState new];
 }
 
-+ (instancetype)newWithSurface:(RCTSurface *)surface options:(RCTSurfaceHostingComponentOptions)options
++ (instancetype)newWithSurface:(id<RCTSurfaceProtocol>)surface options:(RCTSurfaceHostingComponentOptions)options
 {
   CKComponentScope scope(self, surface);
 
@@ -76,8 +77,20 @@
 
   // Just in case of the very first building pass, we give React Native a chance
   // to prepare its internals for coming synchronous measuring.
-  [_surface synchronouslyWaitForStage:RCTSurfaceStageSurfaceDidInitialLayout
-                              timeout:_options.synchronousLayoutingTimeout];
+  if ([_surface isKindOfClass:[RCTSurface class]]) {
+    // Legacy Pre-Fabric Surface
+    [(RCTSurface *)_surface synchronouslyWaitForStage:RCTSurfaceStageSurfaceDidInitialLayout
+                                      timeout:_options.synchronousLayoutingTimeout];
+  } else if ([_surface isKindOfClass:[RCTFabricSurface class]]) {
+    // Fabric Surface
+    // Hack: Increase timeout because RCTFabricSurface stage will be RCTSurfaceStageSurfaceDidInitialLayout
+    // before mounting has finished, which can cause sizeThatFitsMinimumSize to return the wrong value.
+    // Safe hack because timeout length can be increased without making the component seem slower.
+    // However if timeout length is less than the time to mount a surface, the size may be incorrect.
+    // TODO (T115399546) Allow RCTFabricSurface synchronouslyWaitFor to wait for mounting completion stage
+    NSTimeInterval timeout = 20;
+    [(RCTFabricSurface *)_surface synchronouslyWaitFor:timeout];
+  }
 
   CGSize fittingSize = CGSizeZero;
   if (_surface.stage & RCTSurfaceStageSurfaceDidInitialLayout) {

package/Libraries/SurfaceHostingComponent/RCTSurfaceHostingComponentController.mm

@@ -21,7 +21,7 @@
 @end
 
 @implementation RCTSurfaceHostingComponentController {
-  RCTSurface *_surface;
+  id<RCTSurfaceProtocol> _surface;
 }
 
 - (instancetype)initWithComponent:(RCTSurfaceHostingComponent *)component
@@ -64,7 +64,7 @@
 - (void)updateSurfaceWithComponent:(RCTSurfaceHostingComponent *)component
 {
   // Updating `surface`
-  RCTSurface *const surface = component.surface;
+  id<RCTSurfaceProtocol> const surface = component.surface;
   if (surface != _surface) {
     if (_surface.delegate == self) {
       _surface.delegate = nil;
@@ -77,18 +77,34 @@
 
 - (void)setIntrinsicSize:(CGSize)intrinsicSize
 {
-  [self.component updateState:^(RCTSurfaceHostingComponentState *state) {
-    return [RCTSurfaceHostingComponentState newWithStage:state.stage
-                                           intrinsicSize:intrinsicSize];
-  } mode:[self suitableStateUpdateMode]];
+  __weak __typeof(self) weakSelf = self;
+  dispatch_async(dispatch_get_main_queue(), ^{
+    __strong __typeof(self) strongSelf = weakSelf;
+    if (!strongSelf) {
+      return;
+    }
+    
+    [strongSelf.component updateState:^(RCTSurfaceHostingComponentState *state) {
+      return [RCTSurfaceHostingComponentState newWithStage:state.stage
+                                             intrinsicSize:intrinsicSize];
+    } mode:[strongSelf suitableStateUpdateMode]];
+  });
 }
 
 - (void)setStage:(RCTSurfaceStage)stage
 {
-  [self.component updateState:^(RCTSurfaceHostingComponentState *state) {
-    return [RCTSurfaceHostingComponentState newWithStage:stage
-                                           intrinsicSize:state.intrinsicSize];
-  } mode:[self suitableStateUpdateMode]];
+  __weak __typeof(self) weakSelf = self;
+  dispatch_async(dispatch_get_main_queue(), ^{
+    __strong __typeof(self) strongSelf = weakSelf;
+    if (!strongSelf) {
+      return;
+    }
+    
+    [strongSelf.component updateState:^(RCTSurfaceHostingComponentState *state) {
+      return [RCTSurfaceHostingComponentState newWithStage:stage
+                                             intrinsicSize:state.intrinsicSize];
+    } mode:[strongSelf suitableStateUpdateMode]];
+  });
 }
 
 - (CKUpdateMode)suitableStateUpdateMode

package/Libraries/Text/React-RCTText.podspec

@@ -24,7 +24,7 @@ Pod::Spec.new do |s|
   s.documentation_url      = "https://reactnative.dev/docs/text"
   s.license                = package["license"]
   s.author                 = "Facebook, Inc. and its affiliates"
-  s.platforms              = { :ios => "11.0" }
+  s.platforms              = { :ios => "12.4" }
   s.source                 = source
   s.source_files           = "**/*.{h,m}"
   s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"