react-native-tvos 0.86.0-2 → 0.87.0-0

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<4ab83fd2606d6a4d374ef914f231d9c1>>
+ * @generated SignedSource<<92e869744dd405a4d74b1b6f50fa8d52>>
  */
 
 import type {
@@ -25,33 +25,33 @@ import * as React from 'react';
 
 export type AttributeType<T, V> =
   | true
-  | $ReadOnly<{
+  | Readonly<{
       diff?: (arg1: T, arg2: T) => boolean,
       process?: (arg1: V) => T,
     }>;
 
-// We either force that `diff` and `process` always use mixed,
+// We either force that `diff` and `process` always use unknown,
 // or we allow them to define specific types and use this hack
 export type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
 
-export type AttributeConfiguration = $ReadOnly<{
+export type AttributeConfiguration = Readonly<{
   [propName: string]: AnyAttributeType | void,
-  style?: $ReadOnly<{
+  style?: Readonly<{
     [propName: string]: AnyAttributeType,
     ...
   }>,
   ...
 }>;
 
-export type ViewConfig = $ReadOnly<{
-  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
-  Constants?: $ReadOnly<{[name: string]: mixed, ...}>,
+export type ViewConfig = Readonly<{
+  Commands?: Readonly<{[commandName: string]: number, ...}>,
+  Constants?: Readonly<{[name: string]: unknown, ...}>,
   Manager?: string,
-  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
+  NativeProps?: Readonly<{[propName: string]: string, ...}>,
   baseModuleName?: ?string,
-  bubblingEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{
-      phasedRegistrationNames: $ReadOnly<{
+  bubblingEventTypes?: Readonly<{
+    [eventName: string]: Readonly<{
+      phasedRegistrationNames: Readonly<{
         captured: string,
         bubbled: string,
         skipBubbling?: ?boolean,
@@ -59,8 +59,8 @@ export type ViewConfig = $ReadOnly<{
     }>,
     ...
   }>,
-  directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{
+  directEventTypes?: Readonly<{
+    [eventName: string]: Readonly<{
       registrationName: string,
     }>,
     ...
@@ -70,7 +70,7 @@ export type ViewConfig = $ReadOnly<{
   validAttributes: AttributeConfiguration,
 }>;
 
-export type PartialViewConfig = $ReadOnly<{
+export type PartialViewConfig = Readonly<{
   bubblingEventTypes?: ViewConfig['bubblingEventTypes'],
   directEventTypes?: ViewConfig['directEventTypes'],
   supportsRawText?: boolean,
@@ -78,22 +78,22 @@ export type PartialViewConfig = $ReadOnly<{
   validAttributes?: AttributeConfiguration,
 }>;
 
-type InspectorDataProps = $ReadOnly<{
+type InspectorDataProps = Readonly<{
   [propName: string]: string,
   ...
 }>;
 
 type InspectorDataGetter = (
-  <TElementType: React.ElementType>(
+  <TElementType extends React.ElementType>(
     componentOrHandle: React.ElementRef<TElementType> | number,
   ) => ?number,
-) => $ReadOnly<{
+) => Readonly<{
   measure: (callback: MeasureOnSuccessCallback) => void,
   props: InspectorDataProps,
 }>;
 
-export type InspectorData = $ReadOnly<{
-  closestInstance?: mixed,
+export type InspectorData = Readonly<{
+  closestInstance?: unknown,
   hierarchy: Array<{
     name: ?string,
     getInspectorData: InspectorDataGetter,
@@ -103,11 +103,11 @@ export type InspectorData = $ReadOnly<{
   componentStack: string,
 }>;
 
-export type TouchedViewDataAtPoint = $ReadOnly<
+export type TouchedViewDataAtPoint = Readonly<
   {
     pointerY: number,
     touchedViewTag?: number,
-    frame: $ReadOnly<{
+    frame: Readonly<{
       top: number,
       left: number,
       width: number,
@@ -119,40 +119,40 @@ export type TouchedViewDataAtPoint = $ReadOnly<
 
 export type RenderRootOptions = {
   onUncaughtError?: (
-    error: mixed,
-    errorInfo: {+componentStack?: ?string},
+    error: unknown,
+    errorInfo: {readonly componentStack?: ?string},
   ) => void,
   onCaughtError?: (
-    error: mixed,
+    error: unknown,
     errorInfo: {
-      +componentStack?: ?string,
+      readonly componentStack?: ?string,
       // $FlowFixMe[unclear-type] unknown props and state.
       // $FlowFixMe[value-as-type] Component in react repo is any-typed, but it will be well typed externally.
-      +errorBoundary?: ?React.Component<any, any>,
+      readonly errorBoundary?: ?React.Component<any, any>,
     },
   ) => void,
   onRecoverableError?: (
-    error: mixed,
-    errorInfo: {+componentStack?: ?string},
+    error: unknown,
+    errorInfo: {readonly componentStack?: ?string},
   ) => void,
   onDefaultTransitionIndicator?: () => void | (() => void),
 };
 
-export opaque type Node = mixed;
-export opaque type InternalInstanceHandle = mixed;
+export opaque type Node = unknown;
+export opaque type InternalInstanceHandle = unknown;
 
 export type ReactFabricType = {
-  findHostInstance_DEPRECATED<TElementType: React.ElementType>(
+  findHostInstance_DEPRECATED<TElementType extends React.ElementType>(
     componentOrHandle: ?(React.ElementRef<TElementType> | number),
   ): ?PublicInstance,
-  findNodeHandle<TElementType: React.ElementType>(
+  findNodeHandle<TElementType extends React.ElementType>(
     componentOrHandle: ?(React.ElementRef<TElementType> | number),
     suppressWarning?: boolean,
   ): ?number,
   dispatchCommand(
     handle: PublicInstance,
     command: string,
-    args: Array<mixed>,
+    args: Array<unknown>,
   ): void,
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
   sendAccessibilityEvent(handle: PublicInstance, eventType: string): void,
@@ -212,7 +212,7 @@ export type LayoutAnimationProperty =
   | 'scaleY'
   | 'scaleXY';
 
-export type LayoutAnimationAnimationConfig = $ReadOnly<{
+export type LayoutAnimationAnimationConfig = Readonly<{
   duration?: number,
   delay?: number,
   springDamping?: number,
@@ -221,7 +221,7 @@ export type LayoutAnimationAnimationConfig = $ReadOnly<{
   property?: LayoutAnimationProperty,
 }>;
 
-export type LayoutAnimationConfig = $ReadOnly<{
+export type LayoutAnimationConfig = Readonly<{
   duration: number,
   create?: LayoutAnimationAnimationConfig,
   update?: LayoutAnimationAnimationConfig,

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict-local
- * @generated SignedSource<<1f7876c0dc0b05685a730513dc410236>>
+ * @generated SignedSource<<260b8a01781c54c31a520f00cb1bde7f>>
  */
 
 'use strict';
@@ -17,8 +17,8 @@ import invariant from 'invariant';
 
 // Event configs
 export const customBubblingEventTypes: {
-  [eventName: string]: $ReadOnly<{
-    phasedRegistrationNames: $ReadOnly<{
+  [eventName: string]: Readonly<{
+    phasedRegistrationNames: Readonly<{
       captured: string,
       bubbled: string,
       skipBubbling?: ?boolean,
@@ -26,7 +26,7 @@ export const customBubblingEventTypes: {
   }>,
 } = {};
 export const customDirectEventTypes: {
-  [eventName: string]: $ReadOnly<{
+  [eventName: string]: Readonly<{
     registrationName: string,
   }>,
 } = {};

package/Libraries/Settings/Settings.ios.js

@@ -18,15 +18,29 @@ const subscriptions: Array<{
   ...
 }> = [];
 
+/**
+ * Wrapper around `NSUserDefaults`, a persistent key-value store available on
+ * iOS.
+ *
+ * @see https://reactnative.dev/docs/settings
+ * @platform ios
+ */
 const Settings = {
   _settings: (NativeSettingsManager &&
     NativeSettingsManager.getConstants().settings) as any,
 
+  /**
+   * Get the current value for the given key.
+   */
   get(key: string): unknown {
     // $FlowFixMe[object-this-reference]
     return this._settings[key];
   },
 
+  /**
+   * Set one or more values by merging the provided object into the current
+   * settings.
+   */
   set(settings: Object) {
     // $FlowFixMe[object-this-reference]
     // $FlowFixMe[unsafe-object-assign]
@@ -34,6 +48,11 @@ const Settings = {
     NativeSettingsManager.setValues(settings);
   },
 
+  /**
+   * Subscribe to changes for the specified keys. The callback is invoked
+   * whenever a watched key's value changes. Returns a `watchId` that can be
+   * passed to `clearWatch` to unsubscribe.
+   */
   watchKeys(keys: string | Array<string>, callback: Function): number {
     if (typeof keys === 'string') {
       keys = [keys];
@@ -49,6 +68,9 @@ const Settings = {
     return sid;
   },
 
+  /**
+   * Unsubscribe a watcher previously registered with `watchKeys`.
+   */
   clearWatch(watchId: number) {
     if (watchId < subscriptions.length) {
       subscriptions[watchId] = {keys: [], callback: null};

package/Libraries/Share/Share.js

@@ -41,42 +41,38 @@ export type ShareAction = {
   activityType?: string | null,
 };
 
+/**
+ * Opens a dialog to share text content.
+ *
+ * @see https://reactnative.dev/docs/share
+ */
 class Share {
   /**
-   * Open a dialog to share text content.
-   *
-   * In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`.
-   * 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 resolves with action being `Share.sharedAction`.
-   *
-   * ### Content
+   * Open a share dialog to share text content.
    *
-   * #### iOS
+   * On iOS, returns a Promise which resolves to an object containing `action`
+   * and `activityType`. If the user dismissed the dialog, the Promise will
+   * still resolve with action being `Share.dismissedAction` and all the other
+   * keys being undefined.
    *
-   *  - `url` - a URL to share
-   *  - `message` - a message to share
+   * On Android, returns a Promise which always resolves with action being
+   * `Share.sharedAction`.
    *
-   * At least one of `URL` or `message` is required.
+   * **Content:**
    *
-   * #### Android
+   * - `message` - A message to share.
+   * - `url` (iOS) - A URL to share.
+   * - `title` (Android) - Title of the message.
    *
-   * - `title` - title of the message (optional)
-   * - `message` - a message to share (often will include a URL).
+   * At least one of `url` or `message` is required.
    *
-   * ### Options
-   *
-   * #### iOS
-   *
-   *  - `subject` - a subject to share via email
-   *  - `excludedActivityTypes`
-   *  - `tintColor`
-   *
-   * #### Android
-   *
-   *  - `dialogTitle`
+   * **Options:**
    *
+   * - `dialogTitle` (Android) - Title of the share dialog.
+   * - `excludedActivityTypes` (iOS) - Activity types to exclude.
+   * - `subject` (iOS) - A subject to share via email.
+   * - `tintColor` (iOS) - Tint color for the share dialog.
+   * - `anchor` (iOS) - The anchor point for the popover (iPad).
    */
   static share(
     content: ShareContent,
@@ -173,7 +169,8 @@ class Share {
   static sharedAction: 'sharedAction' = 'sharedAction';
 
   /**
-   * The dialog has been dismissed.
+   * The dialog was dismissed.
+   *
    * @platform ios
    */
   static dismissedAction: 'dismissedAction' = 'dismissedAction';

package/Libraries/StyleSheet/PlatformColorValueTypes.js.flow

@@ -11,6 +11,12 @@
 import type {ProcessedColorValue} from './processColor';
 import type {NativeColorValue} from './StyleSheet';
 
+/**
+ * Select native platform color
+ * The color must match the string that exists on the native platform
+ *
+ * @see https://reactnative.dev/docs/platformcolor#example
+ */
 declare export function PlatformColor(
   ...names: Array<string>
 ): NativeColorValue;

package/Libraries/StyleSheet/StyleSheet.js

@@ -41,7 +41,7 @@ export type {
  * most useful when using DynamicColorIOS which can be a string or a dynamic
  * color object.
  *
- * type props = {backgroundColor: ColorValue};
+ * `type Props = {backgroundColor: ColorValue};`
  */
 export type ColorValue = ____ColorValue_Internal;
 
@@ -118,7 +118,7 @@ export type DangerouslyImpreciseStyleProp =
  * This will correctly give you the type 'absolute' | 'relative'
  */
 export type TypeForStyleKey<
-  +key extends keyof ____DangerouslyImpreciseStyle_Internal,
+  out key extends keyof ____DangerouslyImpreciseStyle_Internal,
 > = ____DangerouslyImpreciseStyle_Internal[key];
 
 /**
@@ -186,4 +186,44 @@ export type ImageStyle = ____ImageStyle_Internal;
  */
 export type DangerouslyImpreciseStyle = ____DangerouslyImpreciseStyle_Internal;
 
+/**
+ * A styling abstraction for React Native, inspired by CSS stylesheets.
+ *
+ * Use `StyleSheet.create()` to define a group of named styles in one place,
+ * separate from your render logic. The styles are plain objects, so the call
+ * is effectively an identity function — its main benefit is static type
+ * checking of each style against the valid native style properties for a
+ * `View`, `Text`, or `Image`. Naming styles and moving them out of the render
+ * tree also keeps components easier to read.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     padding: 24,
+ *   },
+ *   title: {
+ *     fontSize: 20,
+ *     fontWeight: '600',
+ *   },
+ * });
+ *
+ * function Screen() {
+ *   return (
+ *     <View style={styles.container}>
+ *       <Text style={styles.title}>Hello</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * The module also provides helpers for combining styles — `compose` (merge
+ * two styles, with the second overriding the first) and `flatten` (collapse
+ * an array of styles into a single object) — plus the constants `absoluteFill`,
+ * `absoluteFillObject`, and `hairlineWidth` for common layout patterns.
+ *
+ * @see https://reactnative.dev/docs/stylesheet
+ */
 export default StyleSheet;

package/Libraries/StyleSheet/StyleSheet.js.flow

@@ -119,7 +119,7 @@ export type DangerouslyImpreciseStyleProp =
  * This will correctly give you the type 'absolute' | 'relative'
  */
 export type TypeForStyleKey<
-  +key extends keyof ____DangerouslyImpreciseStyle_Internal,
+  out key extends keyof ____DangerouslyImpreciseStyle_Internal,
 > = ____DangerouslyImpreciseStyle_Internal[key];
 
 /**

package/Libraries/StyleSheet/StyleSheetExports.js

@@ -103,9 +103,10 @@ export default {
   },
 
   /**
-   * A very common pattern is to create overlays with position absolute and zero positioning,
-   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
-   * styles.
+   * A very common pattern is to create overlays with position absolute and
+   * zero positioning (`top`, `right`, `bottom`, `left` all set to `0`), so
+   * `absoluteFill` can be used for convenience and to reduce duplication of
+   * these repeated styles.
    */
   absoluteFill,
 
@@ -176,10 +177,11 @@ export default {
   },
 
   /**
-   * An identity function for creating style sheets.
+   * Creates a StyleSheet style reference from the given object. The values in
+   * the object are frozen in development to prevent mutation.
    */
   // $FlowFixMe[unsupported-variance-annotation]
-  create<+S extends ____Styles_Internal>(obj: S): Readonly<S> {
+  create<out S extends ____Styles_Internal>(obj: S): Readonly<S> {
     // TODO: This should return S as the return type. But first,
     // we need to codemod all the callsites that are typing this
     // return value as a number (even though it was opaque).

package/Libraries/StyleSheet/StyleSheetExports.js.flow

@@ -95,6 +95,6 @@ declare export const setStyleAttributePreprocessor: (
  * An identity function for creating style sheets.
  */
 // $FlowFixMe[unsupported-variance-annotation]
-declare export const create: <+S extends ____Styles_Internal>(
+declare export const create: <out S extends ____Styles_Internal>(
   obj: S & ____Styles_Internal,
 ) => Readonly<S>;

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -517,6 +517,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   filter?: ReadonlyArray<FilterFunction> | string | undefined;
 
   mixBlendMode?: BlendMode | undefined;
+  backgroundImage?: ReadonlyArray<BackgroundImageValue> | string | undefined;
   experimental_backgroundImage?:
     | ReadonlyArray<BackgroundImageValue>
     | string
@@ -572,7 +573,13 @@ export type FontVariant =
 export interface TextStyleIOS extends ViewStyle {
   fontVariant?: FontVariant[] | undefined;
   textDecorationColor?: ColorValue | undefined;
-  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
+  textDecorationStyle?:
+    | 'solid'
+    | 'double'
+    | 'dotted'
+    | 'dashed'
+    | 'wavy'
+    | undefined;
   writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined;
 }
 
@@ -627,14 +634,28 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
     | undefined;
   letterSpacing?: number | undefined;
   lineHeight?: number | undefined;
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+  textAlign?:
+    | 'auto'
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify'
+    | 'start'
+    | 'end'
+    | undefined;
   textDecorationLine?:
     | 'none'
     | 'underline'
     | 'line-through'
     | 'underline line-through'
     | undefined;
-  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
+  textDecorationStyle?:
+    | 'solid'
+    | 'double'
+    | 'dotted'
+    | 'dashed'
+    | 'wavy'
+    | undefined;
   textDecorationColor?: ColorValue | undefined;
   textShadowColor?: ColorValue | undefined;
   textShadowOffset?: {width: number; height: number} | undefined;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -845,6 +845,10 @@ export type ____ViewStyle_InternalBase = Readonly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
+  /**
+   * On iOS 13+, it is possible to change the corner curve of borders.
+   * @platform ios
+   */
   borderCurve?: 'circular' | 'continuous',
   borderBottomColor?: ____ColorValue_Internal,
   borderEndColor?: ____ColorValue_Internal,
@@ -881,12 +885,24 @@ export type ____ViewStyle_InternalBase = Readonly<{
   outlineOffset?: number,
   outlineStyle?: 'solid' | 'dotted' | 'dashed',
   outlineWidth?: number,
+  /**
+   * Sets the elevation of a view, using Android's underlying
+   * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
+   * This adds a drop shadow to the item and affects z-order for overlapping views.
+   * Only supported on Android 5.0+, has no effect on earlier versions.
+   *
+   * @platform android
+   */
   elevation?: number,
+  /**
+   * Controls whether the View can be the target of touch events.
+   */
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
   boxShadow?: ReadonlyArray<BoxShadowValue> | string,
   filter?: ReadonlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
+  backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
   experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
   experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
   experimental_backgroundPosition?:
@@ -1000,6 +1016,11 @@ type ____TextStyle_InternalBase = Readonly<{
   fontFamily?: string,
   fontSize?: number,
   fontStyle?: 'normal' | 'italic',
+  /**
+   * Specifies font weight. The values 'normal' and 'bold' are supported
+   * for most fonts. Not all fonts have a variant for each of the numeric
+   * values, in that case the closest one is chosen.
+   */
   fontWeight?: ____FontWeight_Internal,
   fontVariant?: ____FontVariantArray_Internal | string,
   textShadowOffset?: Readonly<{
@@ -1010,7 +1031,14 @@ type ____TextStyle_InternalBase = Readonly<{
   textShadowColor?: ____ColorValue_Internal,
   letterSpacing?: number,
   lineHeight?: number,
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
+  textAlign?:
+    | 'auto'
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify'
+    | 'start'
+    | 'end',
   textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',
   includeFontPadding?: boolean,
   textDecorationLine?:
@@ -1018,7 +1046,7 @@ type ____TextStyle_InternalBase = Readonly<{
     | 'underline'
     | 'line-through'
     | 'underline line-through',
-  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
+  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy',
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
   userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all',
@@ -1064,7 +1092,7 @@ export type ____DangerouslyImpreciseStyle_Internal = Readonly<{
   ...
 }>;
 
-export type StyleProp<+T> =
+export type StyleProp<out T> =
   | null
   | void
   | T
@@ -1092,7 +1120,7 @@ export type ____ImageStyleProp_Internal = StyleProp<
 export type ____Styles_Internal = {
   // $FlowFixMe[incompatible-exact]
   // $FlowFixMe[incompatible-type]
-  +[key: string]: Partial<____DangerouslyImpreciseStyle_Internal>,
+  readonly [key: string]: Partial<____DangerouslyImpreciseStyle_Internal>,
   ...
 };
 
@@ -1100,7 +1128,7 @@ export type ____Styles_Internal = {
 // ____FlattenStyleProp_Helper should be considered internal.
 type FlattenDepthLimiter = [void, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 type ____FlattenStyleProp_Helper<
-  +TStyleProp extends StyleProp<unknown>,
+  out TStyleProp extends StyleProp<unknown>,
   Depth extends Values<FlattenDepthLimiter> = 9,
 > = Depth extends 0
   ? empty
@@ -1114,7 +1142,7 @@ type ____FlattenStyleProp_Helper<
       : TStyleProp;
 
 export type ____FlattenStyleProp_Internal<
-  +TStyleProp extends StyleProp<unknown>,
+  out TStyleProp extends StyleProp<unknown>,
 > =
   ____FlattenStyleProp_Helper<TStyleProp> extends empty // $FlowFixMe[unclear-type]
     ? any

package/Libraries/StyleSheet/flattenStyle.js

@@ -20,6 +20,31 @@ type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
   ? empty
   : TStyleProp;
 
+function flattenStyleArrayInto<
+  TStyleProp extends ____DangerouslyImpreciseAnimatedStyleProp_Internal,
+>(result: {[string]: $FlowFixMe}, styles: ReadonlyArray<?TStyleProp>) {
+  for (let i = 0, styleLength = styles.length; i < styleLength; ++i) {
+    const style = styles[i];
+    if (style === null || typeof style !== 'object') {
+      continue;
+    }
+
+    if (Array.isArray(style)) {
+      // $FlowFixMe[underconstrained-implicit-instantiation]
+      flattenStyleArrayInto(result, style);
+      continue;
+    }
+
+    // $FlowFixMe[invalid-in-rhs]
+    for (const key in style) {
+      // $FlowFixMe[incompatible-use]
+      // $FlowFixMe[invalid-computed-prop]
+      // $FlowFixMe[prop-missing]
+      result[key] = style[key];
+    }
+  }
+}
+
 function flattenStyle<
   TStyleProp extends ____DangerouslyImpreciseAnimatedStyleProp_Internal,
 >(
@@ -36,19 +61,9 @@ function flattenStyle<
   }
 
   const result: {[string]: $FlowFixMe} = {};
-  for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    const computedStyle = flattenStyle(style[i]);
-    if (computedStyle) {
-      // $FlowFixMe[invalid-in-rhs]
-      for (const key in computedStyle) {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[invalid-computed-prop]
-        // $FlowFixMe[prop-missing]
-        result[key] = computedStyle[key];
-      }
-    }
-  }
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  flattenStyleArrayInto(result, style);
+
   // $FlowFixMe[incompatible-type]
   return result;
 }