react-native-tvos 0.84.1-0 → 0.85.0-0

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -11,6 +11,7 @@
 import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 
 import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
+import {colorAttribute} from '../View/ReactNativeStyleAttributes';
 
 type PartialViewConfigWithoutName = Omit<PartialViewConfig, 'uiViewClassName'>;
 
@@ -111,22 +112,16 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
     textShadowRadius: true,
     letterSpacing: true,
     textDecorationStyle: true,
-    textDecorationColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
-    color: {process: require('../../StyleSheet/processColor').default},
+    textDecorationColor: colorAttribute,
+    color: colorAttribute,
     maxFontSizeMultiplier: true,
-    textShadowColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    textShadowColor: colorAttribute,
     editable: true,
     inputAccessoryViewID: true,
     inputAccessoryViewButtonLabel: true,
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
-    placeholderTextColor: {
-      process: require('../../StyleSheet/processColor').default,
-    },
+    placeholderTextColor: colorAttribute,
     clearButtonMode: true,
     keyboardType: true,
     selection: true,
@@ -134,7 +129,7 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
     submitBehavior: true,
     mostRecentEventCount: true,
     scrollEnabled: true,
-    selectionColor: {process: require('../../StyleSheet/processColor').default},
+    selectionColor: colorAttribute,
     contextMenuHidden: true,
     secureTextEntry: true,
     placeholder: true,

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -25,20 +25,21 @@ import * as React from 'react';
 /**
  * @see TextInputProps.onChange
  */
-type TextInputChangeEventData = $ReadOnly<{
+type TextInputChangeEventData = Readonly<{
   eventCount: number,
   target: number,
   text: string,
+  selection?: Selection,
 }>;
 
 export type TextInputChangeEvent =
   NativeSyntheticEvent<TextInputChangeEventData>;
 
 export type TextInputEvent = NativeSyntheticEvent<
-  $ReadOnly<{
+  Readonly<{
     eventCount: number,
     previousText: string,
-    range: $ReadOnly<{
+    range: Readonly<{
       start: number,
       end: number,
     }>,
@@ -47,9 +48,9 @@ export type TextInputEvent = NativeSyntheticEvent<
   }>,
 >;
 
-type TextInputContentSizeChangeEventData = $ReadOnly<{
+type TextInputContentSizeChangeEventData = Readonly<{
   target: number,
-  contentSize: $ReadOnly<{
+  contentSize: Readonly<{
     width: number,
     height: number,
   }>,
@@ -73,17 +74,17 @@ export type TextInputBlurEvent = BlurEvent;
  */
 export type TextInputFocusEvent = FocusEvent;
 
-type TargetEvent = $ReadOnly<{
+type TargetEvent = Readonly<{
   target: number,
   ...
 }>;
 
-export type Selection = $ReadOnly<{
+export type Selection = Readonly<{
   start: number,
   end: number,
 }>;
 
-type TextInputSelectionChangeEventData = $ReadOnly<{
+type TextInputSelectionChangeEventData = Readonly<{
   ...TargetEvent,
   selection: Selection,
   ...
@@ -95,7 +96,7 @@ type TextInputSelectionChangeEventData = $ReadOnly<{
 export type TextInputSelectionChangeEvent =
   NativeSyntheticEvent<TextInputSelectionChangeEventData>;
 
-type TextInputKeyPressEventData = $ReadOnly<{
+type TextInputKeyPressEventData = Readonly<{
   ...TargetEvent,
   key: string,
   target?: ?number,
@@ -109,7 +110,7 @@ type TextInputKeyPressEventData = $ReadOnly<{
 export type TextInputKeyPressEvent =
   NativeSyntheticEvent<TextInputKeyPressEventData>;
 
-type TextInputEndEditingEventData = $ReadOnly<{
+type TextInputEndEditingEventData = Readonly<{
   ...TargetEvent,
   eventCount: number,
   text: string,
@@ -122,7 +123,7 @@ type TextInputEndEditingEventData = $ReadOnly<{
 export type TextInputEndEditingEvent =
   NativeSyntheticEvent<TextInputEndEditingEventData>;
 
-type TextInputSubmitEditingEventData = $ReadOnly<{
+type TextInputSubmitEditingEventData = Readonly<{
   ...TargetEvent,
   eventCount: number,
   text: string,
@@ -266,7 +267,7 @@ export type EnterKeyHintTypeOptions =
 
 type PasswordRules = string;
 
-export type TextInputIOSProps = $ReadOnly<{
+export type TextInputIOSProps = Readonly<{
   /**
    * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
    * @platform ios
@@ -306,7 +307,7 @@ export type TextInputIOSProps = $ReadOnly<{
    */
   dataDetectorTypes?:
     | ?DataDetectorTypesType
-    | $ReadOnlyArray<DataDetectorTypesType>,
+    | ReadonlyArray<DataDetectorTypesType>,
 
   /**
    * If `true`, the keyboard disables the return key when there is no text and
@@ -403,7 +404,7 @@ export type TextInputIOSProps = $ReadOnly<{
   smartInsertDelete?: ?boolean,
 }>;
 
-export type TextInputAndroidProps = $ReadOnly<{
+export type TextInputAndroidProps = Readonly<{
   /**
    * When provided it will set the color of the cursor (or "caret") in the component.
    * Unlike the behavior of `selectionColor` the cursor color will be set independently
@@ -512,7 +513,7 @@ export type TextInputAndroidProps = $ReadOnly<{
   underlineColorAndroid?: ?ColorValue,
 }>;
 
-type TextInputBaseProps = $ReadOnly<{
+type TextInputBaseProps = Readonly<{
   /**
    * When provided, the text input will only accept drag and drop events for the specified
    * types. If null or not provided, the text input will accept all types of drag and drop events.
@@ -531,7 +532,7 @@ type TextInputBaseProps = $ReadOnly<{
    *
    * @see https://developer.android.com/reference/android/content/ClipData for more information on MIME types
    */
-  experimental_acceptDragAndDropTypes?: ?$ReadOnlyArray<string>,
+  experimental_acceptDragAndDropTypes?: ?ReadonlyArray<string>,
 
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
@@ -946,7 +947,7 @@ type TextInputBaseProps = $ReadOnly<{
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
    */
-  selection?: ?$ReadOnly<{
+  selection?: ?Readonly<{
     start: number,
     end?: ?number,
   }>,
@@ -1031,7 +1032,7 @@ type TextInputBaseProps = $ReadOnly<{
   textAlign?: ?('left' | 'center' | 'right'),
 }>;
 
-export type TextInputProps = $ReadOnly<{
+export type TextInputProps = Readonly<{
   ...Omit<ViewProps, 'style' | 'experimental_accessibilityOrder'>,
   ...TextInputIOSProps,
   ...TextInputAndroidProps,
@@ -1167,8 +1168,8 @@ type InternalTextInput = component(
   ...TextInputProps
 );
 
-export type TextInputComponentStatics = $ReadOnly<{
-  State: $ReadOnly<{
+export type TextInputComponentStatics = Readonly<{
+  State: Readonly<{
     currentlyFocusedInput: () => ?HostInstance,
     currentlyFocusedField: () => ?number,
     focusTextInput: (textField: ?HostInstance) => void,

package/Libraries/Components/TextInput/TextInput.js

@@ -121,7 +121,7 @@ export type {
   TextInputSubmitEditingEvent,
 };
 
-type TextInputStateType = $ReadOnly<{
+type TextInputStateType = Readonly<{
   /**
    * @deprecated Use currentlyFocusedInput
    * Returns the ID of the currently focused text field, if one exists
@@ -473,9 +473,13 @@ function InternalTextInput(props: TextInputProps): React.Node {
           getNativeRef(): ?TextInputInstance {
             return inputRef.current;
           },
-          // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
-            return TextInputState.currentlyFocusedInput() === inputRef.current;
+            const currentlyFocusedInput =
+              TextInputState.currentlyFocusedInput();
+            return (
+              currentlyFocusedInput != null &&
+              currentlyFocusedInput === inputRef.current
+            );
           },
           setSelection(start: number, end: number): void {
             if (inputRef.current != null) {
@@ -973,7 +977,7 @@ TextInput.State = {
   focusTextInput: TextInputState.focusTextInput,
 };
 
-export type TextInputComponentStatics = $ReadOnly<{
+export type TextInputComponentStatics = Readonly<{
   State: TextInputStateType,
 }>;
 

package/Libraries/Components/Touchable/PooledClass.js

@@ -105,7 +105,7 @@ const addPoolingTo = function <T>(
   pooler: Pooler,
 ): Class<T> & {
   getPooled(
-    ...args: $ReadOnlyArray<unknown>
+    ...args: ReadonlyArray<unknown>
   ): /* arguments of the constructor */ T,
   release(instance: unknown): void,
   ...

package/Libraries/Components/Touchable/Touchable.js

@@ -25,7 +25,7 @@ import Position from './Position';
 import * as React from 'react';
 
 const extractSingleTouch = (nativeEvent: {
-  +changedTouches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
+  +changedTouches: ReadonlyArray<GestureResponderEvent['nativeEvent']>,
   +force?: number,
   +identifier: number,
   +locationX: number,
@@ -34,7 +34,7 @@ const extractSingleTouch = (nativeEvent: {
   +pageY: number,
   +target: ?number,
   +timestamp: number,
-  +touches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
+  +touches: ReadonlyArray<GestureResponderEvent['nativeEvent']>,
 }) => {
   const touches = nativeEvent.touches;
   const changedTouches = nativeEvent.changedTouches;

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -19,7 +19,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type TouchableBounceProps = $ReadOnly<{
+type TouchableBounceProps = Readonly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   onPressAnimationComplete?: ?() => void,
@@ -31,7 +31,7 @@ type TouchableBounceProps = $ReadOnly<{
   hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 }>;
 
-type TouchableBounceState = $ReadOnly<{
+type TouchableBounceState = Readonly<{
   pressability: Pressability,
   scale: Animated.Value,
 }>;
@@ -226,10 +226,10 @@ export default (function TouchableBounceWrapper({
   ...props
 }: {
   ref: React.RefSetter<unknown>,
-  ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
+  ...Readonly<Omit<TouchableBounceProps, 'hostRef'>>,
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
   ref?: React.RefSetter<unknown>,
-  ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
+  ...props: Readonly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -24,7 +24,7 @@ import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
-type TouchableHighlightBaseProps = $ReadOnly<{
+type TouchableHighlightBaseProps = Readonly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    */
@@ -50,18 +50,18 @@ type TouchableHighlightBaseProps = $ReadOnly<{
   hostRef?: React.RefSetter<React.ElementRef<typeof View>>,
 }>;
 
-export type TouchableHighlightProps = $ReadOnly<{
+export type TouchableHighlightProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TVViewProps,
   ...TouchableHighlightBaseProps,
 }>;
 
-type ExtraStyles = $ReadOnly<{
+type ExtraStyles = Readonly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
 }>;
 
-type TouchableHighlightState = $ReadOnly<{
+type TouchableHighlightState = Readonly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
 }>;
@@ -401,13 +401,13 @@ class TouchableHighlightImpl extends React.Component<
 
 const TouchableHighlight: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>
+  ...props: Readonly<Omit<TouchableHighlightProps, 'hostRef'>>
 ) = ({
   ref: hostRef,
   ...props
 }: {
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
-  ...$ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>,
+  ...Readonly<Omit<TouchableHighlightProps, 'hostRef'>>,
 }) => <TouchableHighlightImpl {...props} hostRef={hostRef} />;
 
 TouchableHighlight.displayName = 'TouchableHighlight';

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -26,7 +26,7 @@ import invariant from 'invariant';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
-export type TouchableNativeFeedbackProps = $ReadOnly<{
+export type TouchableNativeFeedbackProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TVViewProps,
   /**
@@ -44,14 +44,14 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
    *         type is available on Android API level 21+
    */
   background?: ?(
-    | $ReadOnly<{
+    | Readonly<{
         type: 'ThemeAttrAndroid',
         attribute:
           | 'selectableItemBackground'
           | 'selectableItemBackgroundBorderless',
         rippleRadius: ?number,
       }>
-    | $ReadOnly<{
+    | Readonly<{
         type: 'RippleAndroid',
         color: ?number,
         borderless: boolean,
@@ -71,7 +71,7 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
   useForeground?: ?boolean,
 }>;
 
-type TouchableNativeFeedbackState = $ReadOnly<{
+type TouchableNativeFeedbackState = Readonly<{
   pressability: Pressability,
 }>;
 
@@ -95,7 +95,7 @@ class TouchableNativeFeedback extends React.Component<
    *
    * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
+  static SelectableBackground: (rippleRadius?: ?number) => Readonly<{
     attribute: 'selectableItemBackground',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
@@ -112,7 +112,7 @@ class TouchableNativeFeedback extends React.Component<
    *
    * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => $ReadOnly<{
+  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => Readonly<{
     attribute: 'selectableItemBackgroundBorderless',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
@@ -137,7 +137,7 @@ class TouchableNativeFeedback extends React.Component<
     color: string,
     borderless: boolean,
     rippleRadius?: ?number,
-  ) => $ReadOnly<{
+  ) => Readonly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -23,7 +23,7 @@ import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
-type TouchableOpacityBaseProps = $ReadOnly<{
+type TouchableOpacityBaseProps = Readonly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    * Defaults to 0.2
@@ -34,13 +34,13 @@ type TouchableOpacityBaseProps = $ReadOnly<{
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 }>;
 
-export type TouchableOpacityProps = $ReadOnly<{
+export type TouchableOpacityProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TVViewProps,
   ...TouchableOpacityBaseProps,
 }>;
 
-type TouchableOpacityState = $ReadOnly<{
+type TouchableOpacityState = Readonly<{
   anim: Animated.Value,
   pressability: Pressability,
 }>;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -39,7 +39,7 @@ export type TouchableWithoutFeedbackPropsAndroid = {
   touchSoundDisabled?: ?boolean,
 };
 
-export type TouchableWithoutFeedbackProps = $ReadOnly<
+export type TouchableWithoutFeedbackProps = Readonly<
   {
     children?: ?React.Node,
     /**

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -14,7 +14,7 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   style?: ?ViewStyleProp,
   children?: React.Node,
   ...

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -24,7 +24,48 @@ import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
-const colorAttributes = {process: processColor};
+const nativeCSSParsing = ReactNativeFeatureFlags.enableNativeCSSParsing();
+
+/**
+ * Gated style attribute types. When native CSS parsing is enabled, the JS
+ * processor is bypassed and the raw value is sent directly to native.
+ * These are exported so that other ViewConfigs can reuse them.
+ */
+export const colorAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processColor};
+
+export const filterAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processFilter};
+
+export const boxShadowAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBoxShadow};
+
+export const backgroundImageAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundImage};
+
+export const backgroundSizeAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundSize};
+
+export const backgroundPositionAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundPosition};
+
+export const backgroundRepeatAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processBackgroundRepeat};
+
+export const transformAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processTransform};
+
+export const transformOriginAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processTransformOrigin};
 
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
@@ -111,7 +152,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    * Shadow
    */
   elevation: true,
-  shadowColor: colorAttributes,
+  shadowColor: colorAttribute,
   shadowOffset: {diff: sizesDiffer},
   shadowOpacity: true,
   shadowRadius: true,
@@ -119,15 +160,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Transform
    */
-  transform: {process: processTransform},
-  transformOrigin: {process: processTransformOrigin},
+  transform: transformAttribute,
+  transformOrigin: transformOriginAttribute,
 
   /**
    * Filter
    */
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processFilter},
+  filter: filterAttribute,
 
   /**
    * MixBlendMode
@@ -142,63 +181,61 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processBoxShadow},
+  boxShadow: boxShadowAttribute,
 
   /**
    * BackgroundImage
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
+  experimental_backgroundImage: backgroundImageAttribute,
 
   /**
    * BackgroundSize
    */
-  experimental_backgroundSize: {process: processBackgroundSize},
+  experimental_backgroundSize: backgroundSizeAttribute,
 
   /**
    * BackgroundPosition
    */
-  experimental_backgroundPosition: {process: processBackgroundPosition},
+  experimental_backgroundPosition: backgroundPositionAttribute,
 
   /**
    * BackgroundRepeat
    */
-  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
 
   /**
    * View
    */
   backfaceVisibility: true,
-  backgroundColor: colorAttributes,
-  borderBlockColor: colorAttributes,
-  borderBlockEndColor: colorAttributes,
-  borderBlockStartColor: colorAttributes,
-  borderBottomColor: colorAttributes,
+  backgroundColor: colorAttribute,
+  borderBlockColor: colorAttribute,
+  borderBlockEndColor: colorAttribute,
+  borderBlockStartColor: colorAttribute,
+  borderBottomColor: colorAttribute,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
-  borderColor: colorAttributes,
+  borderColor: colorAttribute,
   borderCurve: true,
-  borderEndColor: colorAttributes,
+  borderEndColor: colorAttribute,
   borderEndEndRadius: true,
   borderEndStartRadius: true,
-  borderLeftColor: colorAttributes,
+  borderLeftColor: colorAttribute,
   borderRadius: true,
-  borderRightColor: colorAttributes,
-  borderStartColor: colorAttributes,
+  borderRightColor: colorAttribute,
+  borderStartColor: colorAttribute,
   borderStartEndRadius: true,
   borderStartStartRadius: true,
   borderStyle: true,
-  borderTopColor: colorAttributes,
+  borderTopColor: colorAttribute,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   cursor: true,
   opacity: true,
-  outlineColor: colorAttributes,
+  outlineColor: colorAttribute,
   outlineOffset: true,
   outlineStyle: true,
   outlineWidth: true,
@@ -207,7 +244,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Text
    */
-  color: colorAttributes,
+  color: colorAttribute,
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
@@ -218,10 +255,10 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   lineHeight: true,
   textAlign: true,
   textAlignVertical: true,
-  textDecorationColor: colorAttributes,
+  textDecorationColor: colorAttribute,
   textDecorationLine: true,
   textDecorationStyle: true,
-  textShadowColor: colorAttributes,
+  textShadowColor: colorAttribute,
   textShadowOffset: true,
   textShadowRadius: true,
   textTransform: true,
@@ -232,9 +269,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Image
    */
-  overlayColor: colorAttributes,
+  overlayColor: colorAttribute,
   resizeMode: true,
-  tintColor: colorAttributes,
+  tintColor: colorAttribute,
   objectFit: true,
 };
 

package/Libraries/Components/View/View.js

@@ -153,6 +153,12 @@ component View(
     delete processedProps.isTVSelectable;
   }
 
+  // Views with scrollSnapAlign must not be flattened by Fabric, otherwise
+  // the prop never reaches the native view and scroll snapping breaks.
+  if (processedProps.scrollSnapAlign != null) {
+    processedProps.collapsable = false;
+  }
+
   const actualView =
     ref == null ? (
       <ViewNativeComponent {...processedProps} />