RN: Refine StyleSheet.compose Flow Type

Summary:
Refines `StyleSheet.compose` so that subtypes of `DangerouslyImpreciseStyleProp` can flow through the function call without losing their type.

This makes it so that if you supply two `ViewStyleProp` types, you will get a `ViewStyleProp` type out of it.

Reviewed By: TheSavior

Differential Revision: D8851699

fbshipit-source-id: e38e572e363a71fddf63d6b6bf5a96b3cdae5915

Libraries/StyleSheet/StyleSheet.js

@@ -272,12 +272,12 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose(
-    style1: ?DangerouslyImpreciseStyleProp,
-    style2: ?DangerouslyImpreciseStyleProp,
-  ): ?DangerouslyImpreciseStyleProp {
+  compose<T: DangerouslyImpreciseStyleProp>(
+    style1: ?T,
+    style2: ?T,
+  ): ?T | $ReadOnlyArray<T> {
     if (style1 != null && style2 != null) {
-      return [style1, style2];
+      return ([style1, style2]: $ReadOnlyArray<T>);
     } else {
       return style1 != null ? style1 : style2;
     }

Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+const StyleSheet = require('StyleSheet');
+
+import type {ImageStyleProp, TextStyleProp} from 'StyleSheet';
+
+const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
+const textStyle = {color: 'rgb(0, 0, 0)'};
+
+module.exports = {
+  testGoodCompose() {
+    (StyleSheet.compose(
+      imageStyle,
+      imageStyle,
+    ): ImageStyleProp);
+
+    (StyleSheet.compose(
+      textStyle,
+      textStyle,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      null,
+      null,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      textStyle,
+      null,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      textStyle,
+      Math.random() < 0.5 ? textStyle : null,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      [textStyle],
+      null,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      [textStyle],
+      null,
+    ): TextStyleProp);
+
+    (StyleSheet.compose(
+      [textStyle],
+      [textStyle],
+    ): TextStyleProp);
+  },
+
+  testBadCompose() {
+    // $FlowExpectedError - Incompatible type.
+    (StyleSheet.compose(
+      textStyle,
+      textStyle,
+    ): ImageStyleProp);
+
+    (StyleSheet.compose(
+      // $FlowExpectedError - Incompatible type.
+      [textStyle],
+      null,
+    ): ImageStyleProp);
+
+    // $FlowExpectedError - Incompatible type.
+    (StyleSheet.compose(
+      Math.random() < 0.5 ? textStyle : null,
+      null,
+    ): ImageStyleProp);
+  },
+};