react-native-windows 0.84.0-preview.9 → 0.85.0-preview.1

package/Libraries/Components/Touchable/TouchableHighlight.windows.js

@@ -22,7 +22,7 @@ import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
-type AndroidProps = $ReadOnly<{
+type AndroidProps = Readonly<{
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
@@ -30,7 +30,7 @@ type AndroidProps = $ReadOnly<{
   nextFocusUp?: ?number,
 }>;
 
-type IOSProps = $ReadOnly<{
+type IOSProps = Readonly<{
   /**
    * @deprecated Use `focusable` instead
    */
@@ -38,7 +38,7 @@ type IOSProps = $ReadOnly<{
 }>;
 
 // [Windows
-type WindowProps = $ReadOnly<{
+type WindowProps = Readonly<{
   onAccessibilityTap?: ?() => void,
   //onMouseEnter: ?() => void,
   //onMouseLeave: ?() => void,
@@ -46,7 +46,7 @@ type WindowProps = $ReadOnly<{
 }>;
 // Windows]
 
-type TouchableHighlightBaseProps = $ReadOnly<{
+type TouchableHighlightBaseProps = Readonly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    */
@@ -72,7 +72,7 @@ type TouchableHighlightBaseProps = $ReadOnly<{
   hostRef?: React.RefSetter<React.ElementRef<typeof View>>,
 }>;
 
-export type TouchableHighlightProps = $ReadOnly<{
+export type TouchableHighlightProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...AndroidProps,
   ...IOSProps,
@@ -80,12 +80,12 @@ export type TouchableHighlightProps = $ReadOnly<{
   ...TouchableHighlightBaseProps,
 }>;
 
-type ExtraStyles = $ReadOnly<{
+type ExtraStyles = Readonly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
 }>;
 
-type TouchableHighlightState = $ReadOnly<{
+type TouchableHighlightState = Readonly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
 }>;
@@ -437,13 +437,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

@@ -69,7 +69,7 @@ type TouchableNativeFeedbackTVProps = {
   nextFocusUp?: ?number,
 };
 
-export type TouchableNativeFeedbackProps = $ReadOnly<{
+export type TouchableNativeFeedbackProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TouchableNativeFeedbackTVProps,
   /**
@@ -87,14 +87,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,
@@ -114,7 +114,7 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
   useForeground?: ?boolean,
 }>;
 
-type TouchableNativeFeedbackState = $ReadOnly<{
+type TouchableNativeFeedbackState = Readonly<{
   pressability: Pressability,
 }>;
 
@@ -138,7 +138,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,
@@ -155,7 +155,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,
@@ -180,7 +180,7 @@ class TouchableNativeFeedback extends React.Component<
     color: string,
     borderless: boolean,
     rippleRadius?: ?number,
-  ) => $ReadOnly<{
+  ) => Readonly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,

package/Libraries/Components/Touchable/TouchableNativeFeedback.windows.js

@@ -69,7 +69,7 @@ type TouchableNativeFeedbackTVProps = {
   nextFocusUp?: ?number,
 };
 
-export type TouchableNativeFeedbackProps = $ReadOnly<{
+export type TouchableNativeFeedbackProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TouchableNativeFeedbackTVProps,
   /**
@@ -87,14 +87,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,
@@ -114,7 +114,7 @@ export type TouchableNativeFeedbackProps = $ReadOnly<{
   useForeground?: ?boolean,
 }>;
 
-type TouchableNativeFeedbackState = $ReadOnly<{
+type TouchableNativeFeedbackState = Readonly<{
   pressability: Pressability,
 }>;
 
@@ -138,7 +138,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,
@@ -155,7 +155,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,
@@ -180,7 +180,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

@@ -21,7 +21,7 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-export type TouchableOpacityTVProps = $ReadOnly<{
+export type TouchableOpacityTVProps = Readonly<{
   /**
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
@@ -66,7 +66,7 @@ export type TouchableOpacityTVProps = $ReadOnly<{
   nextFocusUp?: ?number,
 }>;
 
-type TouchableOpacityBaseProps = $ReadOnly<{
+type TouchableOpacityBaseProps = Readonly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    * Defaults to 0.2
@@ -77,13 +77,13 @@ type TouchableOpacityBaseProps = $ReadOnly<{
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 }>;
 
-export type TouchableOpacityProps = $ReadOnly<{
+export type TouchableOpacityProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TouchableOpacityTVProps,
   ...TouchableOpacityBaseProps,
 }>;
 
-type TouchableOpacityState = $ReadOnly<{
+type TouchableOpacityState = Readonly<{
   anim: Animated.Value,
   pressability: Pressability,
 }>;

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -21,7 +21,7 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-export type TouchableOpacityTVProps = $ReadOnly<{
+export type TouchableOpacityTVProps = Readonly<{
   /**
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
@@ -66,7 +66,7 @@ export type TouchableOpacityTVProps = $ReadOnly<{
   nextFocusUp?: ?number,
 }>;
 
-type TouchableOpacityBaseProps = $ReadOnly<{
+type TouchableOpacityBaseProps = Readonly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    * Defaults to 0.2
@@ -77,13 +77,13 @@ type TouchableOpacityBaseProps = $ReadOnly<{
   hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
 }>;
 
-export type TouchableOpacityProps = $ReadOnly<{
+export type TouchableOpacityProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TouchableOpacityTVProps,
   ...TouchableOpacityBaseProps,
 }>;
 
-type TouchableOpacityState = $ReadOnly<{
+type TouchableOpacityState = Readonly<{
   anim: Animated.Value,
   pressability: Pressability,
 }>;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

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

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -51,7 +51,7 @@ export type TouchableWithoutFeedbackPropsWindows = {
 };
 // Windows]
 
-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.windows.js

@@ -298,7 +298,7 @@ component View(
   return actualView;
 }
 
-// eslint-disable-next-line no-unreachable
+ 
 View.displayName = 'View';
 
 export default View;

package/Libraries/Components/View/ViewAccessibility.js

@@ -154,7 +154,7 @@ export type AccessibilityActionName =
   | 'escape';
 
 // the info associated with an accessibility action
-export type AccessibilityActionInfo = $ReadOnly<{
+export type AccessibilityActionInfo = Readonly<{
   name: AccessibilityActionName | string,
   label?: string,
   ...
@@ -162,7 +162,7 @@ export type AccessibilityActionInfo = $ReadOnly<{
 
 // The info included in the event sent to onAccessibilityAction
 export type AccessibilityActionEvent = NativeSyntheticEvent<
-  $ReadOnly<{actionName: string, ...}>,
+  Readonly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
@@ -189,7 +189,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{
+export type AccessibilityValue = Readonly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -211,7 +211,7 @@ export type AccessibilityValue = $ReadOnly<{
   text?: Stringish,
 }>;
 
-export type AccessibilityPropsAndroid = $ReadOnly<{
+export type AccessibilityPropsAndroid = Readonly<{
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.
@@ -268,7 +268,7 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
   screenReaderFocusable?: boolean,
 }>;
 
-export type AccessibilityPropsIOS = $ReadOnly<{
+export type AccessibilityPropsIOS = Readonly<{
   /**
    * Prevents view from being inverted if set to true and color inversion is turned on.
    *
@@ -338,7 +338,7 @@ export type AccessibilityPropsIOS = $ReadOnly<{
   accessibilityRespondsToUserInteraction?: ?boolean,
 }>;
 
-export type AccessibilityProps = $ReadOnly<{
+export type AccessibilityProps = Readonly<{
   ...AccessibilityPropsAndroid,
   ...AccessibilityPropsIOS,
   /**
@@ -403,7 +403,7 @@ export type AccessibilityProps = $ReadOnly<{
    * Provides an array of custom actions available for accessibility.
    *
    */
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
 
   /**
    * alias for accessibilityState

package/Libraries/Components/View/ViewAccessibility.windows.js

@@ -194,7 +194,7 @@ export type AccessibilityActionName =
   | 'escape';
 
 // the info associated with an accessibility action
-export type AccessibilityActionInfo = $ReadOnly<{
+export type AccessibilityActionInfo = Readonly<{
   name: AccessibilityActionName | string,
   label?: string,
   ...
@@ -202,7 +202,7 @@ export type AccessibilityActionInfo = $ReadOnly<{
 
 // The info included in the event sent to onAccessibilityAction
 export type AccessibilityActionEvent = NativeSyntheticEvent<
-  $ReadOnly<{actionName: string, ...}>,
+  Readonly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
@@ -232,7 +232,7 @@ export type AccessibilityState = {
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{
+export type AccessibilityValue = Readonly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -254,7 +254,7 @@ export type AccessibilityValue = $ReadOnly<{
   text?: Stringish,
 }>;
 
-export type AccessibilityPropsAndroid = $ReadOnly<{
+export type AccessibilityPropsAndroid = Readonly<{
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
    * the text is read aloud. The value should should match the nativeID of the related element.
@@ -303,7 +303,7 @@ export type AccessibilityPropsAndroid = $ReadOnly<{
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
 }>;
 
-export type AccessibilityPropsIOS = $ReadOnly<{
+export type AccessibilityPropsIOS = Readonly<{
   /**
    * Prevents view from being inverted if set to true and color inversion is turned on.
    *
@@ -373,7 +373,7 @@ export type AccessibilityPropsWindows = $ReadOnly<{
 }>;
 // Windows]
 
-export type AccessibilityProps = $ReadOnly<{
+export type AccessibilityProps = Readonly<{
   ...AccessibilityPropsAndroid,
   ...AccessibilityPropsIOS,
   ...AccessibilityPropsWindows, // [Windows]
@@ -439,7 +439,7 @@ export type AccessibilityProps = $ReadOnly<{
    * Provides an array of custom actions available for accessibility.
    *
    */
-  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
 
   /**
    * alias for accessibilityState