@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

package/IntegrationTests/ImageCachePolicyTest.js

@@ -10,10 +10,13 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {Image, View, Text, StyleSheet} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import type {ImageURISource} from 'react-native/Libraries/Image/ImageSource';
+
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {Image, NativeModules, StyleSheet, Text, View} from 'react-native';
+
+const {TestModule} = NativeModules;
 
 /*
  * The reload and force-cache tests don't actually verify that the complete functionality.
@@ -27,89 +30,71 @@ const {TestModule} = ReactNative.NativeModules;
 
 const TESTS = ['only-if-cached', 'default', 'reload', 'force-cache'];
 
-type Props = {...};
-type State = {
-  'only-if-cached'?: boolean,
-  default?: boolean,
-  reload?: boolean,
-  'force-cache'?: boolean,
-  ...
-};
+function ImageCachePolicyTest(): React.Node {
+  const [state, setState] = useState({
+    'only-if-cached': undefined,
+    default: undefined,
+    reload: undefined,
+    'force-cache': undefined,
+  });
 
-class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
-  state: $FlowFixMe | {...} = {};
+  const testComplete = (
+    name: $NonMaybeType<ImageURISource['cache']>,
+    pass: boolean,
+  ) => {
+    setState(prevState => ({
+      ...prevState,
+      [name]: pass,
+    }));
+  };
 
-  shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-    const results: Array<?boolean> = TESTS.map(x => nextState[x]);
+  useEffect(() => {
+    const results = TESTS.map(key => state[key]);
 
     if (!results.includes(undefined)) {
-      const result: boolean = results.reduce(
-        (x, y) => (x === y) === true,
-        true,
-      );
+      const result = results.reduce((x, y) => (x === y) === true, true);
       TestModule.markTestPassed(result);
     }
+  }, [state]);
 
-    return false;
-  }
-
-  testComplete(name: string, pass: boolean) {
-    this.setState({[name]: pass});
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <Text>Hello</Text>
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'only-if-cached',
-          }}
-          onLoad={() => this.testComplete('only-if-cached', false)}
-          onError={() => this.testComplete('only-if-cached', true)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'default',
-          }}
-          onLoad={() => this.testComplete('default', true)}
-          onError={() => this.testComplete('default', false)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'reload',
-          }}
-          onLoad={() => this.testComplete('reload', true)}
-          onError={() => this.testComplete('reload', false)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'force-cache',
-          }}
-          onLoad={() => this.testComplete('force-cache', true)}
-          onError={() => this.testComplete('force-cache', false)}
-          style={styles.base}
-        />
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <Text>Hello</Text>
+      <Image
+        source={getImageSource('only-if-cached')}
+        onLoad={() => testComplete('only-if-cached', false)}
+        onError={() => testComplete('only-if-cached', true)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('default')}
+        onLoad={() => testComplete('default', true)}
+        onError={() => testComplete('default', false)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('reload')}
+        onLoad={() => testComplete('reload', true)}
+        onError={() => testComplete('reload', false)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('force-cache')}
+        onLoad={() => testComplete('force-cache', true)}
+        onError={() => testComplete('force-cache', false)}
+        style={styles.base}
+      />
+    </View>
+  );
 }
 
+const getImageSource = (cache: ImageURISource['cache']) => ({
+  uri:
+    'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+    Date.now(),
+  cache,
+});
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -120,6 +105,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ImageCachePolicyTest.displayName = 'ImageCachePolicyTest';
-
-module.exports = ImageCachePolicyTest;
+export default ImageCachePolicyTest;

package/IntegrationTests/ImageSnapshotTest.js

@@ -10,33 +10,30 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {Image} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {Image, NativeModules} from 'react-native';
 
-class ImageSnapshotTest extends React.Component<{...}> {
-  componentDidMount(): void {
+const {TestModule} = NativeModules;
+
+function ImageSnapshotTest(): React.Node {
+  useEffect(() => {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
-  }
+  }, []);
 
-  done: (success: boolean) => void = (success: boolean) => {
+  const done = (success: boolean) => {
     TestModule.markTestPassed(success);
   };
 
-  render(): React.Node {
-    return (
-      <Image
-        source={require('./blue_square.png')}
-        defaultSource={require('./red_square.png')}
-        onLoad={() => TestModule.verifySnapshot(this.done)}
-      />
-    );
-  }
+  return (
+    <Image
+      source={require('./blue_square.png')}
+      defaultSource={require('./red_square.png')}
+      onLoad={() => TestModule.verifySnapshot(done)}
+    />
+  );
 }
 
-ImageSnapshotTest.displayName = 'ImageSnapshotTest';
-
-module.exports = ImageSnapshotTest;
+export default ImageSnapshotTest;

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

@@ -12,28 +12,29 @@
 
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
-  Layout,
-  LayoutEvent,
+  LayoutChangeEvent,
+  LayoutRectangle,
 } from 'react-native/Libraries/Types/CoreEventTypes';
 
 const React = require('react');
 const ReactNative = require('react-native');
-const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer');
+const deepDiffer =
+  require('react-native/Libraries/Utilities/differ/deepDiffer').default;
 
 const {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
-function debug(...args: Array<void | Layout | string>) {
+function debug(...args: Array<void | LayoutRectangle | string>) {
   // console.log.apply(null, arguments);
 }
 
-type Props = $ReadOnly<{||}>;
+type Props = $ReadOnly<{}>;
 
 type State = {
   didAnimation: boolean,
   extraText?: string,
-  imageLayout?: Layout,
-  textLayout?: Layout,
-  viewLayout?: Layout,
+  imageLayout?: LayoutRectangle,
+  textLayout?: LayoutRectangle,
+  viewLayout?: LayoutRectangle,
   viewStyle?: ViewStyleProp,
   containerStyle?: ViewStyleProp,
   ...
@@ -105,7 +106,11 @@ class LayoutEventsTest extends React.Component<Props, State> {
     });
   };
 
-  compare(node: string, measured: Layout, onLayout?: ?Layout): void {
+  compare(
+    node: string,
+    measured: LayoutRectangle,
+    onLayout?: ?LayoutRectangle,
+  ): void {
     if (deepDiffer(measured, onLayout)) {
       const data = {measured, onLayout};
       throw new Error(
@@ -116,19 +121,19 @@ class LayoutEventsTest extends React.Component<Props, State> {
     }
   }
 
-  onViewLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => {
+  onViewLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => {
     // $FlowFixMe[incompatible-call]
     debug('received view layout event\n', e.nativeEvent);
     this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout);
   };
 
-  onTextLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => {
+  onTextLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => {
     // $FlowFixMe[incompatible-call]
     debug('received text layout event\n', e.nativeEvent);
     this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout);
   };
 
-  onImageLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => {
+  onImageLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => {
     // $FlowFixMe[incompatible-call]
     debug('received image layout event\n', e.nativeEvent);
     this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout);

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;