@office-iss/react-native-win32 0.0.0-canary.282 → 0.0.0-canary.284

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

@@ -40,7 +40,7 @@ const ActionSheetIOS = {
    * See https://reactnative.dev/docs/actionsheetios#showactionsheetwithoptions
    */
   showActionSheetWithOptions(
-    options: {|
+    options: {
       +title?: ?string,
       +message?: ?string,
       +options: Array<string>,
@@ -52,7 +52,7 @@ const ActionSheetIOS = {
       +disabledButtonTintColor?: ColorValue | ProcessedColorValue,
       +userInterfaceStyle?: string,
       +disabledButtonIndices?: Array<number>,
-    |},
+    },
     callback: (buttonIndex: number) => void,
   ) {
     invariant(
@@ -172,4 +172,4 @@ const ActionSheetIOS = {
   },
 };
 
-module.exports = ActionSheetIOS;
+export default ActionSheetIOS;

package/Libraries/Alert/Alert.js

@@ -174,4 +174,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;

package/Libraries/Alert/Alert.win32.js

@@ -93,4 +93,4 @@ class Alert {
   }
 }
 
-module.exports = Alert;
+export default Alert;

package/Libraries/Alert/RCTAlertManager.android.js

@@ -11,7 +11,7 @@ import NativeDialogManagerAndroid from '../NativeModules/specs/NativeDialogManag
 
 function emptyCallback() {}
 
-module.exports = {
+export default {
   alertWithArgs: function (args, callback) {
     // TODO(5998984): Polyfill it correctly with DialogManagerAndroid
     if (!NativeDialogManagerAndroid) {

package/Libraries/Alert/RCTAlertManager.ios.js

@@ -12,7 +12,7 @@ import type {Args} from './NativeAlertManager';
 
 import NativeAlertManager from './NativeAlertManager';
 
-module.exports = {
+export default {
   alertWithArgs(
     args: Args,
     callback: (id: number, value: string) => void,

package/Libraries/Animated/AnimatedMock.js

@@ -192,4 +192,4 @@ export default {
   forkEvent: AnimatedImplementation.forkEvent,
   unforkEvent: AnimatedImplementation.unforkEvent,
   Event: AnimatedEvent,
-};
+} as typeof AnimatedImplementation;

package/Libraries/Animated/AnimatedWeb.js

@@ -10,17 +10,35 @@
 
 'use strict';
 
+import type {AnimatedComponentType} from './createAnimatedComponent';
+
 import AnimatedImplementation from './AnimatedImplementation';
+import React from 'react';
 
 export default {
   ...AnimatedImplementation,
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  div: (AnimatedImplementation.createAnimatedComponent('div'): $FlowFixMe),
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  span: (AnimatedImplementation.createAnimatedComponent('span'): $FlowFixMe),
-  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
-   * types. Plain intrinsic components can't be typed like this */
-  img: (AnimatedImplementation.createAnimatedComponent('img'): $FlowFixMe),
+  div: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'div'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'div',
+  ) as AnimatedComponentType<React.PropsOf<'div'>>,
+  span: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'span'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'span',
+  ) as AnimatedComponentType<React.PropsOf<'span'>>,
+  img: AnimatedImplementation.createAnimatedComponent<
+    React.PropsOf<'img'>,
+    mixed,
+  >(
+    /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+     * types. Plain intrinsic components can't be typed like this */
+    'img',
+  ) as AnimatedComponentType<React.PropsOf<'img'>>,
 };

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -9,6 +9,7 @@
  */
 
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type Animation, {EndCallback} from '../animations/Animation';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedNode from './AnimatedNode';
@@ -84,6 +85,7 @@ function _executeAsAnimatedBatch(id: string, operation: () => void) {
  * See https://reactnative.dev/docs/animatedvalue
  */
 export default class AnimatedValue extends AnimatedWithChildren {
+  #listenerCount: number = 0;
   #updateSubscription: ?EventSubscription = null;
 
   _value: number;
@@ -105,20 +107,8 @@ export default class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
-  __attach(): void {
+  __detach() {
     if (this.__isNative) {
-      // NOTE: In theory, we should only need to call this when any listeners
-      // are added. However, there is a global `onUserDrivenAnimationEnded`
-      // listener that relies on `onAnimatedValueUpdate` having fired to update
-      // the values in JavaScript. If that listener is removed, this could be
-      // re-optimized.
-      this.#ensureUpdateSubscriptionExists();
-    }
-  }
-
-  __detach(): void {
-    if (this.__isNative) {
-      this.#updateSubscription?.remove();
       NativeAnimatedAPI.getValue(this.__getNativeTag(), value => {
         this._value = value - this._offset;
       });
@@ -131,6 +121,38 @@ export default class AnimatedValue extends AnimatedWithChildren {
     return this._value + this._offset;
   }
 
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    super.__makeNative(platformConfig);
+    if (this.#listenerCount > 0) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+  }
+
+  addListener(callback: (value: any) => mixed): string {
+    const id = super.addListener(callback);
+    this.#listenerCount++;
+    if (this.__isNative) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+    return id;
+  }
+
+  removeListener(id: string): void {
+    super.removeListener(id);
+    this.#listenerCount--;
+    if (this.__isNative && this.#listenerCount === 0) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
+  removeAllListeners(): void {
+    super.removeAllListeners();
+    this.#listenerCount = 0;
+    if (this.__isNative) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
   #ensureUpdateSubscriptionExists(): void {
     if (this.#updateSubscription != null) {
       return;