react-native-windows 0.78.7 → 0.79.0-preview.1

package/Libraries/Components/View/ViewPropTypes.windows.js

@@ -15,27 +15,23 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   BlurEvent,
   FocusEvent,
-  Layout,
-  LayoutEvent,
+  LayoutChangeEvent,
+  LayoutRectangle,
   MouseEvent,
   PointerEvent,
-  PressEvent,
+  GestureResponderEvent,
   KeyEvent, // [Windows]
 } from '../../Types/CoreEventTypes';
 import type {
   AccessibilityActionEvent,
-  AccessibilityActionInfo,
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
-  Role,
+  AccessibilityProps,
 } from './ViewAccessibility';
 import type {Node} from 'react';
 
-export type ViewLayout = Layout;
-export type ViewLayoutEvent = LayoutEvent;
+export type ViewLayout = LayoutRectangle;
+export type ViewLayoutEvent = LayoutChangeEvent;
 
-type DirectEventProps = $ReadOnly<{|
+type DirectEventProps = $ReadOnly<{
   /**
    * When `accessible` is true, the system will try to invoke this function
    * when the user performs an accessibility custom action.
@@ -62,7 +58,7 @@ type DirectEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onlayout
    */
-  onLayout?: ?(event: LayoutEvent) => mixed,
+  onLayout?: ?(event: LayoutChangeEvent) => mixed,
 
   /**
    * When `accessible` is `true`, the system will invoke this function when the
@@ -79,15 +75,15 @@ type DirectEventProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#onaccessibilityescape
    */
   onAccessibilityEscape?: ?() => mixed,
-|}>;
+}>;
 
-type MouseEventProps = $ReadOnly<{|
+type MouseEventProps = $ReadOnly<{
   onMouseEnter?: ?(event: MouseEvent) => void,
   onMouseLeave?: ?(event: MouseEvent) => void,
-|}>;
+}>;
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
-type PointerEventProps = $ReadOnly<{|
+type PointerEventProps = $ReadOnly<{
   onClick?: ?(event: PointerEvent) => void,
   onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,
@@ -110,32 +106,32 @@ type PointerEventProps = $ReadOnly<{|
   onGotPointerCaptureCapture?: ?(e: PointerEvent) => void,
   onLostPointerCapture?: ?(e: PointerEvent) => void,
   onLostPointerCaptureCapture?: ?(e: PointerEvent) => void,
-|}>;
+}>;
 
-type FocusEventProps = $ReadOnly<{|
+type FocusEventProps = $ReadOnly<{
   onBlur?: ?(event: BlurEvent) => void,
   onBlurCapture?: ?(event: BlurEvent) => void,
   onFocus?: ?(event: FocusEvent) => void,
   onFocusCapture?: ?(event: FocusEvent) => void,
-|}>;
-
-type TouchEventProps = $ReadOnly<{|
-  onTouchCancel?: ?(e: PressEvent) => void,
-  onTouchCancelCapture?: ?(e: PressEvent) => void,
-  onTouchEnd?: ?(e: PressEvent) => void,
-  onTouchEndCapture?: ?(e: PressEvent) => void,
-  onTouchMove?: ?(e: PressEvent) => void,
-  onTouchMoveCapture?: ?(e: PressEvent) => void,
-  onTouchStart?: ?(e: PressEvent) => void,
-  onTouchStartCapture?: ?(e: PressEvent) => void,
-|}>;
+}>;
+
+type TouchEventProps = $ReadOnly<{
+  onTouchCancel?: ?(e: GestureResponderEvent) => void,
+  onTouchCancelCapture?: ?(e: GestureResponderEvent) => void,
+  onTouchEnd?: ?(e: GestureResponderEvent) => void,
+  onTouchEndCapture?: ?(e: GestureResponderEvent) => void,
+  onTouchMove?: ?(e: GestureResponderEvent) => void,
+  onTouchMoveCapture?: ?(e: GestureResponderEvent) => void,
+  onTouchStart?: ?(e: GestureResponderEvent) => void,
+  onTouchStartCapture?: ?(e: GestureResponderEvent) => void,
+}>;
 
 /**
  * For most touch interactions, you'll simply want to wrap your component in
  * `TouchableHighlight` or `TouchableOpacity`. Check out `Touchable.js`,
  * `ScrollResponder.js` and `ResponderEventPlugin.js` for more discussion.
  */
-type GestureResponderEventProps = $ReadOnly<{|
+export type GestureResponderHandlers = $ReadOnly<{
   /**
    * Does this view want to "claim" touch responsiveness? This is called for
    * every touch move on the `View` when it is not the responder.
@@ -145,7 +141,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onmoveshouldsetresponder
    */
-  onMoveShouldSetResponder?: ?(e: PressEvent) => boolean,
+  onMoveShouldSetResponder?: ?(e: GestureResponderEvent) => boolean,
 
   /**
    * If a parent `View` wants to prevent a child `View` from becoming responder
@@ -156,7 +152,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onMoveShouldsetrespondercapture
    */
-  onMoveShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
+  onMoveShouldSetResponderCapture?: ?(e: GestureResponderEvent) => boolean,
 
   /**
    * The View is now responding for touch events. This is the time to highlight
@@ -170,7 +166,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onrespondergrant
    */
-  onResponderGrant?: ?(e: PressEvent) => void | boolean,
+  onResponderGrant?: ?(e: GestureResponderEvent) => void | boolean,
 
   /**
    * The user is moving their finger.
@@ -180,7 +176,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onrespondermove
    */
-  onResponderMove?: ?(e: PressEvent) => void,
+  onResponderMove?: ?(e: GestureResponderEvent) => void,
 
   /**
    * Another responder is already active and will not release it to that `View`
@@ -191,7 +187,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onresponderreject
    */
-  onResponderReject?: ?(e: PressEvent) => void,
+  onResponderReject?: ?(e: GestureResponderEvent) => void,
 
   /**
    * Fired at the end of the touch.
@@ -201,10 +197,10 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onresponderrelease
    */
-  onResponderRelease?: ?(e: PressEvent) => void,
+  onResponderRelease?: ?(e: GestureResponderEvent) => void,
 
-  onResponderStart?: ?(e: PressEvent) => void,
-  onResponderEnd?: ?(e: PressEvent) => void,
+  onResponderStart?: ?(e: GestureResponderEvent) => void,
+  onResponderEnd?: ?(e: GestureResponderEvent) => void,
 
   /**
    * The responder has been taken from the `View`. Might be taken by other
@@ -217,7 +213,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onresponderterminate
    */
-  onResponderTerminate?: ?(e: PressEvent) => void,
+  onResponderTerminate?: ?(e: GestureResponderEvent) => void,
 
   /**
    * Some other `View` wants to become responder and is asking this `View` to
@@ -228,7 +224,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onresponderterminationrequest
    */
-  onResponderTerminationRequest?: ?(e: PressEvent) => boolean,
+  onResponderTerminationRequest?: ?(e: GestureResponderEvent) => boolean,
 
   /**
    * Does this view want to become responder on the start of a touch?
@@ -238,7 +234,7 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onstartshouldsetresponder
    */
-  onStartShouldSetResponder?: ?(e: PressEvent) => boolean,
+  onStartShouldSetResponder?: ?(e: GestureResponderEvent) => boolean,
 
   /**
    * If a parent `View` wants to prevent a child `View` from becoming responder
@@ -249,60 +245,24 @@ type GestureResponderEventProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/view#onstartshouldsetrespondercapture
    */
-  onStartShouldSetResponderCapture?: ?(e: PressEvent) => boolean,
-|}>;
+  onStartShouldSetResponderCapture?: ?(e: GestureResponderEvent) => boolean,
+}>;
 
-type AndroidDrawableThemeAttr = $ReadOnly<{|
+type AndroidDrawableThemeAttr = $ReadOnly<{
   type: 'ThemeAttrAndroid',
   attribute: string,
-|}>;
+}>;
 
-type AndroidDrawableRipple = $ReadOnly<{|
+type AndroidDrawableRipple = $ReadOnly<{
   type: 'RippleAndroid',
   color?: ?number,
   borderless?: ?boolean,
   rippleRadius?: ?number,
-|}>;
+}>;
 
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 
-type AndroidViewProps = $ReadOnly<{|
-  /**
-   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
-   * the text is read aloud. The value should should match the nativeID of the related element.
-   *
-   * @platform android
-   */
-  accessibilityLabelledBy?: ?string | ?Array<string>,
-
-  /**
-   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
-   * the text is read aloud. The value should should match the nativeID of the related element.
-   *
-   * @platform android
-   */
-  'aria-labelledby'?: ?string,
-
-  /**
-   * Indicates to accessibility services whether the user should be notified
-   * when this view changes. Works for Android API >= 19 only.
-   *
-   * @platform android
-   *
-   * See https://reactnative.dev/docs/view#accessibilityliveregion
-   */
-  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
-
-  /**
-   * Indicates to accessibility services whether the user should be notified
-   * when this view changes. Works for Android API >= 19 only.
-   *
-   * @platform android
-   *
-   * See https://reactnative.dev/docs/view#accessibilityliveregion
-   */
-  'aria-live'?: ?('polite' | 'assertive' | 'off'),
-
+export type ViewPropsAndroid = $ReadOnly<{
   nativeBackgroundAndroid?: ?AndroidDrawable,
   nativeForegroundAndroid?: ?AndroidDrawable,
 
@@ -316,17 +276,6 @@ type AndroidViewProps = $ReadOnly<{|
    */
   renderToHardwareTextureAndroid?: ?boolean,
 
-  /**
-   * Controls how view is important for accessibility which is if it
-   * fires accessibility events and if it is reported to accessibility services
-   * that query the screen. Works for Android only.
-   *
-   * @platform android
-   *
-   * See https://reactnative.dev/docs/view#importantforaccessibility
-   */
-  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
-
   /**
    * Whether to force the Android TV focus engine to move focus to this view.
    *
@@ -374,7 +323,7 @@ type AndroidViewProps = $ReadOnly<{|
    *
    * @platform android
    */
-  focusable?: boolean,
+  focusable?: ?boolean,
 
   /**
    * Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
@@ -394,70 +343,10 @@ type AndroidViewProps = $ReadOnly<{|
    *
    * @platform android
    */
-  onClick?: ?(event: PressEvent) => mixed,
-|}>;
-
-type IOSViewProps = $ReadOnly<{|
-  /**
-   * Prevents view from being inverted if set to true and color inversion is turned on.
-   *
-   * @platform ios
-   */
-  accessibilityIgnoresInvertColors?: ?boolean,
-
-  /**
-   * A value indicating whether VoiceOver should ignore the elements
-   * within views that are siblings of the receiver.
-   * Default is `false`.
-   *
-   * @platform ios
-   *
-   * See https://reactnative.dev/docs/view#accessibilityviewismodal
-   */
-  accessibilityViewIsModal?: ?boolean,
-
-  /**
-   * @platform ios
-   *
-   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
-   */
-  accessibilityShowsLargeContentViewer?: ?boolean,
-
-  /**
-   * @platform ios
-   *
-   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
-   */
-  accessibilityLargeContentTitle?: ?string,
-
-  /**
-   * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
-   * should be accessible to the user.
-   * Default is `false`.
-   *
-   *  @platform ios
-   */
-  'aria-modal'?: ?boolean,
-
-  /**
-   * A value indicating whether the accessibility elements contained within
-   * this accessibility element are hidden.
-   *
-   * @platform ios
-   *
-   * See https://reactnative.dev/docs/view#accessibilityElementsHidden
-   */
-  accessibilityElementsHidden?: ?boolean,
-
-  /**
-   * Indicates to the accessibility services that the UI component is in
-   * a specific language. The provided string should be formatted following
-   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
-   *
-   * @platform ios
-   */
-  accessibilityLanguage?: ?Stringish,
+  onClick?: ?(event: GestureResponderEvent) => mixed,
+}>;
 
+export type ViewPropsIOS = $ReadOnly<{
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *
@@ -466,7 +355,7 @@ type IOSViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#shouldrasterizeios
    */
   shouldRasterizeIOS?: ?boolean,
-|}>;
+}>;
 
 // [Windows
 export const EventPhase = {
@@ -490,7 +379,7 @@ export type HandledKeyboardEvent = $ReadOnly<{|
   handledEventPhase?: number,
 |}>;
 
-type WindowsViewProps = $ReadOnly<{|
+type ViewPropsWindows = $ReadOnly<{|
   /**
    * Key up event
    *
@@ -532,104 +421,10 @@ type WindowsViewProps = $ReadOnly<{|
 |}>;
 // Windows]
 
-export type ViewProps = $ReadOnly<{|
-  ...DirectEventProps,
-  ...GestureResponderEventProps,
-  ...MouseEventProps,
-  ...PointerEventProps,
-  ...FocusEventProps,
-  ...TouchEventProps,
-  ...AndroidViewProps,
-  ...IOSViewProps,
-  ...WindowsViewProps, // [Windows]
-
+type ViewBaseProps = $ReadOnly<{
   children?: Node,
   style?: ?ViewStyleProp,
 
-  /**
-   * When `true`, indicates that the view is an accessibility element.
-   * By default, all the touchable elements are accessible.
-   *
-   * See https://reactnative.dev/docs/view#accessible
-   */
-  accessible?: ?boolean,
-
-  /**
-   * Overrides the text that's read by the screen reader when the user interacts
-   * with the element. By default, the label is constructed by traversing all
-   * the children and accumulating all the `Text` nodes separated by space.
-   *
-   * See https://reactnative.dev/docs/view#accessibilitylabel
-   */
-  accessibilityLabel?: ?Stringish,
-
-  /**
-   * An accessibility hint helps users understand what will happen when they perform
-   * an action on the accessibility element when that result is not obvious from the
-   * accessibility label.
-   *
-   *
-   * See https://reactnative.dev/docs/view#accessibilityHint
-   */
-  accessibilityHint?: ?Stringish,
-
-  /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/facebook/react-native/issues/34424
-   */
-  'aria-label'?: ?Stringish,
-
-  /**
-   * Indicates to accessibility services to treat UI component like a specific role.
-   */
-  accessibilityRole?: ?AccessibilityRole,
-
-  /**
-   * Alias for accessibilityRole
-   */
-  role?: ?Role,
-
-  /**
-   * Indicates to accessibility services that UI Component is in a specific State.
-   */
-  accessibilityState?: ?AccessibilityState,
-  accessibilityValue?: ?AccessibilityValue,
-
-  /**
-   * alias for accessibilityState
-   * It represents textual description of a component's value, or for range-based components, such as sliders and progress bars.
-   */
-  'aria-valuemax'?: ?AccessibilityValue['max'],
-  'aria-valuemin'?: ?AccessibilityValue['min'],
-  'aria-valuenow'?: ?AccessibilityValue['now'],
-  'aria-valuetext'?: ?AccessibilityValue['text'],
-
-  /**
-   * Provides an array of custom actions available for accessibility.
-   *
-   */
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
-
-  /**
-   * alias for accessibilityState
-   *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
-   */
-  'aria-busy'?: ?boolean,
-  'aria-checked'?: ?boolean | 'mixed',
-  'aria-disabled'?: ?boolean,
-  'aria-expanded'?: ?boolean,
-  'aria-selected'?: ?boolean,
-  'aria-readonly'?: ?boolean, // Windows
-  /** A value indicating whether the accessibility elements contained within
-   * this accessibility element are hidden.
-   *
-   * See https://reactnative.dev/docs/view#aria-hidden
-   */
-  'aria-hidden'?: ?boolean,
-  'aria-multiselectable'?: ?boolean, // Windows
-  'aria-required'?: ?boolean, // Windows
-
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an
@@ -713,4 +508,23 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
-|}>;
+
+  'aria-readonly'?: ?boolean, // [Windows]
+
+  'aria-multiselectable'?: ?boolean, // [Windows]
+  'aria-required'?: ?boolean, // [Windows]
+}>;
+
+export type ViewProps = $ReadOnly<{
+  ...DirectEventProps,
+  ...GestureResponderHandlers,
+  ...MouseEventProps,
+  ...PointerEventProps,
+  ...FocusEventProps,
+  ...TouchEventProps,
+  ...ViewPropsAndroid,
+  ...ViewPropsIOS,
+  ...ViewPropsWindows, // [Windows]
+  ...AccessibilityProps,
+  ...ViewBaseProps,
+}>;

package/Libraries/Core/Devtools/getDevServer.js

@@ -25,7 +25,7 @@ type DevServerInfo = {
  * Many RN development tools rely on the development server (packager) running
  * @return URL to packager with trailing slash
  */
-function getDevServer(): DevServerInfo {
+export default function getDevServer(): DevServerInfo {
   if (_cachedDevServerURL === undefined) {
     const scriptUrl = NativeSourceCode.getConstants().scriptURL;
     const match = scriptUrl.match(/^https?:\/\/.*?\//);
@@ -39,5 +39,3 @@ function getDevServer(): DevServerInfo {
     bundleLoadedFromServer: _cachedDevServerURL !== null,
   };
 }
-
-module.exports = getDevServer;

package/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -103,7 +103,9 @@ function buildUrlForBundle(bundlePathAndQuery: string) {
   );
 }
 
-module.exports = function (bundlePathAndQuery: string): Promise<void> {
+export default function loadBundleFromServer(
+  bundlePathAndQuery: string,
+): Promise<void> {
   const requestUrl = buildUrlForBundle(bundlePathAndQuery);
   let loadPromise = cachedPromisesByUrl.get(requestUrl);
 
@@ -149,4 +151,4 @@ module.exports = function (bundlePathAndQuery: string): Promise<void> {
 
   cachedPromisesByUrl.set(requestUrl, loadPromise);
   return loadPromise;
-};
+}

package/Libraries/Core/Devtools/loadBundleFromServer.windows.js

@@ -103,7 +103,9 @@ function buildUrlForBundle(bundlePathAndQuery: string) {
   );
 }
 
-module.exports = function (bundlePathAndQuery: string): Promise<void> {
+export default function loadBundleFromServer(
+  bundlePathAndQuery: string,
+): Promise<void> {
   const requestUrl = buildUrlForBundle(bundlePathAndQuery);
   let loadPromise = cachedPromisesByUrl.get(requestUrl);
 
@@ -150,4 +152,4 @@ module.exports = function (bundlePathAndQuery: string): Promise<void> {
 
   cachedPromisesByUrl.set(requestUrl, loadPromise);
   return loadPromise;
-};
+}

package/Libraries/Core/Devtools/openFileInEditor.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const getDevServer = require('./getDevServer');
+const getDevServer = require('./getDevServer').default;
 
-function openFileInEditor(file: string, lineNumber: number) {
+export default function openFileInEditor(file: string, lineNumber: number) {
   // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-stack-frame', {
     method: 'POST',
@@ -22,5 +22,3 @@ function openFileInEditor(file: string, lineNumber: number) {
     body: JSON.stringify({file, lineNumber}),
   });
 }
-
-module.exports = openFileInEditor;

package/Libraries/Core/Devtools/openURLInBrowser.js

@@ -10,14 +10,15 @@
 
 'use strict';
 
-const getDevServer = require('./getDevServer');
+const getDevServer = require('./getDevServer').default;
 
-function openURLInBrowser(url: string) {
+export default function openURLInBrowser(url: string) {
   // $FlowFixMe[unused-promise]
   fetch(getDevServer().url + 'open-url', {
     method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
     body: JSON.stringify({url}),
   });
 }
-
-module.exports = openURLInBrowser;

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -13,7 +13,7 @@
 import type {StackFrame} from '../NativeExceptionsManager';
 import type {HermesParsedStack} from './parseHermesStack';
 
-const parseHermesStack = require('./parseHermesStack');
+const parseHermesStack = require('./parseHermesStack').default;
 
 function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
   const frames: Array<StackFrame> = [];
@@ -38,7 +38,9 @@ function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
   return frames;
 }
 
-function parseErrorStack(errorStack?: string): Array<StackFrame> {
+export default function parseErrorStack(
+  errorStack?: string,
+): Array<StackFrame> {
   if (errorStack == null) {
     return [];
   }
@@ -55,5 +57,3 @@ function parseErrorStack(errorStack?: string): Array<StackFrame> {
 
   return parsedStack;
 }
-
-module.exports = parseErrorStack;

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -119,7 +119,7 @@ function parseLine(line: string): ?HermesStackEntry {
   }
 }
 
-module.exports = function parseHermesStack(stack: string): HermesParsedStack {
+export default function parseHermesStack(stack: string): HermesParsedStack {
   const lines = stack.split(/\n/);
   let entries: Array<HermesStackEntryFrame | HermesStackEntrySkipped> = [];
   let lastMessageLine = -1;
@@ -144,4 +144,4 @@ module.exports = function parseHermesStack(stack: string): HermesParsedStack {
   }
   const message = lines.slice(0, lastMessageLine + 1).join('\n');
   return {message, entries};
-};
+}

package/Libraries/Core/Devtools/symbolicateStackTrace.js

@@ -12,7 +12,7 @@
 
 import type {StackFrame} from '../NativeExceptionsManager';
 
-const getDevServer = require('./getDevServer');
+const getDevServer = require('./getDevServer').default;
 
 export type CodeFrame = $ReadOnly<{
   content: string,
@@ -29,7 +29,7 @@ export type SymbolicatedStackTrace = $ReadOnly<{
   codeFrame: ?CodeFrame,
 }>;
 
-async function symbolicateStackTrace(
+export default async function symbolicateStackTrace(
   stack: Array<StackFrame>,
   extraData?: mixed,
 ): Promise<SymbolicatedStackTrace> {
@@ -39,12 +39,13 @@ async function symbolicateStackTrace(
   }
 
   // Lazy-load `fetch` until the first symbolication call to avoid circular requires.
-  const fetch = global.fetch ?? require('../../Network/fetch');
+  const fetch = global.fetch ?? require('../../Network/fetch').fetch;
   const response = await fetch(devServer.url + 'symbolicate', {
     method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
     body: JSON.stringify({stack, extraData}),
   });
   return await response.json();
 }
-
-module.exports = symbolicateStackTrace;