@office-iss/react-native-win32 0.72.7 → 0.73.0-preview.1

package/Libraries/PermissionsAndroid/PermissionsAndroid.js

@@ -65,6 +65,8 @@ const PERMISSIONS = Object.freeze({
   READ_MEDIA_IMAGES: 'android.permission.READ_MEDIA_IMAGES',
   READ_MEDIA_VIDEO: 'android.permission.READ_MEDIA_VIDEO',
   READ_MEDIA_AUDIO: 'android.permission.READ_MEDIA_AUDIO',
+  READ_MEDIA_VISUAL_USER_SELECTED:
+    'android.permission.READ_MEDIA_VISUAL_USER_SELECTED',
   WRITE_EXTERNAL_STORAGE: 'android.permission.WRITE_EXTERNAL_STORAGE',
   BLUETOOTH_CONNECT: 'android.permission.BLUETOOTH_CONNECT',
   BLUETOOTH_SCAN: 'android.permission.BLUETOOTH_SCAN',
@@ -115,6 +117,7 @@ class PermissionsAndroid {
     READ_MEDIA_IMAGES: string,
     READ_MEDIA_VIDEO: string,
     READ_MEDIA_AUDIO: string,
+    READ_MEDIA_VISUAL_USER_SELECTED: string,
     READ_PHONE_NUMBERS: string,
     READ_PHONE_STATE: string,
     READ_SMS: string,
@@ -287,7 +290,6 @@ class PermissionsAndroid {
       NativePermissionsAndroid,
       'PermissionsAndroid is not installed correctly.',
     );
-
     return NativePermissionsAndroid.requestMultiplePermissions(permissions);
   }
 }

package/Libraries/Pressability/Pressability.js

@@ -131,9 +131,17 @@ export type PressabilityConfig = $ReadOnly<{|
    */
   onPressOut?: ?(event: PressEvent) => mixed,
 
+  /**
+   * Whether to prevent any other native components from becoming responder
+   * while this pressable is responder.
+   */
+  blockNativeResponder?: ?boolean,
+
   /**
    * Returns whether a long press gesture should cancel the press gesture.
    * Defaults to true.
+   *
+   * @deprecated
    */
   onLongPressShouldCancelPress_DEPRECATED?: ?() => boolean,
 
@@ -142,6 +150,8 @@ export type PressabilityConfig = $ReadOnly<{|
    *
    * Returns whether to yield to a lock termination request (e.g. if a native
    * scroll gesture attempts to steal the responder lock).
+   *
+   * @deprecated
    */
   onResponderTerminationRequest_DEPRECATED?: ?() => boolean,
 
@@ -163,7 +173,7 @@ export type EventHandlers = $ReadOnly<{|
   onMouseLeave?: (event: MouseEvent) => void,
   onPointerEnter?: (event: PointerEvent) => void,
   onPointerLeave?: (event: PointerEvent) => void,
-  onResponderGrant: (event: PressEvent) => void,
+  onResponderGrant: (event: PressEvent) => void | boolean,
   onResponderMove: (event: PressEvent) => void,
   onResponderRelease: (event: PressEvent) => void,
   onResponderTerminate: (event: PressEvent) => void,
@@ -295,7 +305,7 @@ let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
  *
  * - When a press has activated (e.g. highlight an element)
  * - When a press has deactivated (e.g. un-highlight an element)
- * - When a press sould trigger an action, meaning it activated and deactivated
+ * - When a press should trigger an action, meaning it activated and deactivated
  *   while within the geometry of the element without the lock being stolen.
  *
  * A high quality interaction isn't as simple as you might think. There should
@@ -464,7 +474,7 @@ export default class Pressability {
         return !disabled;
       },
 
-      onResponderGrant: (event: PressEvent): void => {
+      onResponderGrant: (event: PressEvent): void | boolean => {
         event.persist();
 
         this._cancelPressOutDelayTimeout();
@@ -490,6 +500,8 @@ export default class Pressability {
         this._longPressDelayTimeout = setTimeout(() => {
           this._handleLongPress(event);
         }, delayLongPress + delayPressIn);
+
+        return this._config.blockNativeResponder === true;
       },
 
       onResponderMove: (event: PressEvent): void => {
@@ -547,6 +559,19 @@ export default class Pressability {
       },
 
       onClick: (event: PressEvent): void => {
+        // If event has `pointerType`, it was emitted from a PointerEvent and
+        // we should ignore it to avoid triggering `onPress` twice.
+        if (event?.nativeEvent?.hasOwnProperty?.('pointerType')) {
+          return;
+        }
+
+        // for non-pointer click events (e.g. accessibility clicks), we should only dispatch when we're the "real" target
+        // in particular, we shouldn't respond to clicks from nested pressables
+        if (event?.currentTarget !== event?.target) {
+          event?.stopPropagation();
+          return;
+        }
+
         const {onPress, disabled} = this._config;
         if (onPress != null && disabled !== true) {
           onPress(event);

package/Libraries/Pressability/Pressability.win32.js

@@ -52,7 +52,7 @@ export type PressabilityConfig = $ReadOnly<{|
   pressRectOffset?: ?RectOrSize,
 
   /**
-   * Whether to disable the systemm sound when `onPress` fires on Android.
+   * Whether to disable the system sound when `onPress` fires on Android.
    **/
   android_disableSound?: ?boolean,
 
@@ -123,7 +123,7 @@ export type PressabilityConfig = $ReadOnly<{|
   onLongPress?: ?(event: PressEvent) => mixed,
 
   /**
-   * Called when a press gestute has been triggered.
+   * Called when a press gesture has been triggered.
    */
   onPress?: ?(event: PressEvent) => mixed,
 
@@ -142,9 +142,17 @@ export type PressabilityConfig = $ReadOnly<{|
    */
   onPressOut?: ?(event: PressEvent) => mixed,
 
+  /**
+   * Whether to prevent any other native components from becoming responder
+   * while this pressable is responder.
+   */
+  blockNativeResponder?: ?boolean,
+
   /**
    * Returns whether a long press gesture should cancel the press gesture.
    * Defaults to true.
+   *
+   * @deprecated
    */
   onLongPressShouldCancelPress_DEPRECATED?: ?() => boolean,
 
@@ -153,6 +161,8 @@ export type PressabilityConfig = $ReadOnly<{|
    *
    * Returns whether to yield to a lock termination request (e.g. if a native
    * scroll gesture attempts to steal the responder lock).
+   *
+   * @deprecated
    */
   onResponderTerminationRequest_DEPRECATED?: ?() => boolean,
 
@@ -190,7 +200,7 @@ export type EventHandlers = $ReadOnly<{|
   onMouseLeave?: (event: MouseEvent) => void,
   onPointerEnter?: (event: PointerEvent) => void,
   onPointerLeave?: (event: PointerEvent) => void,
-  onResponderGrant: (event: PressEvent) => void,
+  onResponderGrant: (event: PressEvent) => void | boolean,
   onResponderMove: (event: PressEvent) => void,
   onResponderRelease: (event: PressEvent) => void,
   onResponderTerminate: (event: PressEvent) => void,
@@ -326,7 +336,7 @@ let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
  *
  * - When a press has activated (e.g. highlight an element)
  * - When a press has deactivated (e.g. un-highlight an element)
- * - When a press sould trigger an action, meaning it activated and deactivated
+ * - When a press should trigger an action, meaning it activated and deactivated
  *   while within the geometry of the element without the lock being stolen.
  *
  * A high quality interaction isn't as simple as you might think. There should
@@ -497,7 +507,7 @@ export default class Pressability {
         return !disabled;
       },
 
-      onResponderGrant: (event: PressEvent): void => {
+      onResponderGrant: (event: PressEvent): void | boolean => {
         event.persist();
 
         this._cancelPressOutDelayTimeout();
@@ -523,6 +533,8 @@ export default class Pressability {
         this._longPressDelayTimeout = setTimeout(() => {
           this._handleLongPress(event);
         }, delayLongPress + delayPressIn);
+
+        return this._config.blockNativeResponder === true;
       },
 
       onResponderMove: (event: PressEvent): void => {
@@ -580,6 +592,19 @@ export default class Pressability {
       },
 
       onClick: (event: PressEvent): void => {
+        // If event has `pointerType`, it was emitted from a PointerEvent and
+        // we should ignore it to avoid triggering `onPress` twice.
+        if (event?.nativeEvent?.hasOwnProperty?.('pointerType')) {
+          return;
+        }
+
+        // for non-pointer click events (e.g. accessibility clicks), we should only dispatch when we're the "real" target
+        // in particular, we shouldn't respond to clicks from nested pressables
+        if (event?.currentTarget !== event?.target) {
+          event?.stopPropagation();
+          return;
+        }
+
         const {onPress, disabled} = this._config;
         if (onPress != null && disabled !== true) {
           onPress(event);

package/Libraries/ReactNative/AppContainer.js

@@ -36,7 +36,6 @@ type State = {|
   devtoolsOverlay: ?React.Node,
   traceUpdateOverlay: ?React.Node,
   mainKey: number,
-  hasError: boolean,
 |};
 
 class AppContainer extends React.Component<Props, State> {
@@ -45,7 +44,6 @@ class AppContainer extends React.Component<Props, State> {
     devtoolsOverlay: null,
     traceUpdateOverlay: null,
     mainKey: 1,
-    hasError: false,
   };
   _mainRef: ?React.ElementRef<typeof View>;
   _subscription: ?EventSubscription = null;
@@ -151,10 +149,11 @@ class AppContainer extends React.Component<Props, State> {
         </Wrapper>
       );
     }
+
     return (
       <RootTagContext.Provider value={createRootTag(this.props.rootTag)}>
         <View style={styles.appContainer} pointerEvents="box-none">
-          {!this.state.hasError && innerView}
+          {innerView}
           {this.state.traceUpdateOverlay}
           {this.state.devtoolsOverlay}
           {this.state.inspector}

package/Libraries/ReactNative/AppRegistry.d.ts

@@ -85,11 +85,6 @@ export namespace AppRegistry {
     displayMode?: number,
   ): void;
 
-  export function registerHeadlessTask(
-    appKey: string,
-    task: TaskProvider,
-  ): void;
-
   export function getRunnable(appKey: string): Runnable | undefined;
 
   export function getRegistry(): {sections: string[]; runnables: Runnable[]};

package/Libraries/ReactNative/AppRegistry.js

@@ -10,6 +10,7 @@
 
 import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+import type {DisplayModeType} from './DisplayMode';
 
 import BatchedBridge from '../BatchedBridge/BatchedBridge';
 import BugReporting from '../BugReporting/BugReporting';
@@ -30,29 +31,34 @@ type TaskCancelProvider = () => TaskCanceller;
 
 export type ComponentProvider = () => React$ComponentType<any>;
 export type ComponentProviderInstrumentationHook = (
-  component: ComponentProvider,
+  component_: ComponentProvider,
   scopedPerformanceLogger: IPerformanceLogger,
 ) => React$ComponentType<any>;
 export type AppConfig = {
   appKey: string,
   component?: ComponentProvider,
-  run?: Function,
+  run?: Runnable,
   section?: boolean,
   ...
 };
-export type Runnable = {
-  component?: ComponentProvider,
-  run: Function,
-  ...
+type AppParameters = {
+  initialProps: $ReadOnly<{[string]: mixed, ...}>,
+  rootTag: RootTag,
+  fabric?: boolean,
+  concurrentRoot?: boolean,
 };
-export type Runnables = {[appKey: string]: Runnable, ...};
+export type Runnable = (
+  appParameters: AppParameters,
+  displayMode: DisplayModeType,
+) => void;
+export type Runnables = {[appKey: string]: Runnable};
 export type Registry = {
-  sections: Array<string>,
+  sections: $ReadOnlyArray<string>,
   runnables: Runnables,
   ...
 };
 export type WrapperComponentProvider = (
-  appParameters: any,
+  appParameters: Object,
 ) => React$ComponentType<any>;
 
 const runnables: Runnables = {};
@@ -110,30 +116,28 @@ const AppRegistry = {
     componentProvider: ComponentProvider,
     section?: boolean,
   ): string {
-    let scopedPerformanceLogger = createPerformanceLogger();
-    runnables[appKey] = {
-      componentProvider,
-      run: (appParameters, displayMode) => {
-        const concurrentRootEnabled =
-          appParameters.initialProps?.concurrentRoot ||
-          appParameters.concurrentRoot;
-        renderApplication(
-          componentProviderInstrumentationHook(
-            componentProvider,
-            scopedPerformanceLogger,
-          ),
-          appParameters.initialProps,
-          appParameters.rootTag,
-          wrapperComponentProvider && wrapperComponentProvider(appParameters),
-          appParameters.fabric,
-          showArchitectureIndicator,
+    const scopedPerformanceLogger = createPerformanceLogger();
+    runnables[appKey] = (appParameters, displayMode) => {
+      const concurrentRootEnabled = Boolean(
+        appParameters.initialProps?.concurrentRoot ||
+          appParameters.concurrentRoot,
+      );
+      renderApplication(
+        componentProviderInstrumentationHook(
+          componentProvider,
           scopedPerformanceLogger,
-          appKey === 'LogBox',
-          appKey,
-          coerceDisplayMode(displayMode),
-          concurrentRootEnabled,
-        );
-      },
+        ),
+        appParameters.initialProps,
+        appParameters.rootTag,
+        wrapperComponentProvider && wrapperComponentProvider(appParameters),
+        appParameters.fabric,
+        showArchitectureIndicator,
+        scopedPerformanceLogger,
+        appKey === 'LogBox', // is logbox
+        appKey,
+        displayMode,
+        concurrentRootEnabled,
+      );
     };
     if (section) {
       sections[appKey] = runnables[appKey];
@@ -141,8 +145,8 @@ const AppRegistry = {
     return appKey;
   },
 
-  registerRunnable(appKey: string, run: Function): string {
-    runnables[appKey] = {run};
+  registerRunnable(appKey: string, run: Runnable): string {
+    runnables[appKey] = run;
     return appKey;
   },
 
@@ -150,11 +154,11 @@ const AppRegistry = {
     AppRegistry.registerComponent(appKey, component, true);
   },
 
-  getAppKeys(): Array<string> {
+  getAppKeys(): $ReadOnlyArray<string> {
     return Object.keys(runnables);
   },
 
-  getSectionKeys(): Array<string> {
+  getSectionKeys(): $ReadOnlyArray<string> {
     return Object.keys(sections);
   },
 
@@ -188,7 +192,7 @@ const AppRegistry = {
    */
   runApplication(
     appKey: string,
-    appParameters: any,
+    appParameters: AppParameters,
     displayMode?: number,
   ): void {
     if (appKey !== 'LogBox') {
@@ -203,7 +207,7 @@ const AppRegistry = {
       );
     }
     invariant(
-      runnables[appKey] && runnables[appKey].run,
+      runnables[appKey],
       `"${appKey}" has not been registered. This can happen if:\n` +
         '* Metro (the local dev server) is run from the wrong folder. ' +
         'Check if Metro is running, stop it and restart it in the current project.\n' +
@@ -211,7 +215,7 @@ const AppRegistry = {
     );
 
     SceneTracker.setActiveScene({name: appKey});
-    runnables[appKey].run(appParameters, displayMode);
+    runnables[appKey](appParameters, coerceDisplayMode(displayMode));
   },
 
   /**
@@ -219,7 +223,7 @@ const AppRegistry = {
    */
   setSurfaceProps(
     appKey: string,
-    appParameters: any,
+    appParameters: Object,
     displayMode?: number,
   ): void {
     if (appKey !== 'LogBox') {
@@ -235,14 +239,14 @@ const AppRegistry = {
       );
     }
     invariant(
-      runnables[appKey] && runnables[appKey].run,
+      runnables[appKey],
       `"${appKey}" has not been registered. This can happen if:\n` +
         '* Metro (the local dev server) is run from the wrong folder. ' +
         'Check if Metro is running, stop it and restart it in the current project.\n' +
         "* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.",
     );
 
-    runnables[appKey].run(appParameters, displayMode);
+    runnables[appKey](appParameters, coerceDisplayMode(displayMode));
   },
 
   /**
@@ -338,18 +342,27 @@ const AppRegistry = {
   },
 };
 
-if (!(global.RN$Bridgeless === true)) {
-  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
+// Register LogBox as a default surface
+AppRegistry.registerComponent('LogBox', () => {
+  if (__DEV__ && typeof jest === 'undefined') {
+    return require('../LogBox/LogBoxInspectorContainer').default;
+  } else {
+    return function NoOp() {
+      return null;
+    };
+  }
+});
 
-  AppRegistry.registerComponent('LogBox', () => {
-    if (__DEV__) {
-      return require('../LogBox/LogBoxInspectorContainer').default;
-    } else {
-      return function NoOp() {
-        return null;
-      };
-    }
-  });
+global.RN$AppRegistry = AppRegistry;
+
+// Backwards compat with SurfaceRegistry, remove me later
+global.RN$SurfaceRegistry = {
+  renderSurface: AppRegistry.runApplication,
+  setSurfaceProps: AppRegistry.setSurfaceProps,
+};
+
+if (global.RN$Bridgeless !== true) {
+  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 }
 
 module.exports = AppRegistry;

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -14,26 +14,47 @@ import type {RootTag} from '../Types/RootTagTypes';
 
 import {unstable_hasComponent} from '../NativeComponent/NativeComponentRegistryUnstable';
 
+let cachedConstants = null;
+
 const errorMessageForMethod = (methodName: string): string =>
   "[ReactNative Architecture][JS] '" +
   methodName +
   "' is not available in the new React Native architecture.";
 
-module.exports = {
+function nativeViewConfigsInBridgelessModeEnabled(): boolean {
+  return global.RN$LegacyInterop_UIManager_getConstants !== undefined;
+}
+
+function getCachedConstants(): Object {
+  if (!cachedConstants) {
+    cachedConstants = global.RN$LegacyInterop_UIManager_getConstants();
+  }
+  return cachedConstants;
+}
+
+const UIManagerJS: {[string]: $FlowFixMe} = {
   getViewManagerConfig: (viewManagerName: string): mixed => {
-    console.error(
-      errorMessageForMethod('getViewManagerConfig') +
-        'Use hasViewManagerConfig instead. viewManagerName: ' +
-        viewManagerName,
-    );
-    return null;
+    if (nativeViewConfigsInBridgelessModeEnabled()) {
+      return getCachedConstants()[viewManagerName];
+    } else {
+      console.error(
+        errorMessageForMethod('getViewManagerConfig') +
+          'Use hasViewManagerConfig instead. viewManagerName: ' +
+          viewManagerName,
+      );
+      return null;
+    }
   },
   hasViewManagerConfig: (viewManagerName: string): boolean => {
     return unstable_hasComponent(viewManagerName);
   },
   getConstants: (): Object => {
-    console.error(errorMessageForMethod('getConstants'));
-    return {};
+    if (nativeViewConfigsInBridgelessModeEnabled()) {
+      return getCachedConstants();
+    } else {
+      console.error(errorMessageForMethod('getConstants'));
+      return null;
+    }
   },
   getConstantsForViewManager: (viewManagerName: string): Object => {
     console.error(errorMessageForMethod('getConstantsForViewManager'));
@@ -160,3 +181,11 @@ module.exports = {
   dismissPopupMenu: (): void =>
     console.error(errorMessageForMethod('dismissPopupMenu')),
 };
+
+if (nativeViewConfigsInBridgelessModeEnabled()) {
+  Object.keys(getCachedConstants()).forEach(viewConfigName => {
+    UIManagerJS[viewConfigName] = getCachedConstants()[viewConfigName];
+  });
+}
+
+module.exports = UIManagerJS;