@office-iss/react-native-win32 0.0.0-canary.283 → 0.0.0-canary.285

package/IntegrationTests/IntegrationTestHarnessTest.js

@@ -10,65 +10,49 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {NativeModules, StyleSheet, Text, View} from 'react-native';
 
-const {Text, View, StyleSheet} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+const {TestModule} = NativeModules;
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   shouldThrow?: boolean,
   waitOneFrame?: boolean,
-|}>;
+}>;
 
-type State = {|
-  done: boolean,
-|};
+function IntegrationTestHarnessTest(props: Props): React.Node {
+  const [done, setDone] = useState(false);
 
-class IntegrationTestHarnessTest extends React.Component<Props, State> {
-  state: State = {
-    done: false,
-  };
+  useEffect(() => {
+    const runTest = () => {
+      if (props.shouldThrow) {
+        throw new Error('Throwing error because shouldThrow');
+      }
+      if (!TestModule) {
+        throw new Error('RCTTestModule is not registered.');
+      } else if (!TestModule.markTestCompleted) {
+        throw new Error('RCTTestModule.markTestCompleted not defined.');
+      }
+      setDone(true);
+      TestModule.markTestCompleted();
+    };
 
-  componentDidMount() {
-    if (this.props.waitOneFrame) {
-      requestAnimationFrame(this.runTest);
+    if (props.waitOneFrame) {
+      requestAnimationFrame(runTest);
     } else {
-      this.runTest();
-    }
-  }
-
-  runTest: () => void = () => {
-    if (this.props.shouldThrow) {
-      throw new Error('Throwing error because shouldThrow');
+      runTest();
     }
-    if (!TestModule) {
-      throw new Error('RCTTestModule is not registered.');
-    } else if (!TestModule.markTestCompleted) {
-      throw new Error('RCTTestModule.markTestCompleted not defined.');
-    }
-    this.setState({done: true}, () => {
-      TestModule.markTestCompleted();
-    });
-  };
+  }, [props.shouldThrow, props.waitOneFrame]);
 
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <Text>
-          {
-            /* $FlowFixMe[incompatible-type] (>=0.54.0 site=react_native_fb,react_
-             * native_oss) This comment suppresses an error found when Flow v0.54
-             * was deployed. To see the error delete this comment and run Flow.
-             */
-            // $FlowFixMe[unsafe-addition]
-            this.constructor.displayName + ': '
-          }
-          {this.state.done ? 'Done' : 'Testing...'}
-        </Text>
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <Text>
+        {IntegrationTestHarnessTest.name + ': '}
+        {done ? 'Done' : 'Testing...'}
+      </Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -78,6 +62,4 @@ const styles = StyleSheet.create({
   },
 });
 
-IntegrationTestHarnessTest.displayName = 'IntegrationTestHarnessTest';
-
-module.exports = IntegrationTestHarnessTest;
+export default IntegrationTestHarnessTest;

package/IntegrationTests/IntegrationTestsApp.js

@@ -32,11 +32,14 @@ const TESTS = [
   require('./GlobalEvalWithSourceUrlTest'),
 ];
 
-TESTS.forEach(
-  /* $FlowFixMe[incompatible-call] (>=0.54.0 site=react_native_fb,react_native_
-   * oss) This comment suppresses an error found when Flow v0.54 was deployed.
-   * To see the error delete this comment and run Flow. */
-  test => AppRegistry.registerComponent(test.displayName, () => test),
+TESTS.forEach(test =>
+  AppRegistry.registerComponent(
+    test.displayName || test.name || '',
+    /* $FlowFixMe[incompatible-call] (>=0.54.0 site=react_native_fb,react_native_
+     * oss) This comment suppresses an error found when Flow v0.54 was deployed.
+     * To see the error delete this comment and run Flow. */
+    () => test,
+  ),
 );
 
 // Modules required for integration tests
@@ -78,7 +81,9 @@ class IntegrationTestsApp extends React.Component<{...}, $FlowFixMeState> {
                * deployed. To see the error, delete this comment and run Flow.
                */
               style={styles.row}>
-              <Text style={styles.testName}>{test.displayName}</Text>
+              <Text style={styles.testName}>
+                {test.displayName || test.name}
+              </Text>
             </TouchableOpacity>,
             <View style={styles.separator} />,
           ])}

package/IntegrationTests/LayoutEventsTest.js

@@ -26,7 +26,7 @@ function debug(...args: Array<void | Layout | string>) {
   // console.log.apply(null, arguments);
 }
 
-type Props = $ReadOnly<{||}>;
+type Props = $ReadOnly<{}>;
 
 type State = {
   didAnimation: boolean,

package/IntegrationTests/LoggingTestModule.js

@@ -10,7 +10,8 @@
 'use strict';
 
 const invariant = require('invariant');
-const BatchedBridge = require('react-native/Libraries/BatchedBridge/BatchedBridge');
+const BatchedBridge =
+  require('react-native/Libraries/BatchedBridge/BatchedBridge').default;
 
 const LoggingTestModule = {
   logToConsole: function (str) {

package/IntegrationTests/PromiseTest.js

@@ -10,69 +10,77 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+import {NativeModules, View} from 'react-native';
 
-class PromiseTest extends React.Component<{...}> {
-  shouldResolve: boolean = false;
-  shouldReject: boolean = false;
-  shouldSucceedAsync: boolean = false;
-  shouldThrowAsync: boolean = false;
+const {TestModule} = NativeModules;
 
-  componentDidMount() {
-    // $FlowFixMe[unused-promise]
-    Promise.all([
-      this.testShouldResolve(),
-      this.testShouldReject(),
-      this.testShouldSucceedAsync(),
-      this.testShouldThrowAsync(),
-    ]).then(() =>
-      TestModule.markTestPassed(
-        this.shouldResolve &&
-          this.shouldReject &&
-          this.shouldSucceedAsync &&
-          this.shouldThrowAsync,
-      ),
-    );
-  }
+function PromiseTest(): React.Node {
+  const shouldResolve = useRef(false);
+  const shouldReject = useRef(false);
+  const shouldSucceedAsync = useRef(false);
+  const shouldThrowAsync = useRef(false);
 
-  testShouldResolve: () => any = () => {
+  const testShouldResolve = () => {
     return TestModule.shouldResolve()
-      .then(() => (this.shouldResolve = true))
-      .catch(() => (this.shouldResolve = false));
+      .then(() => {
+        shouldResolve.current = true;
+      })
+      .catch(() => {
+        shouldResolve.current = false;
+      });
   };
 
-  testShouldReject: () => any = () => {
+  const testShouldReject = () => {
     return TestModule.shouldReject()
-      .then(() => (this.shouldReject = false))
-      .catch(() => (this.shouldReject = true));
+      .then(() => {
+        shouldReject.current = false;
+      })
+      .catch(() => {
+        shouldReject.current = true;
+      });
   };
 
-  testShouldSucceedAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldSucceedAsync = async () => {
     try {
       await TestModule.shouldResolve();
-      this.shouldSucceedAsync = true;
+      shouldSucceedAsync.current = true;
     } catch (e) {
-      this.shouldSucceedAsync = false;
+      shouldSucceedAsync.current = false;
     }
   };
 
-  testShouldThrowAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldThrowAsync = async () => {
     try {
       await TestModule.shouldReject();
-      this.shouldThrowAsync = false;
+      shouldThrowAsync.current = false;
     } catch (e) {
-      this.shouldThrowAsync = true;
+      shouldThrowAsync.current = true;
     }
   };
 
-  render(): React.Node {
-    return <View />;
-  }
-}
+  useEffect(() => {
+    async function runTests() {
+      await Promise.all([
+        testShouldResolve(),
+        testShouldReject(),
+        testShouldSucceedAsync(),
+        testShouldThrowAsync(),
+      ]);
 
-PromiseTest.displayName = 'PromiseTest';
+      TestModule.markTestPassed(
+        shouldResolve.current &&
+          shouldReject.current &&
+          shouldSucceedAsync.current &&
+          shouldThrowAsync.current,
+      );
+    }
+
+    runTests().catch(console.error);
+  }, []);
+
+  return <View />;
+}
 
-module.exports = PromiseTest;
+export default PromiseTest;

package/IntegrationTests/SimpleSnapshotTest.js

@@ -10,32 +10,29 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, StyleSheet, View} from 'react-native';
 
-const {StyleSheet, View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+const {TestModule} = NativeModules;
 
-class SimpleSnapshotTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function SimpleSnapshotTest(): React.Node {
+  const done = (success: boolean) => {
+    TestModule.markTestPassed(success);
+  };
+  useEffect(() => {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
-    requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
-  }
-
-  done: (success: boolean) => void = (success: boolean) => {
-    TestModule.markTestPassed(success);
-  };
-
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <View style={styles.box1} />
-        <View style={styles.box2} />
-      </View>
-    );
-  }
+    requestAnimationFrame(() => TestModule.verifySnapshot(done));
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.box1} />
+      <View style={styles.box2} />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -57,6 +54,4 @@ const styles = StyleSheet.create({
   },
 });
 
-SimpleSnapshotTest.displayName = 'SimpleSnapshotTest';
-
-module.exports = SimpleSnapshotTest;
+export default SimpleSnapshotTest;

package/IntegrationTests/SyncMethodTest.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, View} from 'react-native';
 
-const {TestModule, RNTesterTestModule} = ReactNative.NativeModules;
+const {TestModule, RNTesterTestModule} = NativeModules;
 
-class SyncMethodTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function SyncMethodTest(): React.Node {
+  useEffect(() => {
     if (
       RNTesterTestModule.echoString('test string value') !== 'test string value'
     ) {
@@ -41,13 +41,9 @@ class SyncMethodTest extends React.Component<{...}> {
         );
       }
     });
-  }
+  }, []);
 
-  render(): React.Node {
-    return <View />;
-  }
+  return <View />;
 }
 
-SyncMethodTest.displayName = 'SyncMethodTest';
-
-module.exports = SyncMethodTest;
+export default SyncMethodTest;

package/IntegrationTests/TimersTest.js

@@ -15,12 +15,12 @@ const ReactNative = require('react-native');
 const {StyleSheet, Text, View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
-type Props = $ReadOnly<{||}>;
+type Props = $ReadOnly<{}>;
 
-type State = {|
+type State = {
   count: number,
   done: boolean,
-|};
+};
 
 type ImmediateID = Object;
 

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -16,6 +16,39 @@ import RCTActionSheetManager from './NativeActionSheetManager';
 const processColor = require('../StyleSheet/processColor').default;
 const invariant = require('invariant');
 
+export type ActionSheetIOSOptions = $ReadOnly<{
+  title?: ?string,
+  message?: ?string,
+  options: Array<string>,
+  destructiveButtonIndex?: ?number | ?Array<number>,
+  cancelButtonIndex?: ?number,
+  anchor?: ?number,
+  tintColor?: ColorValue | ProcessedColorValue,
+  cancelButtonTintColor?: ColorValue | ProcessedColorValue,
+  disabledButtonTintColor?: ColorValue | ProcessedColorValue,
+  userInterfaceStyle?: string,
+  disabledButtonIndices?: Array<number>,
+}>;
+
+export type ShareActionSheetIOSOptions = $ReadOnly<{
+  message?: ?string,
+  url?: ?string,
+  subject?: ?string,
+  anchor?: ?number,
+  tintColor?: ?number,
+  cancelButtonTintColor?: ?number,
+  disabledButtonTintColor?: ?number,
+  excludedActivityTypes?: ?Array<string>,
+  userInterfaceStyle?: ?string,
+}>;
+
+export type ShareActionSheetError = $ReadOnly<{
+  domain: string,
+  code: string,
+  userInfo?: ?Object,
+  message: string,
+}>;
+
 /**
  * Display action sheets and share sheets on iOS.
  *
@@ -40,19 +73,7 @@ const ActionSheetIOS = {
    * See https://reactnative.dev/docs/actionsheetios#showactionsheetwithoptions
    */
   showActionSheetWithOptions(
-    options: {|
-      +title?: ?string,
-      +message?: ?string,
-      +options: Array<string>,
-      +destructiveButtonIndex?: ?number | ?Array<number>,
-      +cancelButtonIndex?: ?number,
-      +anchor?: ?number,
-      +tintColor?: ColorValue | ProcessedColorValue,
-      +cancelButtonTintColor?: ColorValue | ProcessedColorValue,
-      +disabledButtonTintColor?: ColorValue | ProcessedColorValue,
-      +userInterfaceStyle?: string,
-      +disabledButtonIndices?: Array<number>,
-    |},
+    options: ActionSheetIOSOptions,
     callback: (buttonIndex: number) => void,
   ) {
     invariant(
@@ -136,9 +157,9 @@ const ActionSheetIOS = {
    * See https://reactnative.dev/docs/actionsheetios#showshareactionsheetwithoptions
    */
   showShareActionSheetWithOptions(
-    options: Object,
-    failureCallback: Function,
-    successCallback: Function,
+    options: ShareActionSheetIOSOptions,
+    failureCallback: Function | ((error: ShareActionSheetError) => void),
+    successCallback: Function | ((success: boolean, method: ?string) => void),
   ) {
     invariant(
       typeof options === 'object' && options !== null,
@@ -154,7 +175,7 @@ const ActionSheetIOS = {
     );
     invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
     RCTActionSheetManager.showShareActionSheetWithOptions(
-      {...options, tintColor: processColor(options.tintColor)},
+      {...options, tintColor: processColor(options.tintColor) as $FlowFixMe},
       failureCallback,
       successCallback,
     );
@@ -172,4 +193,4 @@ const ActionSheetIOS = {
   },
 };
 
-module.exports = ActionSheetIOS;
+export default ActionSheetIOS;

package/Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeActionSheetManager';
-import NativeActionSheetManager from '../../src/private/specs/modules/NativeActionSheetManager';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeActionSheetManager';
+import NativeActionSheetManager from '../../src/private/specs_DEPRECATED/modules/NativeActionSheetManager';
 export default NativeActionSheetManager;

package/Libraries/Alert/Alert.flow.js

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+export type AlertType =
+  | 'default'
+  | 'plain-text'
+  | 'secure-text'
+  | 'login-password';
+
+export type AlertButtonStyle = 'default' | 'cancel' | 'destructive';
+
+export type AlertButton = {
+  text?: string,
+  onPress?: ?((value?: string) => any) | ?Function,
+  isPreferred?: boolean,
+  style?: AlertButtonStyle,
+  ...
+};
+
+export type Buttons = Array<AlertButton>;
+
+export type AlertOptions = {
+  /** @platform android */
+  cancelable?: ?boolean,
+  userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
+  /** @platform android */
+  onDismiss?: ?() => void,
+  ...
+};
+
+/**
+ * Launches an alert dialog with the specified title and message.
+ *
+ * See https://reactnative.dev/docs/alert
+ */
+declare class Alert {
+  static alert(
+    title: ?string,
+    message?: ?string,
+    buttons?: Buttons,
+    options?: AlertOptions,
+  ): void;
+
+  static prompt(
+    title: ?string,
+    message?: ?string,
+    callbackOrButtons?: ?(((text: string) => void) | Buttons),
+    type?: ?AlertType,
+    defaultValue?: string,
+    keyboardType?: string,
+    options?: AlertOptions,
+  ): void;
+}
+
+export default Alert;

package/Libraries/Alert/Alert.js

@@ -9,42 +9,19 @@
  */
 
 import type {DialogOptions} from '../NativeModules/specs/NativeDialogManagerAndroid';
+import type {AlertOptions, AlertType, Buttons} from './Alert.flow';
 
 import Platform from '../Utilities/Platform';
 import RCTAlertManager from './RCTAlertManager';
 
-export type AlertType =
-  | 'default'
-  | 'plain-text'
-  | 'secure-text'
-  | 'login-password';
-export type AlertButtonStyle = 'default' | 'cancel' | 'destructive';
-export type Buttons = Array<{
-  text?: string,
-  onPress?: ?Function,
-  isPreferred?: boolean,
-  style?: AlertButtonStyle,
-  ...
-}>;
+export type * from './Alert.flow';
 
-type Options = {
-  cancelable?: ?boolean,
-  userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
-  onDismiss?: ?() => void,
-  ...
-};
-
-/**
- * Launches an alert dialog with the specified title and message.
- *
- * See https://reactnative.dev/docs/alert
- */
 class Alert {
   static alert(
     title: ?string,
     message?: ?string,
     buttons?: Buttons,
-    options?: Options,
+    options?: AlertOptions,
   ): void {
     if (Platform.OS === 'ios') {
       Alert.prompt(
@@ -123,7 +100,7 @@ class Alert {
     type?: ?AlertType = 'plain-text',
     defaultValue?: string,
     keyboardType?: string,
-    options?: Options,
+    options?: AlertOptions,
   ): void {
     if (Platform.OS === 'ios') {
       let callbacks: Array<?any> = [];
@@ -174,4 +151,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;

package/Libraries/Alert/Alert.win32.js

@@ -8,44 +8,22 @@
  * @flow
  */
 
+import type {AlertOptions, AlertType, Buttons} from './Alert.flow';
+
 // [Windows
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 // $FlowFixMe[underconstrained-implicit-instantiation]
 const PLYAlertManager = TurboModuleRegistry.getEnforcing('Alert');
 // Windows]
 
-export type AlertType =
-  | 'default'
-  | 'plain-text'
-  | 'secure-text'
-  | 'login-password';
-export type AlertButtonStyle = 'default' | 'cancel' | 'destructive';
-export type Buttons = Array<{
-  text?: string,
-  onPress?: ?Function,
-  isPreferred?: boolean,
-  style?: AlertButtonStyle,
-  ...
-}>;
-
-type Options = {
-  cancelable?: ?boolean,
-  userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
-  onDismiss?: ?() => void,
-  ...
-};
+export type * from './Alert.flow';
 
-/**
- * Launches an alert dialog with the specified title and message.
- *
- * See https://reactnative.dev/docs/alert
- */
 class Alert {
   static alert(
     title: ?string,
     message?: ?string,
     buttons?: Buttons,
-    options?: Options,
+    options?: AlertOptions,
   ): void {
     // [Windows
     PLYAlertManager.showAlert(
@@ -83,7 +61,7 @@ class Alert {
     type?: ?AlertType = 'plain-text',
     defaultValue?: string,
     keyboardType?: string,
-    options?: Options,
+    options?: AlertOptions,
   ): void {
     // [Windows
     throw new Error(
@@ -93,4 +71,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;