react-native 0.71.4 → 0.72.0-rc.0

package/Libraries/Text/Text/NSTextStorage+FontScaling.m

@@ -30,11 +30,11 @@ typedef NS_OPTIONS(NSInteger, RCTTextSizeComparisonOptions) {
   while (true) {
     [self scaleFontSizeWithRatio:ratio minimumFontSize:minimumFontSize maximumFontSize:maximumFontSize];
 
-    RCTTextSizeComparisonOptions comparsion = [self compareToSize:size thresholdRatio:0.01];
+    RCTTextSizeComparisonOptions comparison = [self compareToSize:size thresholdRatio:0.01];
 
-    if ((comparsion & RCTTextSizeComparisonWithinRange) && (comparsion & RCTTextSizeComparisonSmaller)) {
+    if ((comparison & RCTTextSizeComparisonWithinRange) && (comparison & RCTTextSizeComparisonSmaller)) {
       return;
-    } else if (comparsion & RCTTextSizeComparisonSmaller) {
+    } else if (comparison & RCTTextSizeComparisonSmaller) {
       bottomRatio = ratio;
       lastRatioWhichFits = ratio;
     } else {

package/Libraries/Text/Text/RCTTextView.m

@@ -14,6 +14,8 @@
 
 #import <React/RCTTextShadowView.h>
 
+#import <QuartzCore/QuartzCore.h>
+
 @implementation RCTTextView {
   CAShapeLayer *_highlightLayer;
   UILongPressGestureRecognizer *_longPressGestureRecognizer;
@@ -36,10 +38,8 @@
 
 - (NSString *)description
 {
-  NSString *superDescription = super.description;
-  NSRange replacementRange = [superDescription rangeOfString:@">"];
-  NSString *replacement = [NSString stringWithFormat:@"; reactTag: %@; text: %@>", self.reactTag, _textStorage.string];
-  return [superDescription stringByReplacingCharactersInRange:replacementRange withString:replacement];
+  NSString *stringToAppend = [NSString stringWithFormat:@" reactTag: %@; text: %@", self.reactTag, _textStorage.string];
+  return [[super description] stringByAppendingString:stringToAppend];
 }
 
 - (void)setSelectable:(BOOL)selectable

package/Libraries/Text/Text.d.ts

@@ -27,7 +27,7 @@ export interface TextPropsIOS {
   adjustsFontSizeToFit?: boolean | undefined;
 
   /**
-   * The Dynamic Text scale ramp to apply to this element on iOS.
+   * The Dynamic Type scale ramp to apply to this element on iOS.
    */
   dynamicTypeRamp?:
     | 'caption2'
@@ -53,6 +53,16 @@ export interface TextPropsIOS {
    * default, a gray oval highlights the text on press down.
    */
   suppressHighlighting?: boolean | undefined;
+
+  /**
+   * Set line break strategy on iOS.
+   */
+  lineBreakStrategyIOS?:
+    | 'none'
+    | 'standard'
+    | 'hangul-word'
+    | 'push-out'
+    | undefined;
 }
 
 export interface TextPropsAndroid {
@@ -107,7 +117,7 @@ export interface TextProps
    */
   allowFontScaling?: boolean | undefined;
 
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * This can be one of the following values:

package/Libraries/Text/Text.js

@@ -9,17 +9,16 @@
  */
 
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {TextProps} from './TextProps';
 
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
-import StyleSheet from '../StyleSheet/StyleSheet';
 import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
-import {type TextProps} from './TextProps';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -36,6 +35,7 @@ const Text: React.AbstractComponent<
     accessible,
     accessibilityLabel,
     accessibilityRole,
+    accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -64,13 +64,23 @@ const Text: React.AbstractComponent<
 
   const [isHighlighted, setHighlighted] = useState(false);
 
-  const _accessibilityState = {
-    busy: ariaBusy ?? props.accessibilityState?.busy,
-    checked: ariaChecked ?? props.accessibilityState?.checked,
-    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
-    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
-    selected: ariaSelected ?? props.accessibilityState?.selected,
-  };
+  let _accessibilityState;
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
 
   const _disabled =
     restProps.disabled != null
@@ -174,25 +184,11 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = flattenStyle(restProps.style);
-
-  let _selectable = restProps.selectable;
-  if (style?.userSelect != null) {
-    _selectable = userSelectToSelectableMap[style.userSelect];
-  }
-
-  if (style?.verticalAlign != null) {
-    style = StyleSheet.compose(style, {
-      textAlignVertical:
-        verticalAlignToTextAlignVerticalMap[style.verticalAlign],
-    });
-  }
+  let style = restProps.style;
 
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
-      style = StyleSheet.compose(restProps.style, {
-        color: 'magenta',
-      });
+      style = [restProps.style, {color: 'magenta'}];
     }
   }
 
@@ -211,10 +207,23 @@ const Text: React.AbstractComponent<
     default: accessible,
   });
 
-  let flattenedStyle = flattenStyle(style);
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  style = flattenStyle(style);
+
+  if (typeof style?.fontWeight === 'number') {
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    _selectable = userSelectToSelectableMap[style.userSelect];
+    delete style.userSelect;
+  }
 
-  if (typeof flattenedStyle?.fontWeight === 'number') {
-    flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
+  if (style?.verticalAlign != null) {
+    style.textAlignVertical =
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   const _hasOnPressOrOnLongPress =
@@ -223,46 +232,46 @@ const Text: React.AbstractComponent<
   return hasTextAncestor ? (
     <NativeVirtualText
       {...restProps}
-      accessibilityState={_accessibilityState}
       {...eventHandlersForText}
       accessibilityLabel={ariaLabel ?? accessibilityLabel}
       accessibilityRole={
         role ? getAccessibilityRoleFromRole(role) : accessibilityRole
       }
+      accessibilityState={_accessibilityState}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
-      selectable={_selectable}
       nativeID={id ?? nativeID}
       numberOfLines={numberOfLines}
-      selectionColor={selectionColor}
-      style={flattenedStyle}
       ref={forwardedRef}
+      selectable={_selectable}
+      selectionColor={selectionColor}
+      style={style}
     />
   ) : (
     <TextAncestor.Provider value={true}>
       <NativeText
         {...restProps}
         {...eventHandlersForText}
-        disabled={_disabled}
-        selectable={_selectable}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
+        accessibilityState={nativeTextAccessibilityState}
         accessible={
           accessible == null && Platform.OS === 'android'
             ? _hasOnPressOrOnLongPress
             : _accessible
         }
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
-        accessibilityState={nativeTextAccessibilityState}
-        accessibilityRole={
-          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-        }
         allowFontScaling={allowFontScaling !== false}
+        disabled={_disabled}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         nativeID={id ?? nativeID}
         numberOfLines={numberOfLines}
-        selectionColor={selectionColor}
-        style={flattenedStyle}
         ref={forwardedRef}
+        selectable={_selectable}
+        selectionColor={selectionColor}
+        style={style}
       />
     </TextAncestor.Provider>
   );

package/Libraries/Text/TextInput/Multiline/RCTUITextView.m

@@ -219,7 +219,7 @@ static UIColor *defaultPlaceholderColor()
 {
   CGSize contentSize = super.contentSize;
   CGSize placeholderSize = _placeholderView.isHidden ? CGSizeZero : self.placeholderSize;
-  // When a text input is empty, it actually displays a placehoder.
+  // When a text input is empty, it actually displays a placeholder.
   // So, we have to consider `placeholderSize` as a minimum `contentSize`.
   // Returning size DOES contain `textContainerInset` (aka `padding`).
   return CGSizeMake(MAX(contentSize.width, placeholderSize.width), MAX(contentSize.height, placeholderSize.height));

package/Libraries/Text/TextInput/RCTBaseTextInputView.m

@@ -22,7 +22,7 @@
 @implementation RCTBaseTextInputView {
   __weak RCTBridge *_bridge;
   __weak id<RCTEventDispatcherProtocol> _eventDispatcher;
-  BOOL _hasInputAccesoryView;
+  BOOL _hasInputAccessoryView;
   NSString *_Nullable _predictedText;
   BOOL _didMoveToWindow;
 }
@@ -313,6 +313,12 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
   if (showSoftInputOnFocus) {
     // Resets to default keyboard.
     self.backedTextInputView.inputView = nil;
+
+    // Without the call to reloadInputViews, the keyboard will not change until the textInput field (the first
+    // responder) loses and regains focus.
+    if (self.backedTextInputView.isFirstResponder) {
+      [self.backedTextInputView reloadInputViews];
+    }
   } else {
     // Hides keyboard, but keeps blinking cursor.
     self.backedTextInputView.inputView = [UIView new];
@@ -452,7 +458,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
 
   if (range.location + range.length > backedTextInputView.attributedText.string.length) {
     _predictedText = backedTextInputView.attributedText.string;
-  } else {
+  } else if (text != nil) {
     _predictedText = [backedTextInputView.attributedText.string stringByReplacingCharactersInRange:range
                                                                                         withString:text];
   }
@@ -620,18 +626,18 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
 
   // These keyboard types (all are number pads) don't have a "Done" button by default,
   // so we create an `inputAccessoryView` with this button for them.
-  BOOL shouldHaveInputAccesoryView =
+  BOOL shouldHaveInputAccessoryView =
       (keyboardType == UIKeyboardTypeNumberPad || keyboardType == UIKeyboardTypePhonePad ||
        keyboardType == UIKeyboardTypeDecimalPad || keyboardType == UIKeyboardTypeASCIICapableNumberPad) &&
       textInputView.returnKeyType == UIReturnKeyDone;
 
-  if (_hasInputAccesoryView == shouldHaveInputAccesoryView) {
+  if (_hasInputAccessoryView == shouldHaveInputAccessoryView) {
     return;
   }
 
-  _hasInputAccesoryView = shouldHaveInputAccesoryView;
+  _hasInputAccessoryView = shouldHaveInputAccessoryView;
 
-  if (shouldHaveInputAccesoryView) {
+  if (shouldHaveInputAccessoryView) {
     UIToolbar *toolbarView = [UIToolbar new];
     [toolbarView sizeToFit];
     UIBarButtonItem *flexibleSpace =

package/Libraries/Text/TextProps.js

@@ -92,9 +92,8 @@ export type TextProps = $ReadOnly<{|
   'aria-selected'?: ?boolean,
 
   /**
-   * Reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   *
-   * @platform android
+   * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * This prop is listed for cross-platform reasons and has no real effect on Android or iOS.
    */
   'aria-labelledby'?: ?string,
 
@@ -230,7 +229,7 @@ export type TextProps = $ReadOnly<{|
   adjustsFontSizeToFit?: ?boolean,
 
   /**
-   * The Dynamic Text scale ramp to apply to this element on iOS.
+   * The Dynamic Type scale ramp to apply to this element on iOS.
    */
   dynamicTypeRamp?: ?(
     | 'caption2'

package/Libraries/TurboModule/samples/NativeSampleTurboModule.js

@@ -13,6 +13,11 @@ import type {RootTag, TurboModule} from '../RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModuleRegistry';
 
+export enum EnumInt {
+  A = 23,
+  B = 42,
+}
+
 export interface Spec extends TurboModule {
   // Exported methods.
   +getConstants: () => {|
@@ -22,6 +27,7 @@ export interface Spec extends TurboModule {
   |};
   +voidFunc: () => void;
   +getBool: (arg: boolean) => boolean;
+  +getEnum?: (arg: EnumInt) => EnumInt;
   +getNumber: (arg: number) => number;
   +getString: (arg: string) => string;
   +getArray: (arg: Array<any>) => Array<any>;

package/Libraries/TypeSafety/RCTConvertHelpers.h

@@ -23,7 +23,7 @@ using LazyVector = FB::LazyVector<T, id>;
 template <typename ContainerT>
 NSArray *RCTConvertVecToArray(const ContainerT &vec, id (^convertor)(typename ContainerT::value_type element))
 {
-  NSMutableArray *array = [NSMutableArray new];
+  NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:vec.size()];
   for (size_t i = 0, size = vec.size(); i < size; ++i) {
     id object = convertor(vec[i]);
     array[i] = object ?: (id)kCFNull;

package/Libraries/TypeSafety/RCTTypeSafety.podspec

@@ -22,7 +22,7 @@ Pod::Spec.new do |s|
   s.summary                = "-"  # TODO
   s.homepage               = "https://reactnative.dev/"
   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,cpp}"

package/Libraries/Types/CodegenTypes.js

@@ -29,6 +29,7 @@ export type Double = number;
 export type Float = number;
 export type Int32 = number;
 export type UnsafeObject = $FlowFixMe; // Object is forbidden in strict mode
+export type UnsafeMixed = mixed;
 
 type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 // Default handling, ignore the unused value

package/Libraries/UTFSequence.js

@@ -31,6 +31,7 @@ const UTFSequence: {|
   NBSP: string,
   NDASH: string,
   NDASH_SP: string,
+  NEWLINE: string,
   PIZZA: string,
   TRIANGLE_LEFT: string,
   TRIANGLE_RIGHT: string,
@@ -45,10 +46,11 @@ const UTFSequence: {|
   MDASH_SP: '\u00A0\u2014\u00A0', //  — 
   NDASH: '\u2013', // en dash: –
   NDASH_SP: '\u00A0\u2013\u00A0', //  – 
+  NEWLINE: '\u000A',
   NBSP: '\u00A0', // non-breaking space:  
   PIZZA: '\uD83C\uDF55',
   TRIANGLE_LEFT: '\u25c0', // black left-pointing triangle
   TRIANGLE_RIGHT: '\u25b6', // black right-pointing triangle
 });
 
-module.exports = UTFSequence;
+export default UTFSequence;

package/Libraries/Utilities/Appearance.d.ts

@@ -28,6 +28,16 @@ export namespace Appearance {
    */
   export function getColorScheme(): ColorSchemeName;
 
+  /**
+   * Set the color scheme preference. This is useful for overriding the default
+   * color scheme preference for the app. Note that this will not change the
+   * appearance of the system UI, only the appearance of the app.
+   * Only available on iOS 13+ and Android 10+.
+   */
+  export function setColorScheme(
+    scheme: ColorSchemeName | null | undefined,
+  ): void;
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Appearance.js

@@ -85,6 +85,19 @@ module.exports = {
     return nativeColorScheme;
   },
 
+  setColorScheme(colorScheme: ?ColorSchemeName): void {
+    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
+
+    invariant(
+      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+    );
+
+    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
+      NativeAppearance.setColorScheme(nativeColorScheme);
+    }
+  },
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Dimensions.js

@@ -127,4 +127,4 @@ if (!initialDims) {
 
 Dimensions.set(initialDims);
 
-module.exports = Dimensions;
+export default Dimensions;

package/Libraries/Utilities/GlobalPerformanceLogger.js

@@ -10,8 +10,17 @@
 
 import type {IPerformanceLogger} from './createPerformanceLogger';
 
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import NativePerformance from '../WebPerformance/NativePerformance';
 import createPerformanceLogger from './createPerformanceLogger';
 
+function isLoggingForWebPerformance(): boolean {
+  return (
+    NativePerformance != null &&
+    ReactNativeFeatureFlags.isGlobalWebPerformanceLoggerEnabled()
+  );
+}
+
 /**
  * This is a global shared instance of IPerformanceLogger that is created with
  * createPerformanceLogger().
@@ -19,6 +28,8 @@ import createPerformanceLogger from './createPerformanceLogger';
  * that are logged during loading bundle. If you want to log something from your
  * React component you should use PerformanceLoggerContext instead.
  */
-const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger();
+const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger(
+  isLoggingForWebPerformance(),
+);
 
 module.exports = GlobalPerformanceLogger;

package/Libraries/Utilities/HMRClient.js

@@ -25,7 +25,7 @@ let hmrClient = null;
 let hmrUnavailableReason: string | null = null;
 let currentCompileErrorMessage: string | null = null;
 let didConnect: boolean = false;
-let pendingLogs: Array<[LogLevel, Array<mixed>]> = [];
+let pendingLogs: Array<[LogLevel, $ReadOnlyArray<mixed>]> = [];
 
 type LogLevel =
   | 'trace'
@@ -42,7 +42,7 @@ export type HMRClientNativeInterface = {|
   enable(): void,
   disable(): void,
   registerBundle(requestUrl: string): void,
-  log(level: LogLevel, data: Array<mixed>): void,
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>): void,
   setup(
     platform: string,
     bundleEntry: string,
@@ -105,7 +105,7 @@ const HMRClient: HMRClientNativeInterface = {
     registerBundleEntryPoints(hmrClient);
   },
 
-  log(level: LogLevel, data: Array<mixed>) {
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>) {
     if (!hmrClient) {
       // Catch a reasonable number of early logs
       // in case hmrClient gets initialized later.
@@ -247,17 +247,23 @@ Error: ${e.message}`;
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
       const isNormalOrUnsetCloseReason =
+        closeEvent == null ||
         closeEvent.code === 1000 ||
         closeEvent.code === 1005 ||
         closeEvent.code == null;
 
-      if (isNormalOrUnsetCloseReason) {
-        setHMRUnavailableReason('Disconnected from Metro.');
-      } else {
-        setHMRUnavailableReason(
-          `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`,
-        );
-      }
+      setHMRUnavailableReason(
+        `${
+          isNormalOrUnsetCloseReason
+            ? 'Disconnected from Metro.'
+            : `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`
+        }
+
+To reconnect:
+- Ensure that Metro is running and available on the same network
+- Reload this app (will trigger further help if Metro cannot be connected to)
+      `,
+      );
     });
 
     if (isEnabled) {

package/Libraries/Utilities/{createPerformanceLogger.d.ts → IPerformanceLogger.d.ts}

@@ -9,10 +9,10 @@
 
 export type Timespan = {
   startTime: number;
-  endTime?: number;
-  totalTime?: number;
-  startExtras?: Extras;
-  endExtras?: Extras;
+  endTime?: number | undefined;
+  totalTime?: number | undefined;
+  startExtras?: Extras | undefined;
+  endExtras?: Extras | undefined;
 };
 
 // Extra values should be serializable primitives

package/Libraries/Utilities/IPerformanceLogger.js

@@ -0,0 +1,49 @@
+/**
+ * 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 Timespan = {
+  startTime: number,
+  endTime?: number,
+  totalTime?: number,
+  startExtras?: Extras,
+  endExtras?: Extras,
+};
+
+// Extra values should be serializable primitives
+export type ExtraValue = number | string | boolean;
+
+export type Extras = {[key: string]: ExtraValue};
+
+export interface IPerformanceLogger {
+  addTimespan(
+    key: string,
+    startTime: number,
+    endTime: number,
+    startExtras?: Extras,
+    endExtras?: Extras,
+  ): void;
+  append(logger: IPerformanceLogger): void;
+  clear(): void;
+  clearCompleted(): void;
+  close(): void;
+  currentTimestamp(): number;
+  getExtras(): $ReadOnly<{[key: string]: ?ExtraValue, ...}>;
+  getPoints(): $ReadOnly<{[key: string]: ?number, ...}>;
+  getPointExtras(): $ReadOnly<{[key: string]: ?Extras, ...}>;
+  getTimespans(): $ReadOnly<{[key: string]: ?Timespan, ...}>;
+  hasTimespan(key: string): boolean;
+  isClosed(): boolean;
+  logEverything(): void;
+  markPoint(key: string, timestamp?: number, extras?: Extras): void;
+  removeExtra(key: string): ?ExtraValue;
+  setExtra(key: string, value: ExtraValue): void;
+  startTimespan(key: string, timestamp?: number, extras?: Extras): void;
+  stopTimespan(key: string, timestamp?: number, extras?: Extras): void;
+}

package/Libraries/Utilities/LoadingView.android.js

@@ -8,20 +8,37 @@
  * @flow strict-local
  */
 
-import ToastAndroid from '../Components/ToastAndroid/ToastAndroid';
-
-const TOAST_SHORT_DELAY = 2000;
-let isVisible = false;
+import processColor from '../StyleSheet/processColor';
+import Appearance from './Appearance';
+import NativeDevLoadingView from './NativeDevLoadingView';
 
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
-    if (!isVisible) {
-      ToastAndroid.show(message, ToastAndroid.SHORT);
-      isVisible = true;
-      setTimeout(() => {
-        isVisible = false;
-      }, TOAST_SHORT_DELAY);
+    if (NativeDevLoadingView) {
+      let backgroundColor;
+      let textColor;
+
+      if (type === 'refresh') {
+        backgroundColor = processColor('#2584e8');
+        textColor = processColor('#ffffff');
+      } else if (type === 'load') {
+        if (Appearance.getColorScheme() === 'dark') {
+          backgroundColor = processColor('#fafafa');
+          textColor = processColor('#242526');
+        } else {
+          backgroundColor = processColor('#404040');
+          textColor = processColor('#ffffff');
+        }
+      }
+
+      NativeDevLoadingView.showMessage(
+        message,
+        typeof textColor === 'number' ? textColor : null,
+        typeof backgroundColor === 'number' ? backgroundColor : null,
+      );
     }
   },
-  hide() {},
+  hide() {
+    NativeDevLoadingView && NativeDevLoadingView.hide();
+  },
 };

package/Libraries/Utilities/NativeAppearance.js

@@ -26,6 +26,7 @@ export interface Spec extends TurboModule {
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
+  +setColorScheme?: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;