@office-iss/react-native-win32 0.74.4 → 0.75.0-preview.1

package/Libraries/Renderer/shims/ReactFabric.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow
  * @nolint
- * @generated SignedSource<<c1cc197c110e3a49a5e8f6bd5d32b23f>>
+ * @flow
+ * @generated SignedSource<<bb39e39880fecbf572b5f8e7c2a95c5d>>
  */
 
 'use strict';

package/Libraries/Renderer/shims/ReactFeatureFlags.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow strict-local
  * @nolint
- * @generated SignedSource<<2881c8e89ef0f73f4cf6612cb518b197>>
+ * @flow strict-local
+ * @generated SignedSource<<b1b5e34e426103a69612278fd5c9f77c>>
  */
 
 'use strict';

package/Libraries/Renderer/shims/ReactNative.js

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow
  * @nolint
- * @generated SignedSource<<0debd6e5a17dc037cb4661315a886de6>>
+ * @flow
+ * @generated SignedSource<<475c7d864efc2948c6125ddb8a38a4fc>>
  */
-
 'use strict';
 
 import type {ReactNativeType} from './ReactNativeTypes';

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow strict
  * @nolint
- * @generated SignedSource<<fbf33f04ca9428c149262f17c8a4b6ab>>
+ * @flow strict
+ * @generated SignedSource<<e7a1421518e1d99f18c5b14e85f44843>>
  */
 
 import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
@@ -127,7 +127,7 @@ export type NativeMethods = $ReadOnly<{|
 |}>;
 
 // This validates that INativeMethods and NativeMethods stay in sync using Flow!
-declare var ensureNativeMethodsAreSynced: NativeMethods;
+declare const ensureNativeMethodsAreSynced: NativeMethods;
 (ensureNativeMethodsAreSynced: INativeMethods);
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
@@ -176,6 +176,25 @@ export type TouchedViewDataAtPoint = $ReadOnly<{
   ...InspectorData,
 }>;
 
+export type RenderRootOptions = {
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      // $FlowFixMe[unclear-type] unknown props and state.
+      +errorBoundary?: ?React$Component<any, any>,
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+};
+
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
  * Provide minimal Flow typing for the high-level RN API and call it a day.
@@ -204,6 +223,7 @@ export type ReactNativeType = {
     element: Element<ElementType>,
     containerTag: number,
     callback: ?() => void,
+    options: ?RenderRootOptions,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
@@ -239,6 +259,7 @@ export type ReactFabricType = {
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,
+    options: ?RenderRootOptions,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   getNodeFromInternalInstanceHandle(

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow strict-local
  * @nolint
- * @generated SignedSource<<73af5b3fe29d226634ed64bc861634df>>
+ * @flow strict-local
+ * @generated SignedSource<<69d0cc554d77cddb1c779dfbdf569505>>
  */
 
 'use strict';

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @noformat
- * @flow strict-local
  * @nolint
- * @generated SignedSource<<ede54ac2fa1b9a09e234cdf098048989>>
+ * @flow strict-local
+ * @generated SignedSource<<62e766b69d440dab0a2d249f0cea38e0>>
  */
 
 'use strict';

package/Libraries/Share/Share.d.ts

@@ -12,11 +12,13 @@ import {ColorValue} from '../StyleSheet/StyleSheet';
 export type ShareContent =
   | {
       title?: string | undefined;
-      message: string;
+      url: string;
+      message?: string | undefined;
     }
   | {
       title?: string | undefined;
-      url: string;
+      url?: string | undefined;
+      message: string;
     };
 
 export type ShareOptions = {
@@ -40,29 +42,33 @@ export interface ShareStatic {
    * If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction`
    * and all the other keys being undefined.
    *
-   * In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`.
+   * In Android, Returns a Promise which always resolves with action being `Share.sharedAction`.
    *
    * ### Content
    *
+   * #### iOS
+   *
+   *  - `url` - a URL to share
    *  - `message` - a message to share
-   *  - `title` - title of the message
    *
-   * #### iOS
+   * At least one of `URL` or `message` is required.
    *
-   *  - `url` - an URL to share
+   * #### Android
    *
-   * At least one of URL and message is required.
+   * - `title` - title of the message (optional)
+   * - `message` - a message to share (often will include a URL).
    *
    * ### Options
    *
    * #### iOS
    *
-   * - `excludedActivityTypes`
-   * - `tintColor`
+   *  - `subject` - a subject to share via email
+   *  - `excludedActivityTypes`
+   *  - `tintColor`
    *
    * #### Android
    *
-   * - `dialogTitle`
+   *  - `dialogTitle`
    *
    */
   share(content: ShareContent, options?: ShareOptions): Promise<ShareAction>;

package/Libraries/Share/Share.js

@@ -15,24 +15,23 @@ const processColor = require('../StyleSheet/processColor').default;
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 
-type Content =
+export type ShareContent =
   | {
       title?: string,
-      message: string,
-      ...
+      url: string,
+      message?: string,
     }
   | {
       title?: string,
-      url: string,
-      ...
+      url?: string,
+      message: string,
     };
-type Options = {
+export type ShareOptions = {
   dialogTitle?: string,
   excludedActivityTypes?: Array<string>,
   tintColor?: string,
   subject?: string,
   anchor?: number,
-  ...
 };
 
 class Share {
@@ -43,21 +42,21 @@ class Share {
    * If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction`
    * and all the other keys being undefined.
    *
-   * In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`.
+   * In Android, Returns a Promise which always resolves with action being `Share.sharedAction`.
    *
    * ### Content
    *
-   *  - `message` - a message to share
-   *
    * #### iOS
    *
    *  - `url` - a URL to share
+   *  - `message` - a message to share
    *
-   * At least one of URL and message is required.
+   * At least one of `URL` or `message` is required.
    *
    * #### Android
    *
-   * - `title` - title of the message
+   * - `title` - title of the message (optional)
+   * - `message` - a message to share (often will include a URL).
    *
    * ### Options
    *
@@ -73,8 +72,8 @@ class Share {
    *
    */
   static share(
-    content: Content,
-    options: Options = {},
+    content: ShareContent,
+    options: ShareOptions = {},
   ): Promise<{action: string, activityType: ?string}> {
     invariant(
       typeof content === 'object' && content !== null,
@@ -82,7 +81,7 @@ class Share {
     );
     invariant(
       typeof content.url === 'string' || typeof content.message === 'string',
-      'At least one of URL and message is required',
+      'At least one of URL or message is required',
     );
     invariant(
       typeof options === 'object' && options !== null,

package/Libraries/StyleSheet/StyleSheet.d.ts

@@ -14,7 +14,7 @@ export interface StyleSheetProperties {
   flatten<T extends string>(style: T): T;
 }
 
-type Falsy = undefined | null | false;
+type Falsy = undefined | null | false | '';
 interface RecursiveArray<T>
   extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
 /** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */

package/Libraries/StyleSheet/StyleSheet.js

@@ -23,6 +23,8 @@ import type {
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import composeStyles from '../../src/private/core/composeStyles';
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const flatten = require('./flattenStyle');
@@ -268,16 +270,7 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T,
-  ): ?T | $ReadOnlyArray<T> {
-    if (style1 != null && style2 != null) {
-      return ([style1, style2]: $ReadOnlyArray<T>);
-    } else {
-      return style1 != null ? style1 : style2;
-    }
-  },
+  compose: composeStyles,
 
   /**
    * Flattens an array of style objects, into one aggregated style object.

package/Libraries/StyleSheet/StyleSheet.win32.js

@@ -23,6 +23,8 @@ import type {
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import composeStyles from '../../src/private/core/composeStyles';
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform'); // [Win32]
@@ -270,16 +272,7 @@ module.exports = {
    * array, saving allocations and maintaining reference equality for
    * PureComponent checks.
    */
-  compose<T: DangerouslyImpreciseStyleProp>(
-    style1: ?T,
-    style2: ?T,
-  ): ?T | $ReadOnlyArray<T> {
-    if (style1 != null && style2 != null) {
-      return ([style1, style2]: $ReadOnlyArray<T>);
-    } else {
-      return style1 != null ? style1 : style2;
-    }
-  },
+  compose: composeStyles,
 
   /**
    * Flattens an array of style objects, into one aggregated style object.

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -65,9 +65,9 @@ export interface FlexStyle {
     | 'row-reverse'
     | 'column-reverse'
     | undefined;
-  rowGap?: number | undefined;
-  gap?: number | undefined;
-  columnGap?: number | undefined;
+  rowGap?: number | string | undefined;
+  gap?: number | string | undefined;
+  columnGap?: number | string | undefined;
   flexGrow?: number | undefined;
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
@@ -237,10 +237,10 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   borderBlockEndColor?: ColorValue | undefined;
   borderBlockStartColor?: ColorValue | undefined;
   borderBottomColor?: ColorValue | undefined;
-  borderBottomEndRadius?: AnimatableNumericValue | undefined;
-  borderBottomLeftRadius?: AnimatableNumericValue | undefined;
-  borderBottomRightRadius?: AnimatableNumericValue | undefined;
-  borderBottomStartRadius?: AnimatableNumericValue | undefined;
+  borderBottomEndRadius?: AnimatableNumericValue | string | undefined;
+  borderBottomLeftRadius?: AnimatableNumericValue | string | undefined;
+  borderBottomRightRadius?: AnimatableNumericValue | string | undefined;
+  borderBottomStartRadius?: AnimatableNumericValue | string | undefined;
   borderColor?: ColorValue | undefined;
   /**
    * On iOS 13+, it is possible to change the corner curve of borders.
@@ -248,20 +248,20 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
    */
   borderCurve?: 'circular' | 'continuous' | undefined;
   borderEndColor?: ColorValue | undefined;
-  borderEndEndRadius?: AnimatableNumericValue | undefined;
-  borderEndStartRadius?: AnimatableNumericValue | undefined;
+  borderEndEndRadius?: AnimatableNumericValue | string | undefined;
+  borderEndStartRadius?: AnimatableNumericValue | string | undefined;
   borderLeftColor?: ColorValue | undefined;
-  borderRadius?: AnimatableNumericValue | undefined;
+  borderRadius?: AnimatableNumericValue | string | undefined;
   borderRightColor?: ColorValue | undefined;
   borderStartColor?: ColorValue | undefined;
-  borderStartEndRadius?: AnimatableNumericValue | undefined;
-  borderStartStartRadius?: AnimatableNumericValue | undefined;
+  borderStartEndRadius?: AnimatableNumericValue | string | undefined;
+  borderStartStartRadius?: AnimatableNumericValue | string | undefined;
   borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
   borderTopColor?: ColorValue | undefined;
-  borderTopEndRadius?: AnimatableNumericValue | undefined;
-  borderTopLeftRadius?: AnimatableNumericValue | undefined;
-  borderTopRightRadius?: AnimatableNumericValue | undefined;
-  borderTopStartRadius?: AnimatableNumericValue | undefined;
+  borderTopEndRadius?: AnimatableNumericValue | string | undefined;
+  borderTopLeftRadius?: AnimatableNumericValue | string | undefined;
+  borderTopRightRadius?: AnimatableNumericValue | string | undefined;
+  borderTopStartRadius?: AnimatableNumericValue | string | undefined;
   opacity?: AnimatableNumericValue | undefined;
   /**
    * Sets the elevation of a view, using Android's underlying
@@ -394,13 +394,13 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
 export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   resizeMode?: ImageResizeMode | undefined;
   backfaceVisibility?: 'visible' | 'hidden' | undefined;
-  borderBottomLeftRadius?: AnimatableNumericValue | undefined;
-  borderBottomRightRadius?: AnimatableNumericValue | undefined;
+  borderBottomLeftRadius?: AnimatableNumericValue | string | undefined;
+  borderBottomRightRadius?: AnimatableNumericValue | string | undefined;
   backgroundColor?: ColorValue | undefined;
   borderColor?: ColorValue | undefined;
-  borderRadius?: AnimatableNumericValue | undefined;
-  borderTopLeftRadius?: AnimatableNumericValue | undefined;
-  borderTopRightRadius?: AnimatableNumericValue | undefined;
+  borderRadius?: AnimatableNumericValue | string | undefined;
+  borderTopLeftRadius?: AnimatableNumericValue | string | undefined;
+  borderTopRightRadius?: AnimatableNumericValue | string | undefined;
   overflow?: 'visible' | 'hidden' | undefined;
   overlayColor?: ColorValue | undefined;
   tintColor?: ColorValue | undefined;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
+import type {FilterPrimitive} from '../StyleSheet/processFilter';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -644,9 +645,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    * between children may be larger than the gap value.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
    */
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number,
+  rowGap?: number | string,
+  columnGap?: number | string,
+  gap?: number | string,
 }>;
 
 /**
@@ -690,10 +691,15 @@ export type ____ShadowStyle_Internal = $ReadOnly<{
   ...____ShadowStyle_InternalOverrides,
 }>;
 
+type ____FilterStyle_Internal = $ReadOnly<{
+  experimental_filter?: $ReadOnlyArray<FilterPrimitive>,
+}>;
+
 export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
+  ...____FilterStyle_Internal,
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
@@ -707,19 +713,19 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderBlockColor?: ____ColorValue_Internal,
   borderBlockEndColor?: ____ColorValue_Internal,
   borderBlockStartColor?: ____ColorValue_Internal,
-  borderRadius?: AnimatableNumericValue,
-  borderBottomEndRadius?: AnimatableNumericValue,
-  borderBottomLeftRadius?: AnimatableNumericValue,
-  borderBottomRightRadius?: AnimatableNumericValue,
-  borderBottomStartRadius?: AnimatableNumericValue,
-  borderEndEndRadius?: AnimatableNumericValue,
-  borderEndStartRadius?: AnimatableNumericValue,
-  borderStartEndRadius?: AnimatableNumericValue,
-  borderStartStartRadius?: AnimatableNumericValue,
-  borderTopEndRadius?: AnimatableNumericValue,
-  borderTopLeftRadius?: AnimatableNumericValue,
-  borderTopRightRadius?: AnimatableNumericValue,
-  borderTopStartRadius?: AnimatableNumericValue,
+  borderRadius?: AnimatableNumericValue | string,
+  borderBottomEndRadius?: AnimatableNumericValue | string,
+  borderBottomLeftRadius?: AnimatableNumericValue | string,
+  borderBottomRightRadius?: AnimatableNumericValue | string,
+  borderBottomStartRadius?: AnimatableNumericValue | string,
+  borderEndEndRadius?: AnimatableNumericValue | string,
+  borderEndStartRadius?: AnimatableNumericValue | string,
+  borderStartEndRadius?: AnimatableNumericValue | string,
+  borderStartStartRadius?: AnimatableNumericValue | string,
+  borderTopEndRadius?: AnimatableNumericValue | string,
+  borderTopLeftRadius?: AnimatableNumericValue | string,
+  borderTopRightRadius?: AnimatableNumericValue | string,
+  borderTopStartRadius?: AnimatableNumericValue | string,
   borderStyle?: 'solid' | 'dotted' | 'dashed',
   borderWidth?: AnimatableNumericValue,
   borderBottomWidth?: AnimatableNumericValue,
@@ -921,5 +927,5 @@ export type ____FlattenStyleProp_Internal<
 > = TStyleProp extends null | void | false | ''
   ? empty
   : TStyleProp extends $ReadOnlyArray<infer V>
-  ? ____FlattenStyleProp_Internal<V>
-  : TStyleProp;
+    ? ____FlattenStyleProp_Internal<V>
+    : TStyleProp;

package/Libraries/StyleSheet/flattenStyle.js

@@ -34,6 +34,7 @@ function flattenStyle<TStyleProp: DangerouslyImpreciseStyleProp>(
       // $FlowFixMe[invalid-in-rhs]
       for (const key in computedStyle) {
         // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[invalid-computed-prop]
         result[key] = computedStyle[key];
       }
     }

package/Libraries/StyleSheet/processFilter.js

@@ -0,0 +1,132 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string};
+
+export default function processFilter(
+  filter: $ReadOnlyArray<FilterPrimitive> | string,
+): $ReadOnlyArray<FilterPrimitive> {
+  let result: Array<FilterPrimitive> = [];
+  if (typeof filter === 'string') {
+    // matches on functions with args like "brightness(1.5)"
+    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    let matches;
+
+    while ((matches = regex.exec(filter))) {
+      const amount = _getFilterAmount(matches[1], matches[2]);
+
+      if (amount != null) {
+        const filterPrimitive = {};
+        // $FlowFixMe The key will be the correct one but flow can't see that.
+        filterPrimitive[matches[1]] = amount;
+        // $FlowFixMe The key will be the correct one but flow can't see that.
+        result.push(filterPrimitive);
+      } else {
+        // If any primitive is invalid then apply none of the filters. This is how
+        // web works and makes it clear that something is wrong becuase no
+        // graphical effects are happening.
+        return [];
+      }
+    }
+  } else {
+    for (const filterPrimitive of filter) {
+      const [filterName, filterValue] = Object.entries(filterPrimitive)[0];
+      const amount = _getFilterAmount(filterName, filterValue);
+
+      if (amount != null) {
+        const resultObject = {};
+        // $FlowFixMe
+        resultObject[filterName] = amount;
+        // $FlowFixMe
+        result.push(resultObject);
+      } else {
+        // If any primitive is invalid then apply none of the filters. This is how
+        // web works and makes it clear that something is wrong becuase no
+        // graphical effects are happening.
+        return [];
+      }
+    }
+  }
+
+  return result;
+}
+
+function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
+  let filterArgAsNumber: number;
+  let unit: string;
+  if (typeof filterArgs === 'string') {
+    // matches on args with units like "1.5 5% -80deg"
+    const argsWithUnitsRegex = new RegExp(/([+-]?\d*(\.\d+)?)([a-zA-Z%]+)?/g);
+    const match = argsWithUnitsRegex.exec(filterArgs);
+
+    if (!match || isNaN(Number(match[1]))) {
+      return undefined;
+    }
+
+    filterArgAsNumber = Number(match[1]);
+    unit = match[3];
+  } else if (typeof filterArgs === 'number') {
+    filterArgAsNumber = filterArgs;
+  } else {
+    return undefined;
+  }
+
+  switch (filterName) {
+    // Hue rotate takes some angle that can have a unit and can be
+    // negative. Additionally, 0 with no unit is allowed.
+    case 'hueRotate':
+      if (filterArgAsNumber === 0) {
+        return 0;
+      }
+      if (unit !== 'deg' && unit !== 'rad') {
+        return undefined;
+      }
+      return unit === 'rad'
+        ? (180 * filterArgAsNumber) / Math.PI
+        : filterArgAsNumber;
+    // blur takes any positive CSS length that is not a percent. In RN
+    // we currently only have DIPs, so we are not parsing units here.
+    case 'blur':
+      if ((unit && unit !== 'px') || filterArgAsNumber < 0) {
+        return undefined;
+      }
+      return filterArgAsNumber;
+    // All other filters except take a non negative number or percentage. There
+    // are no units associated with this value and percentage numbers map 1-to-1
+    // to a non-percentage number (e.g. 50% == 0.5).
+    case 'brightness':
+    case 'contrast':
+    case 'grayscale':
+    case 'invert':
+    case 'opacity':
+    case 'saturate':
+    case 'sepia':
+      if ((unit && unit !== '%' && unit !== 'px') || filterArgAsNumber < 0) {
+        return undefined;
+      }
+      if (unit === '%') {
+        filterArgAsNumber /= 100;
+      }
+      return filterArgAsNumber;
+    default:
+      return undefined;
+  }
+}

package/Libraries/StyleSheet/processTransform.js

@@ -68,8 +68,11 @@ const _getKeyAndValueFromCSSTransform: (
     | $TEMPORARY$string<'translateX'>
     | $TEMPORARY$string<'translateY'>,
   args: string,
-) => {key: string, value?: number[] | number | string} = (key, args) => {
-  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+)?/g);
+) => {key: string, value?: Array<string | number> | number | string} = (
+  key,
+  args,
+) => {
+  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g);
 
   switch (key) {
     case 'matrix':
@@ -88,7 +91,11 @@ const _getKeyAndValueFromCSSTransform: (
           missingUnitOfMeasurement = true;
         }
 
-        parsedArgs.push(value);
+        if (unitOfMeasurement === '%') {
+          parsedArgs.push(`${value}%`);
+        } else {
+          parsedArgs.push(value);
+        }
       }
 
       if (__DEV__) {
@@ -256,6 +263,14 @@ function _validateTransform(
       break;
     case 'translateX':
     case 'translateY':
+      invariant(
+        typeof value === 'number' ||
+          (typeof value === 'string' && value.endsWith('%')),
+        'Transform with key of "%s" must be number or a percentage. Passed value: %s.',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
     case 'scale':
     case 'scaleX':
     case 'scaleY':