react-native-windows 0.71.10 → 0.72.0-preview.2

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -11,6 +11,8 @@
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {Message} from '../Data/parseLogBoxLog';
 
+import Linking from '../../Linking/Linking';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
@@ -22,6 +24,82 @@ type Props = {
   ...
 };
 
+type Range = {
+  lowerBound: number,
+  upperBound: number,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  let fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          // $FlowFixMe[unused-promise]
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
 const cleanContent = (content: string) =>
   content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
 
@@ -49,9 +127,7 @@ function LogBoxMessage(props: Props): React.Node {
 
     if (length < maxLength) {
       elements.push(
-        <Text key={key} style={style}>
-          {cleanMessage}
-        </Text>,
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
       );
     }
 
@@ -70,12 +146,12 @@ function LogBoxMessage(props: Props): React.Node {
       createUnderLength(key, prevPart);
     }
 
-    const substititionPart = content.substr(
+    const substitutionPart = content.substr(
       substitution.offset,
       substitution.length,
     );
 
-    createUnderLength(key + '.5', substititionPart, substitutionStyle);
+    createUnderLength(key + '.5', substitutionPart, substitutionStyle);
     return substitution.offset + substitution.length;
   }, 0);
 
@@ -87,4 +163,10 @@ function LogBoxMessage(props: Props): React.Node {
   return <>{elements}</>;
 }
 
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
 export default LogBoxMessage;

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -21,13 +21,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   totalLogCount: number,
   level: 'warn' | 'error',
   onPressOpen: () => void,
   onPressDismiss: () => void,
-|}>;
+}>;
 
 function LogBoxLogNotification(props: Props): React.Node {
   const {totalLogCount, level, log} = props;
@@ -56,9 +56,7 @@ function LogBoxLogNotification(props: Props): React.Node {
   );
 }
 
-function CountBadge(
-  props: $TEMPORARY$object<{count: number, level: 'error' | 'warn'}>,
-) {
+function CountBadge(props: {count: number, level: 'error' | 'warn'}) {
   return (
     <View style={countStyles.outside}>
       {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
@@ -73,7 +71,7 @@ function CountBadge(
   );
 }
 
-function Message(props: $TEMPORARY$object<{message: MessageType}>) {
+function Message(props: {message: MessageType}) {
   return (
     <View style={messageStyles.container}>
       <Text numberOfLines={1} style={messageStyles.text}>
@@ -89,7 +87,7 @@ function Message(props: $TEMPORARY$object<{message: MessageType}>) {
   );
 }
 
-function DismissButton(props: $TEMPORARY$object<{onPress: () => void}>) {
+function DismissButton(props: {onPress: () => void}) {
   return (
     <View style={dismissStyles.container}>
       <LogBoxButton

package/Libraries/Modal/Modal.js

@@ -13,11 +13,11 @@ import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import {VirtualizedListContextResetter} from '../Lists/VirtualizedListContext.js';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
+import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
@@ -91,7 +91,7 @@ export type Props = $ReadOnly<{|
    * The `statusBarTranslucent` prop determines whether your modal should go under
    * the system statusbar.
    *
-   * See https://reactnative.dev/docs/modal#transparent
+   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
    */
   statusBarTranslucent?: ?boolean,
 

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -160,11 +160,11 @@ const directEventTypes = {
 
 const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   opacity: true,
   elevation: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   zIndex: true,
   renderToHardwareTextureAndroid: true,
   testID: true,
@@ -212,24 +212,36 @@ const validAttributesForNonEventProps = {
   display: true,
 
   margin: true,
-  marginVertical: true,
-  marginHorizontal: true,
-  marginStart: true,
-  marginEnd: true,
-  marginTop: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
 
   padding: true,
-  paddingVertical: true,
-  paddingHorizontal: true,
-  paddingStart: true,
-  paddingEnd: true,
-  paddingTop: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
 
   borderWidth: true,
   borderStartWidth: true,
@@ -246,6 +258,14 @@ const validAttributesForNonEventProps = {
   top: true,
   bottom: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   position: true,
 
   style: ReactNativeStyleAttributes,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -176,10 +176,10 @@ const validAttributesForNonEventProps = {
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
   testID: true,
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
   opacity: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
   shadowOpacity: true,
   shadowRadius: true,
@@ -193,7 +193,7 @@ const validAttributesForNonEventProps = {
   pointerEvents: true,
   removeClippedSubviews: true,
   borderRadius: true,
-  borderColor: {process: require('../StyleSheet/processColor')},
+  borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
   borderStyle: true,
@@ -201,17 +201,17 @@ const validAttributesForNonEventProps = {
   collapsable: true,
 
   borderTopWidth: true,
-  borderTopColor: {process: require('../StyleSheet/processColor')},
+  borderTopColor: {process: require('../StyleSheet/processColor').default},
   borderRightWidth: true,
-  borderRightColor: {process: require('../StyleSheet/processColor')},
+  borderRightColor: {process: require('../StyleSheet/processColor').default},
   borderBottomWidth: true,
-  borderBottomColor: {process: require('../StyleSheet/processColor')},
+  borderBottomColor: {process: require('../StyleSheet/processColor').default},
   borderLeftWidth: true,
-  borderLeftColor: {process: require('../StyleSheet/processColor')},
+  borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderStartColor: {process: require('../StyleSheet/processColor')},
+  borderStartColor: {process: require('../StyleSheet/processColor').default},
   borderEndWidth: true,
-  borderEndColor: {process: require('../StyleSheet/processColor')},
+  borderEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -221,6 +221,10 @@ const validAttributesForNonEventProps = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   display: true,
   zIndex: true,
 
@@ -232,6 +236,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -249,25 +261,37 @@ const validAttributesForNonEventProps = {
   // borderEndWidth: true,
   // borderWidth: true,
 
-  marginTop: true,
-  marginRight: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
+  marginRight: true,
   marginStart: true,
-  marginEnd: true,
+  marginTop: true,
   marginVertical: true,
-  marginHorizontal: true,
-  margin: true,
 
-  paddingTop: true,
-  paddingRight: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
+  paddingRight: true,
   paddingStart: true,
-  paddingEnd: true,
+  paddingTop: true,
   paddingVertical: true,
-  paddingHorizontal: true,
-  padding: true,
 
   flex: true,
   flexGrow: true,

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -135,6 +135,21 @@ const bubblingEventTypes = {
       bubbled: 'onPointerOut',
     },
   },
+
+  topKeyDown: {
+    // [Windows]
+    phasedRegistrationNames: {
+      captured: 'onKeyDownCapture',
+      bubbled: 'onKeyDown',
+    },
+  },
+  topKeyUp: {
+    // [Windows]
+    phasedRegistrationNames: {
+      captured: 'onKeyUpCapture',
+      bubbled: 'onKeyUp',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -167,6 +182,9 @@ const directEventTypes = {
   topMouseLeave: {
     registrationName: 'onMouseLeave',
   },
+  topClick: {
+    registrationName: 'onClick',
+  },
   // Windows]
 };
 
@@ -182,10 +200,10 @@ const validAttributesForNonEventProps = {
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
   testID: true,
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
   opacity: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
   shadowOpacity: true,
   shadowRadius: true,
@@ -199,7 +217,7 @@ const validAttributesForNonEventProps = {
   pointerEvents: true,
   removeClippedSubviews: true,
   borderRadius: true,
-  borderColor: {process: require('../StyleSheet/processColor')},
+  borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
   borderStyle: true,
@@ -207,17 +225,17 @@ const validAttributesForNonEventProps = {
   collapsable: true,
 
   borderTopWidth: true,
-  borderTopColor: {process: require('../StyleSheet/processColor')},
+  borderTopColor: {process: require('../StyleSheet/processColor').default},
   borderRightWidth: true,
-  borderRightColor: {process: require('../StyleSheet/processColor')},
+  borderRightColor: {process: require('../StyleSheet/processColor').default},
   borderBottomWidth: true,
-  borderBottomColor: {process: require('../StyleSheet/processColor')},
+  borderBottomColor: {process: require('../StyleSheet/processColor').default},
   borderLeftWidth: true,
-  borderLeftColor: {process: require('../StyleSheet/processColor')},
+  borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderStartColor: {process: require('../StyleSheet/processColor')},
+  borderStartColor: {process: require('../StyleSheet/processColor').default},
   borderEndWidth: true,
-  borderEndColor: {process: require('../StyleSheet/processColor')},
+  borderEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -227,6 +245,10 @@ const validAttributesForNonEventProps = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   display: true,
   zIndex: true,
 
@@ -238,6 +260,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -255,25 +285,37 @@ const validAttributesForNonEventProps = {
   // borderEndWidth: true,
   // borderWidth: true,
 
-  marginTop: true,
-  marginRight: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
+  marginRight: true,
   marginStart: true,
-  marginEnd: true,
+  marginTop: true,
   marginVertical: true,
-  marginHorizontal: true,
-  margin: true,
 
-  paddingTop: true,
-  paddingRight: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
+  paddingRight: true,
   paddingStart: true,
-  paddingEnd: true,
+  paddingTop: true,
   paddingVertical: true,
-  paddingHorizontal: true,
-  padding: true,
 
   flex: true,
   flexGrow: true,
@@ -297,6 +339,18 @@ const validAttributesForNonEventProps = {
 
   direction: true,
 
+  accessibilityLiveRegion: true, // [Windows]
+  accessibilityPosInSet: true, // [Windows]
+  accessibilitySetSize: true, // [Windows]
+  disabled: true, // [Windows]
+  focusable: true, // [Windows]
+  keyDownEvents: true, // [Windows]
+  keyUpEvents: true, // [Windows]
+  tabIndex: true, // [Windows]
+  tooltip: true, // [Windows]
+  onClick: true, // [Windows]
+  enableFocusRing: true, // [Windows]
+
   style: ReactNativeStyleAttributes,
 };
 
@@ -347,6 +401,10 @@ const validAttributesForEventProps = {
   // Mouse enter/leave events
   onMouseEnter: true,
   onMouseLeave: true,
+
+  onKeyDown: true,
+  onKeyUp: true,
+  onPointerCancelCapture: true,
   // Windows]
   // [Windows
 };

package/Libraries/NativeComponent/NativeComponentRegistryUnstable.js

@@ -3,6 +3,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
  */
 
 let componentNameToExists: Map<string, boolean> = new Map();
@@ -11,7 +14,7 @@ let componentNameToExists: Map<string, boolean> = new Map();
  * Unstable API. Do not use!
  *
  * This method returns if the component with name received as a parameter
- * is registed in the native platform.
+ * is registered in the native platform.
  */
 export function unstable_hasComponent(name: string): boolean {
   let hasNativeComponent = componentNameToExists.get(name);

package/Libraries/NativeComponent/ViewConfig.js

@@ -32,6 +32,7 @@ export function createViewConfig(
       PlatformBaseViewConfig.directEventTypes,
       partialViewConfig.directEventTypes,
     ),
+    // $FlowFixMe[incompatible-return]
     validAttributes: composeIndexers(
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
       PlatformBaseViewConfig.validAttributes,

package/Libraries/NativeComponent/ViewConfigIgnore.js

@@ -37,10 +37,7 @@ export function DynamicallyInjectedByGestureHandler<T: {...}>(object: T): T {
 export function ConditionallyIgnoredEventHandlers<T: {[name: string]: true}>(
   value: T,
 ): T | void {
-  if (
-    Platform.OS === 'ios' &&
-    !(global.RN$ViewConfigEventValidAttributesDisabled === true)
-  ) {
+  if (Platform.OS === 'ios') {
     return value;
   }
   return undefined;

package/Libraries/Network/RCTNetworking.android.js

@@ -22,7 +22,7 @@ type Header = [string, string];
 // Convert FormData headers to arrays, which are easier to consume in
 // native on Android.
 function convertHeadersMapToArray(headers: Object): Array<Header> {
-  const headerArray = [];
+  const headerArray: Array<Header> = [];
   for (const name in headers) {
     headerArray.push([name, headers[name]]);
   }
@@ -91,4 +91,4 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
   }
 }
 
-module.exports = (new RCTNetworking(): RCTNetworking);
+export default (new RCTNetworking(): RCTNetworking);

package/Libraries/Network/RCTNetworking.ios.js

@@ -109,4 +109,4 @@ const RCTNetworking = {
   },
 };
 
-module.exports = RCTNetworking;
+export default RCTNetworking;

package/Libraries/Network/RCTNetworking.windows.js

@@ -115,4 +115,4 @@ const RCTNetworking = {
   },
 };
 
-module.exports = RCTNetworking;
+export default RCTNetworking;

package/Libraries/Network/XMLHttpRequest.js

@@ -16,7 +16,7 @@ import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 
 const BlobManager = require('../Blob/BlobManager');
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
-const RCTNetworking = require('./RCTNetworking');
+const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
 const EventTarget = require('event-target-shim');
 const invariant = require('invariant');