react-native-windows 0.77.0 → 0.78.0-preview.2

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

@@ -620,6 +620,7 @@ export type ViewProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   /** A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.
    *
@@ -646,15 +647,6 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsableChildren?: ?boolean,
 
-  /**
-   * Contols whether this view, and its transitive children, are laid in a way
-   * consistent with web browsers ('strict'), or consistent with existing
-   * React Native code which may rely on incorrect behavior ('classic').
-   *
-   * This prop only works when using Fabric.
-   */
-  experimental_layoutConformance?: ?('strict' | 'classic'),
-
   /**
    * Used to locate this view from native classes. Has precedence over `nativeID` prop.
    *

package/Libraries/Core/ReactNativeVersion.js

@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 77,
+  minor: 78,
   patch: 0,
-  prerelease: null,
+  prerelease: 'rc.0',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpBatchedBridge.js

@@ -10,27 +10,12 @@
 
 'use strict';
 
-let registerModule;
-if (global.RN$Bridgeless === true && global.RN$registerCallableModule) {
-  registerModule = global.RN$registerCallableModule;
-} else {
-  const BatchedBridge = require('../BatchedBridge/BatchedBridge');
-  registerModule = (
-    moduleName: string,
-    /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
-     * Flow's LTI update could not be added via codemod */
-    factory,
-  ) => BatchedBridge.registerLazyCallableModule(moduleName, factory);
-}
+import registerModule from './registerCallableModule';
 
 registerModule('Systrace', () => require('../Performance/Systrace'));
 if (!(global.RN$Bridgeless === true)) {
   registerModule('JSTimers', () => require('./Timers/JSTimers'));
 }
-registerModule('HeapCapture', () => require('../HeapCapture/HeapCapture'));
-registerModule('SamplingProfiler', () =>
-  require('../Performance/SamplingProfiler'),
-);
 registerModule('RCTLog', () => require('../Utilities/RCTLog'));
 registerModule(
   'RCTDeviceEventEmitter',

package/Libraries/EventEmitter/RCTEventEmitter.js

@@ -10,15 +10,11 @@
 
 'use strict';
 
-const BatchedBridge = require('../BatchedBridge/BatchedBridge');
+import registerCallableModule from '../Core/registerCallableModule';
 
 const RCTEventEmitter = {
   register(eventEmitter: any) {
-    if (global.RN$Bridgeless) {
-      global.RN$registerCallableModule('RCTEventEmitter', () => eventEmitter);
-    } else {
-      BatchedBridge.registerCallableModule('RCTEventEmitter', eventEmitter);
-    }
+    registerCallableModule('RCTEventEmitter', eventEmitter);
   },
 };
 

package/Libraries/Image/AssetSourceResolver.js

@@ -55,6 +55,17 @@ function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
 
 /**
  * Returns true if the asset can be loaded over the network.
+ *
+ * This prevents an issue loading XML assets on Android. XML asset types like
+ * vector drawables can only be loaded from precompiled source. Android does
+ * not support loading these over the network, and AAPT precompiles data by
+ * breaking path data and resource information apart into multiple files,
+ * stuffing it all into the resource table. As a result, we should only attempt
+ * to load resources as we would in release builds: by the resource name.
+ *
+ * For more information, see:
+ * https://issuetracker.google.com/issues/62435069
+ * https://issuetracker.google.com/issues/68293189
  */
 function assetSupportsNetworkLoads(asset: PackagerAsset): boolean {
   return !(asset.type === 'xml' && Platform.OS === 'android');

package/Libraries/Image/AssetSourceResolver.windows.js

@@ -77,6 +77,17 @@ function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
 
 /**
  * Returns true if the asset can be loaded over the network.
+ *
+ * This prevents an issue loading XML assets on Android. XML asset types like
+ * vector drawables can only be loaded from precompiled source. Android does
+ * not support loading these over the network, and AAPT precompiles data by
+ * breaking path data and resource information apart into multiple files,
+ * stuffing it all into the resource table. As a result, we should only attempt
+ * to load resources as we would in release builds: by the resource name.
+ *
+ * For more information, see:
+ * https://issuetracker.google.com/issues/62435069
+ * https://issuetracker.google.com/issues/68293189
  */
 function assetSupportsNetworkLoads(asset: PackagerAsset): boolean {
   return !(asset.type === 'xml' && Platform.OS === 'android');

package/Libraries/Image/Image.windows.js

@@ -147,6 +147,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly, // Windows
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
     height,
@@ -160,6 +161,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     disabled: ariaDisabled ?? props.accessibilityState?.disabled,
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
+    readOnly: ariaReadOnly ?? props.accessibilityState?.readOnly, // Windows
     multiselectable:
       ariaMultiselectable ?? props.accessibilityState?.multiselectable, // Windows
     required: ariaRequired ?? props.accessibilityState?.required, // Windows

package/Libraries/Inspector/BorderBox.js

@@ -10,23 +10,35 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
-const React = require('react');
 
-class BorderBox extends React.Component<$FlowFixMeProps> {
-  render(): $FlowFixMe | React.Node {
-    const box = this.props.box;
-    if (!box) {
-      return this.props.children;
-    }
-    const style = {
-      borderTopWidth: box.top,
-      borderBottomWidth: box.bottom,
-      borderLeftWidth: box.left,
-      borderRightWidth: box.right,
-    };
-    return <View style={[style, this.props.style]}>{this.props.children}</View>;
+type Props = $ReadOnly<{
+  children: React.Node,
+  box?: ?$ReadOnly<{
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+    ...
+  }>,
+  style?: ViewStyleProp,
+}>;
+
+function BorderBox({children, box, style}: Props): React.Node {
+  if (!box) {
+    return children;
   }
+  const borderStyle = {
+    borderTopWidth: box.top,
+    borderBottomWidth: box.bottom,
+    borderLeftWidth: box.left,
+    borderRightWidth: box.right,
+  };
+  return <View style={[borderStyle, style]}>{children}</View>;
 }
 
 module.exports = BorderBox;

package/Libraries/Inspector/BoxInspector.js

@@ -10,11 +10,15 @@
 
 'use strict';
 
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
 
 const blank = {
   top: 0,
@@ -23,51 +27,65 @@ const blank = {
   bottom: 0,
 };
 
-class BoxInspector extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const frame = this.props.frame;
-    const style = this.props.style;
-    const margin = (style && resolveBoxStyle('margin', style)) || blank;
-    const padding = (style && resolveBoxStyle('padding', style)) || blank;
-    return (
-      <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
-        <BoxContainer title="padding" box={padding}>
-          <View>
-            <Text style={styles.innerText}>
-              ({(frame.left || 0).toFixed(1)}, {(frame.top || 0).toFixed(1)})
-            </Text>
-            <Text style={styles.innerText}>
-              {(frame.width || 0).toFixed(1)} &times;{' '}
-              {(frame.height || 0).toFixed(1)}
-            </Text>
-          </View>
-        </BoxContainer>
-      </BoxContainer>
-    );
-  }
-}
+type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame: ?InspectedElementFrame,
+}>;
+
+function BoxInspector({style, frame}: BoxInspectorProps): React.Node {
+  const margin = (style && resolveBoxStyle('margin', style)) || blank;
+  const padding = (style && resolveBoxStyle('padding', style)) || blank;
 
-class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const box = this.props.box;
-    return (
-      <View style={styles.box}>
-        <View style={styles.row}>
-          {}
-          <Text style={[this.props.titleStyle, styles.label]}>
-            {this.props.title}
+  return (
+    <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
+      <BoxContainer title="padding" box={padding}>
+        <View>
+          <Text style={styles.innerText}>
+            ({(frame?.left || 0).toFixed(1)}, {(frame?.top || 0).toFixed(1)})
+          </Text>
+          <Text style={styles.innerText}>
+            {(frame?.width || 0).toFixed(1)} &times;{' '}
+            {(frame?.height || 0).toFixed(1)}
           </Text>
-          <Text style={styles.boxText}>{box.top}</Text>
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.boxText}>{box.left}</Text>
-          {this.props.children}
-          <Text style={styles.boxText}>{box.right}</Text>
         </View>
-        <Text style={styles.boxText}>{box.bottom}</Text>
+      </BoxContainer>
+    </BoxContainer>
+  );
+}
+
+type BoxContainerProps = $ReadOnly<{
+  title: string,
+  titleStyle?: TextStyleProp,
+  box: $ReadOnly<{
+    top: number,
+    left: number,
+    right: number,
+    bottom: number,
+  }>,
+  children: React.Node,
+}>;
+
+function BoxContainer({
+  title,
+  titleStyle,
+  box,
+  children,
+}: BoxContainerProps): React.Node {
+  return (
+    <View style={styles.box}>
+      <View style={styles.row}>
+        {}
+        <Text style={[titleStyle, styles.label]}>{title}</Text>
+        <Text style={styles.boxText}>{box.top}</Text>
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.boxText}>{box.left}</Text>
+        {children}
+        <Text style={styles.boxText}>{box.right}</Text>
       </View>
-    );
-  }
+      <Text style={styles.boxText}>{box.bottom}</Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/Inspector/ElementBox.js

@@ -10,65 +10,72 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
-
-class ElementBox extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const style = flattenStyle(this.props.style) || {};
-    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
-    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
-
-    const frameStyle = {...this.props.frame};
-    const contentStyle: {width: number, height: number} = {
-      width: this.props.frame.width,
-      height: this.props.frame.height,
-    };
-
-    if (margin != null) {
-      margin = resolveRelativeSizes(margin);
-
-      frameStyle.top -= margin.top;
-      frameStyle.left -= margin.left;
-      frameStyle.height += margin.top + margin.bottom;
-      frameStyle.width += margin.left + margin.right;
-
-      if (margin.top < 0) {
-        contentStyle.height += margin.top;
-      }
-      if (margin.bottom < 0) {
-        contentStyle.height += margin.bottom;
-      }
-      if (margin.left < 0) {
-        contentStyle.width += margin.left;
-      }
-      if (margin.right < 0) {
-        contentStyle.width += margin.right;
-      }
-    }
 
-    if (padding != null) {
-      padding = resolveRelativeSizes(padding);
+type Props = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ?ViewStyleProp,
+}>;
+
+function ElementBox({frame, style}: Props): React.Node {
+  const flattenedStyle = flattenStyle(style) || {};
+  let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', flattenedStyle);
+  let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', flattenedStyle);
 
-      contentStyle.width -= padding.left + padding.right;
-      contentStyle.height -= padding.top + padding.bottom;
+  const frameStyle = {...frame};
+  const contentStyle: {width: number, height: number} = {
+    width: frame.width,
+    height: frame.height,
+  };
+
+  if (margin != null) {
+    margin = resolveRelativeSizes(margin);
+
+    frameStyle.top -= margin.top;
+    frameStyle.left -= margin.left;
+    frameStyle.height += margin.top + margin.bottom;
+    frameStyle.width += margin.left + margin.right;
+
+    if (margin.top < 0) {
+      contentStyle.height += margin.top;
+    }
+    if (margin.bottom < 0) {
+      contentStyle.height += margin.bottom;
     }
+    if (margin.left < 0) {
+      contentStyle.width += margin.left;
+    }
+    if (margin.right < 0) {
+      contentStyle.width += margin.right;
+    }
+  }
 
-    return (
-      <View style={[styles.frame, frameStyle]} pointerEvents="none">
-        <BorderBox box={margin} style={styles.margin}>
-          <BorderBox box={padding} style={styles.padding}>
-            <View style={[styles.content, contentStyle]} />
-          </BorderBox>
-        </BorderBox>
-      </View>
-    );
+  if (padding != null) {
+    padding = resolveRelativeSizes(padding);
+
+    contentStyle.width -= padding.left + padding.right;
+    contentStyle.height -= padding.top + padding.bottom;
   }
+
+  return (
+    <View style={[styles.frame, frameStyle]} pointerEvents="none">
+      <BorderBox box={margin} style={styles.margin}>
+        <BorderBox box={padding} style={styles.padding}>
+          <View style={[styles.content, contentStyle]} />
+        </BorderBox>
+      </BorderBox>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/Inspector/StyleInspector.js

@@ -10,42 +10,48 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {____FlattenStyleProp_Internal} from '../StyleSheet/StyleSheetTypes';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const React = require('react');
 
-class StyleInspector extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    if (!this.props.style) {
-      return <Text style={styles.noStyle}>No style</Text>;
-    }
-    const names = Object.keys(this.props.style);
-    return (
-      <View style={styles.container}>
-        <View>
-          {names.map(name => (
-            <Text key={name} style={styles.attr}>
-              {name}:
-            </Text>
-          ))}
-        </View>
+type Props = $ReadOnly<{
+  style?: ?____FlattenStyleProp_Internal<ViewStyleProp>,
+}>;
 
-        <View>
-          {names.map(name => {
-            const value = this.props.style[name];
-            return (
-              <Text key={name} style={styles.value}>
-                {typeof value !== 'string' && typeof value !== 'number'
-                  ? JSON.stringify(value)
-                  : value}
-              </Text>
-            );
-          })}
-        </View>
-      </View>
-    );
+function StyleInspector({style}: Props): React.Node {
+  if (!style) {
+    return <Text style={styles.noStyle}>No style</Text>;
   }
+  const names = Object.keys(style);
+  return (
+    <View style={styles.container}>
+      <View>
+        {names.map(name => (
+          <Text key={name} style={styles.attr}>
+            {name}:
+          </Text>
+        ))}
+      </View>
+
+      <View>
+        {names.map(name => {
+          const value = style?.[name];
+          return (
+            <Text key={name} style={styles.value}>
+              {typeof value !== 'string' && typeof value !== 'number'
+                ? JSON.stringify(value)
+                : value}
+            </Text>
+          );
+        })}
+      </View>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -121,7 +121,7 @@ const Presets = {
     'opacity',
   ): LayoutAnimationConfig),
   linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
-  spring: {
+  spring: ({
     duration: 700,
     create: {
       type: 'linear',
@@ -135,7 +135,7 @@ const Presets = {
       type: 'linear',
       property: 'opacity',
     },
-  },
+  }: LayoutAnimationConfig),
 };
 
 /**

package/Libraries/Lists/FlatList.d.ts

@@ -222,7 +222,7 @@ export abstract class FlatListComponent<
   /**
    * Provides a handle to the underlying scroll responder.
    */
-  getScrollResponder: () => JSX.Element | null | undefined;
+  getScrollResponder: () => React.JSX.Element | null | undefined;
 
   /**
    * Provides a reference to the underlying host component

package/Libraries/Modal/Modal.js

@@ -328,6 +328,7 @@ class Modal extends React.Component<Props, State> {
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>
             <View
+              // $FlowFixMe[incompatible-type]
               style={[styles.container, containerStyles]}
               collapsable={false}>
               {innerChildren}
@@ -353,6 +354,7 @@ const styles = StyleSheet.create({
     /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
      * comment suppresses an error found when Flow v0.111 was deployed. To see
      * the error, delete this comment and run Flow. */
+    // $FlowFixMe[incompatible-call]
     [side]: 0,
     top: 0,
     flex: 1,

package/Libraries/Modal/Modal.windows.js

@@ -330,6 +330,7 @@ class Modal extends React.Component<Props, State> {
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>
             <View
+              // $FlowFixMe[incompatible-type]
               style={[styles.container, containerStyles]}
               collapsable={false}>
               {innerChildren}
@@ -355,6 +356,7 @@ const styles = StyleSheet.create({
     /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
      * comment suppresses an error found when Flow v0.111 was deployed. To see
      * the error, delete this comment and run Flow. */
+    // $FlowFixMe[incompatible-call]
     [side]: 0,
     top: 0,
     flex: 1,

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -293,8 +293,6 @@ const validAttributesForNonEventProps = {
 
   style: ReactNativeStyleAttributes,
 
-  experimental_layoutConformance: true,
-
   // ReactClippingViewManager @ReactProps
   removeClippedSubviews: true,
 

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -357,8 +357,6 @@ const validAttributesForNonEventProps = {
   direction: true,
 
   style: ReactNativeStyleAttributes,
-
-  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -381,8 +381,6 @@ const validAttributesForNonEventProps = {
   enableFocusRing: true, // [Windows]
 
   style: ReactNativeStyleAttributes,
-
-  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events