react-native-tvos 0.78.0-0rc3 → 0.79.0-0

package/Libraries/Required/RCTRequired.h

@@ -12,7 +12,7 @@
 // the inlining decisions to avoid unnecessary code bloat. In effect RCTRequired
 // is a cost-free abstraction in non-DEBUG mode. In DEBUG mode we don't force
 // inlining for ease of debugging.
-#if DEBUG
+#ifdef DEBUG
 #define RCTREQUIRED_INLINE inline
 #else
 #define RCTREQUIRED_INLINE __attribute__((always_inline)) inline

package/Libraries/Settings/NativeSettingsManager.js

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

package/Libraries/Settings/Settings.ios.js

@@ -78,4 +78,4 @@ RCTDeviceEventEmitter.addListener(
   Settings._sendObservations.bind(Settings),
 );
 
-module.exports = Settings;
+export default Settings;

package/Libraries/Settings/Settings.js

@@ -11,7 +11,7 @@
 'use strict';
 
 const Settings = {
-  get(key: string): mixed {
+  get(key: string): any {
     console.warn('Settings is not yet supported on this platform.');
     return null;
   },
@@ -20,7 +20,7 @@ const Settings = {
     console.warn('Settings is not yet supported on this platform.');
   },
 
-  watchKeys(keys: string | Array<string>, callback: Function): number {
+  watchKeys(keys: string | Array<string>, callback: () => void): number {
     console.warn('Settings is not yet supported on this platform.');
     return -1;
   },
@@ -30,4 +30,4 @@ const Settings = {
   },
 };
 
-module.exports = Settings;
+export default Settings;

package/Libraries/Share/NativeShareModule.js

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

package/Libraries/Share/Share.js

@@ -8,11 +8,13 @@
  * @flow strict-local
  */
 
+import type {ColorValue} from '../StyleSheet/StyleSheet';
+
 import NativeActionSheetManager from '../ActionSheetIOS/NativeActionSheetManager';
 import NativeShareModule from './NativeShareModule';
 
 const processColor = require('../StyleSheet/processColor').default;
-const Platform = require('../Utilities/Platform');
+const Platform = require('../Utilities/Platform').default;
 const invariant = require('invariant');
 
 export type ShareContent =
@@ -29,11 +31,16 @@ export type ShareContent =
 export type ShareOptions = {
   dialogTitle?: string,
   excludedActivityTypes?: Array<string>,
-  tintColor?: string,
+  tintColor?: ColorValue,
   subject?: string,
   anchor?: number,
 };
 
+export type ShareAction = {
+  action: 'sharedAction' | 'dismissedAction',
+  activityType?: string | null,
+};
+
 class Share {
   /**
    * Open a dialog to share text content.
@@ -73,7 +80,7 @@ class Share {
    */
   static share(
     content: ShareContent,
-    options: ShareOptions = {},
+    options?: ShareOptions = {},
   ): Promise<{action: string, activityType: ?string}> {
     invariant(
       typeof content === 'object' && content !== null,
@@ -168,4 +175,4 @@ class Share {
   static dismissedAction: 'dismissedAction' = 'dismissedAction';
 }
 
-module.exports = Share;
+export default Share;

package/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -56,7 +56,7 @@ const _normalizeColorObject = (
     // an ios semantic color
     return color;
   } else if ('dynamic' in color && color.dynamic !== undefined) {
-    const normalizeColor = require('./normalizeColor');
+    const normalizeColor = require('./normalizeColor').default;
 
     // a dynamic, appearance aware color
     const dynamic = color.dynamic;

package/Libraries/StyleSheet/Rect.js

@@ -8,12 +8,12 @@
  * @flow strict
  */
 
-export type Rect = $ReadOnly<{|
+export type Rect = $ReadOnly<{
   bottom?: ?number,
   left?: ?number,
   right?: ?number,
   top?: ?number,
-|}>;
+}>;
 
 export type RectOrSize = Rect | number;
 

package/Libraries/StyleSheet/StyleSheet.js

@@ -24,10 +24,11 @@ import type {
 } from './StyleSheetTypes';
 
 import composeStyles from '../../src/private/styles/composeStyles';
+import flatten from './flattenStyle';
 
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const ReactNativeStyleAttributes =
+  require('../Components/View/ReactNativeStyleAttributes').default;
 const PixelRatio = require('../Utilities/PixelRatio').default;
-const flatten = require('./flattenStyle');
 
 export type {NativeColorValue} from './StyleSheetTypes';
 
@@ -227,7 +228,7 @@ if (__DEV__) {
  *  and suggestions to help you write valid styles.
  *
  */
-module.exports = {
+export default {
   /**
    * This is defined as the width of a thin line on the platform. It can be
    * used as the thickness of a border or division between two elements.

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -372,7 +372,7 @@ export type GradientValue = {
   // Angle or direction enums
   direction?: string | undefined;
   colorStops: ReadonlyArray<{
-    color: ColorValue;
+    color: ColorValue | null;
     positions?: ReadonlyArray<string[]> | undefined;
   }>;
 };

package/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js

@@ -12,7 +12,7 @@
 
 import type {ImageStyleProp, TextStyleProp} from '../StyleSheet';
 
-const StyleSheet = require('../StyleSheet');
+const StyleSheet = require('../StyleSheet').default;
 const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
 const textStyle = {color: 'rgb(0, 0, 0)'};
 

package/Libraries/StyleSheet/flattenStyle.js

@@ -43,4 +43,4 @@ function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
   return result;
 }
 
-module.exports = flattenStyle;
+export default flattenStyle;

package/Libraries/StyleSheet/normalizeColor.js

@@ -31,4 +31,4 @@ function normalizeColor(
   }
 }
 
-module.exports = normalizeColor;
+export default normalizeColor;

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -10,7 +10,7 @@
 
 import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
 
-export type ____TransformStyle_Internal = $ReadOnly<{|
+export type ____TransformStyle_Internal = $ReadOnly<{
   /**
    * `transform` accepts an array of transformation objects. Each object specifies
    * the property that will be transformed as the key, and the value to use in the
@@ -29,27 +29,27 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
    */
   transform?:
     | $ReadOnlyArray<
-        | {|+perspective: number | AnimatedNode|}
-        | {|+rotate: string | AnimatedNode|}
-        | {|+rotateX: string | AnimatedNode|}
-        | {|+rotateY: string | AnimatedNode|}
-        | {|+rotateZ: string | AnimatedNode|}
-        | {|+scale: number | AnimatedNode|}
-        | {|+scaleX: number | AnimatedNode|}
-        | {|+scaleY: number | AnimatedNode|}
-        | {|+translateX: number | AnimatedNode|}
-        | {|+translateY: number | AnimatedNode|}
-        | {|
+        | {+perspective: number | AnimatedNode}
+        | {+rotate: string | AnimatedNode}
+        | {+rotateX: string | AnimatedNode}
+        | {+rotateY: string | AnimatedNode}
+        | {+rotateZ: string | AnimatedNode}
+        | {+scale: number | AnimatedNode}
+        | {+scaleX: number | AnimatedNode}
+        | {+scaleY: number | AnimatedNode}
+        | {+translateX: number | AnimatedNode}
+        | {+translateY: number | AnimatedNode}
+        | {
             +translate:
               | [number | AnimatedNode, number | AnimatedNode]
               | AnimatedNode,
-          |}
-        | {|+skewX: string | AnimatedNode|}
-        | {|+skewY: string | AnimatedNode|}
+          }
+        | {+skewX: string | AnimatedNode}
+        | {+skewY: string | AnimatedNode}
         // TODO: what is the actual type it expects?
-        | {|
+        | {
             +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
-          |},
+          },
       >
     | string,
   /**
@@ -66,4 +66,4 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
   transformOrigin?:
     | [string | number, string | number, string | number]
     | string,
-|}>;
+}>;

package/Libraries/StyleSheet/processAspectRatio.js

@@ -60,4 +60,4 @@ function processAspectRatio(aspectRatio?: number | string): ?number {
   return Number(matches[0]);
 }
 
-module.exports = processAspectRatio;
+export default processAspectRatio;

package/Libraries/StyleSheet/processBackgroundImage.js

@@ -22,12 +22,17 @@ type LinearGradientDirection =
   | {type: 'angle', value: number}
   | {type: 'keyword', value: string};
 
+// null color indicate that the transition hint syntax is used. e.g. red, 20%, blue
+type ColorStopColor = ProcessedColorValue | null;
+// percentage or pixel value
+type ColorStopPosition = number | string | null;
+
 type ParsedGradientValue = {
   type: 'linearGradient',
   direction: LinearGradientDirection,
   colorStops: $ReadOnlyArray<{
-    color: ProcessedColorValue,
-    position: number,
+    color: ColorStopColor,
+    position: ColorStopPosition,
   }>,
 };
 
@@ -49,33 +54,58 @@ export default function processBackgroundImage(
   } else if (Array.isArray(backgroundImage)) {
     for (const bgImage of backgroundImage) {
       const processedColorStops: Array<{
-        color: ProcessedColorValue,
-        position: number | null,
+        color: ColorStopColor,
+        position: ColorStopPosition,
       }> = [];
       for (let index = 0; index < bgImage.colorStops.length; index++) {
         const colorStop = bgImage.colorStops[index];
-        const processedColor = processColor(colorStop.color);
-        if (processedColor == null) {
-          // If a color is invalid, return an empty array and do not apply gradient. Same as web.
-          return [];
-        }
-        if (colorStop.positions != null && colorStop.positions.length > 0) {
-          for (const position of colorStop.positions) {
-            if (position.endsWith('%')) {
-              processedColorStops.push({
-                color: processedColor,
-                position: parseFloat(position) / 100,
-              });
-            } else {
-              // If a position is invalid, return an empty array and do not apply gradient. Same as web.
-              return [];
-            }
+        const positions = colorStop.positions;
+        // Color transition hint syntax (red, 20%, blue)
+        if (
+          colorStop.color == null &&
+          Array.isArray(positions) &&
+          positions.length === 1
+        ) {
+          const position = positions[0];
+          if (
+            typeof position === 'number' ||
+            (typeof position === 'string' && position.endsWith('%'))
+          ) {
+            processedColorStops.push({
+              color: null,
+              position,
+            });
+          } else {
+            // If a position is invalid, return an empty array and do not apply gradient. Same as web.
+            return [];
           }
         } else {
-          processedColorStops.push({
-            color: processedColor,
-            position: null,
-          });
+          const processedColor = processColor(colorStop.color);
+          if (processedColor == null) {
+            // If a color is invalid, return an empty array and do not apply gradient. Same as web.
+            return [];
+          }
+          if (positions != null && positions.length > 0) {
+            for (const position of positions) {
+              if (
+                typeof position === 'number' ||
+                (typeof position === 'string' && position.endsWith('%'))
+              ) {
+                processedColorStops.push({
+                  color: processedColor,
+                  position,
+                });
+              } else {
+                // If a position is invalid, return an empty array and do not apply gradient. Same as web.
+                return [];
+              }
+            }
+          } else {
+            processedColorStops.push({
+              color: processedColor,
+              position: null,
+            });
+          }
         }
       }
 
@@ -109,12 +139,10 @@ export default function processBackgroundImage(
         }
       }
 
-      const fixedColorStops = getFixedColorStops(processedColorStops);
-
       result = result.concat({
         type: 'linearGradient',
         direction,
-        colorStops: fixedColorStops,
+        colorStops: processedColorStops,
       });
     }
   }
@@ -137,13 +165,6 @@ function parseCSSLinearGradient(
     let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
 
-    // matches individual color stops in a gradient function
-    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
-    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
-    // TODO: does not support color hint syntax yet. It is WIP.
-    const colorStopRegex =
-      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
-
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
       const parsedAngle = getAngleInDegrees(trimmedDirection);
       if (parsedAngle != null) {
@@ -165,59 +186,107 @@ function parseCSSLinearGradient(
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (!colorStopRegex.test(trimmedDirection)) {
-      // If first part is not an angle/direction or a color stop, return an empty array and do not apply any gradient. Same as web.
-      return [];
     }
-    colorStopRegex.lastIndex = 0;
 
+    const colorStopsString = parts.join(',');
     const colorStops = [];
-    const fullColorStopsStr = parts.join(',');
-    let colorStopMatch;
-    while ((colorStopMatch = colorStopRegex.exec(fullColorStopsStr))) {
-      const [, color, position1, position2] = colorStopMatch;
-      const processedColor = processColor(color.trim().toLowerCase());
-      if (processedColor == null) {
-        // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+    // split by comma, but not if it's inside a parentheses. e.g. red, rgba(0, 0, 0, 0.5), green => ["red", "rgba(0, 0, 0, 0.5)", "green"]
+    const stops = colorStopsString.split(/,(?![^(]*\))/);
+    let prevStop = null;
+    for (let i = 0; i < stops.length; i++) {
+      const stop = stops[i];
+      const trimmedStop = stop.trim().toLowerCase();
+      // Match function like pattern or single words
+      const colorStopParts = trimmedStop.match(/\S+\([^)]*\)|\S+/g);
+      if (colorStopParts == null) {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
+      // Case 1: [color, position, position]
+      if (colorStopParts.length === 3) {
+        const color = colorStopParts[0];
+        const position1 = getPositionFromCSSValue(colorStopParts[1]);
+        const position2 = getPositionFromCSSValue(colorStopParts[2]);
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
 
-      if (typeof position1 !== 'undefined') {
-        if (position1.endsWith('%')) {
-          colorStops.push({
-            color: processedColor,
-            position: parseFloat(position1) / 100,
-          });
-        } else {
+        if (position1 == null || position2 == null) {
           // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
           return [];
         }
-      } else {
+
+        colorStops.push({
+          color: processedColor,
+          position: position1,
+        });
         colorStops.push({
           color: processedColor,
-          position: null,
+          position: position2,
         });
       }
-
-      if (typeof position2 !== 'undefined') {
-        if (position2.endsWith('%')) {
+      // Case 2: [color, position]
+      else if (colorStopParts.length === 2) {
+        const color = colorStopParts[0];
+        const position = getPositionFromCSSValue(colorStopParts[1]);
+        const processedColor = processColor(color);
+        if (processedColor == null) {
+          // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        if (position == null) {
+          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
+          return [];
+        }
+        colorStops.push({
+          color: processedColor,
+          position,
+        });
+      }
+      // Case 3: [color]
+      // Case 4: [position] => transition hint syntax
+      else if (colorStopParts.length === 1) {
+        const position = getPositionFromCSSValue(colorStopParts[0]);
+        if (position != null) {
+          // handle invalid transition hint syntax. transition hint syntax must have color before and after the position. e.g. red, 20%, blue
+          if (
+            (prevStop != null &&
+              prevStop.length === 1 &&
+              getPositionFromCSSValue(prevStop[0]) != null) ||
+            i === stops.length - 1 ||
+            i === 0
+          ) {
+            // If the last stop is a transition hint syntax, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
           colorStops.push({
-            color: processedColor,
-            position: parseFloat(position2) / 100,
+            color: null,
+            position,
           });
         } else {
-          // If a position is invalid, return an empty array and do not apply any gradient. Same as web.
-          return [];
+          const processedColor = processColor(colorStopParts[0]);
+          if (processedColor == null) {
+            // If a color is invalid, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
+          colorStops.push({
+            color: processedColor,
+            position: null,
+          });
         }
+      } else {
+        // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
       }
+      prevStop = colorStopParts;
     }
 
-    const fixedColorStops = getFixedColorStops(colorStops);
-
     gradients.push({
       type: 'linearGradient',
       direction,
-      colorStops: fixedColorStops,
+      colorStops,
     });
   }
 
@@ -283,79 +352,12 @@ function getAngleInDegrees(angle?: string): ?number {
   }
 }
 
-// https://drafts.csswg.org/css-images-4/#color-stop-fixup
-function getFixedColorStops(
-  colorStops: $ReadOnlyArray<{
-    color: ProcessedColorValue,
-    position: number | null,
-  }>,
-): Array<{
-  color: ProcessedColorValue,
-  position: number,
-}> {
-  let fixedColorStops: Array<{
-    color: ProcessedColorValue,
-    position: number,
-  }> = [];
-  let hasNullPositions = false;
-  let maxPositionSoFar = colorStops[0].position ?? 0;
-  for (let i = 0; i < colorStops.length; i++) {
-    const colorStop = colorStops[i];
-    let newPosition = colorStop.position;
-    if (newPosition === null) {
-      // Step 1:
-      // If the first color stop does not have a position,
-      // set its position to 0%. If the last color stop does not have a position,
-      // set its position to 100%.
-      if (i === 0) {
-        newPosition = 0;
-      } else if (i === colorStops.length - 1) {
-        newPosition = 1;
-      }
-    }
-    // Step 2:
-    // If a color stop or transition hint has a position
-    // that is less than the specified position of any color stop or transition hint
-    // before it in the list, set its position to be equal to the
-    // largest specified position of any color stop or transition hint before it.
-    if (newPosition !== null) {
-      newPosition = Math.max(newPosition, maxPositionSoFar);
-      fixedColorStops[i] = {
-        color: colorStop.color,
-        position: newPosition,
-      };
-      maxPositionSoFar = newPosition;
-    } else {
-      hasNullPositions = true;
-    }
+function getPositionFromCSSValue(position: string) {
+  if (position.endsWith('px')) {
+    return parseFloat(position);
   }
 
-  // Step 3:
-  // If any color stop still does not have a position,
-  // then, for each run of adjacent color stops without positions,
-  // set their positions so that they are evenly spaced between the preceding and
-  // following color stops with positions.
-  if (hasNullPositions) {
-    let lastDefinedIndex = 0;
-    for (let i = 1; i < fixedColorStops.length; i++) {
-      if (fixedColorStops[i] !== undefined) {
-        const unpositionedStops = i - lastDefinedIndex - 1;
-        if (unpositionedStops > 0) {
-          const startPosition = fixedColorStops[lastDefinedIndex].position;
-          const endPosition = fixedColorStops[i].position;
-          const increment =
-            (endPosition - startPosition) / (unpositionedStops + 1);
-          for (let j = 1; j <= unpositionedStops; j++) {
-            fixedColorStops[lastDefinedIndex + j] = {
-              color: colorStops[lastDefinedIndex + j].color,
-              position: startPosition + increment * j,
-            };
-          }
-        }
-        lastDefinedIndex = i;
-      }
-    }
+  if (position.endsWith('%')) {
+    return position;
   }
-
-  return fixedColorStops;
 }

package/Libraries/StyleSheet/processBoxShadow.js

@@ -205,5 +205,9 @@ function parseLength(length: string): ?number {
     return null;
   }
 
+  if (match[3] == null && match[1] !== '0') {
+    return null;
+  }
+
   return Number(match[1]);
 }

package/Libraries/StyleSheet/processColor.js

@@ -12,8 +12,8 @@
 
 import type {ColorValue, NativeColorValue} from './StyleSheet';
 
-const Platform = require('../Utilities/Platform');
-const normalizeColor = require('./normalizeColor');
+const Platform = require('../Utilities/Platform').default;
+const normalizeColor = require('./normalizeColor').default;
 
 export type ProcessedColorValue = number | NativeColorValue;
 

package/Libraries/StyleSheet/processColorArray.js

@@ -32,4 +32,4 @@ function processColorElement(color: ColorValue): ProcessedColorValue {
   return value;
 }
 
-module.exports = processColorArray;
+export default processColorArray;

package/Libraries/StyleSheet/processFilter.js

@@ -317,5 +317,9 @@ function parseLength(length: string): ?number {
     return null;
   }
 
+  if (match[3] == null && match[1] !== '0') {
+    return null;
+  }
+
   return Number(match[1]);
 }

package/Libraries/StyleSheet/processFontVariant.js

@@ -27,4 +27,4 @@ function processFontVariant(
   return match;
 }
 
-module.exports = processFontVariant;
+export default processFontVariant;

package/Libraries/StyleSheet/processTransform.js

@@ -266,4 +266,4 @@ function _validateTransform(
   }
 }
 
-module.exports = processTransform;
+export default processTransform;