@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

package/Libraries/Components/Touchable/Touchable.win32.js

@@ -10,7 +10,7 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import UIManager from '../../ReactNative/UIManager';
@@ -21,9 +21,9 @@ import Position from './Position';
 import * as React from 'react';
 
 const extractSingleTouch = (nativeEvent: {
+  +changedTouches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
   +altKey: ?boolean,
   +button: ?number,
-  +changedTouches: $ReadOnlyArray<PressEvent['nativeEvent']>,
   +ctrlKey: ?boolean,
   +force?: number,
   +identifier: number,
@@ -35,7 +35,7 @@ const extractSingleTouch = (nativeEvent: {
   +shiftKey: ?boolean,
   +target: ?number,
   +timestamp: number,
-  +touches: $ReadOnlyArray<PressEvent['nativeEvent']>,
+  +touches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
 }) => {
   const touches = nativeEvent.touches;
   const changedTouches = nativeEvent.changedTouches;
@@ -375,7 +375,7 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10;
  *
  * @lends Touchable.prototype
  */
-const TouchableMixin = {
+const TouchableMixinImpl = {
   componentDidMount: function () {
     if (!Platform.isTV) {
       return;
@@ -403,7 +403,7 @@ const TouchableMixin = {
   touchableGetInitialState: function (): {
     touchable: {
       touchState: ?State,
-      responderID: ?PressEvent['currentTarget'],
+      responderID: ?GestureResponderEvent['currentTarget'],
     },
   } {
     return {
@@ -439,12 +439,12 @@ const TouchableMixin = {
 
   /**
    * Place as callback for a DOM element's `onResponderGrant` event.
-   * @param {SyntheticEvent} e Synthetic event from event system.
+   * @param {NativeSyntheticEvent} e Synthetic event from event system.
    *
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleResponderGrant: function (e: PressEvent) {
+  touchableHandleResponderGrant: function (e: GestureResponderEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
@@ -487,7 +487,7 @@ const TouchableMixin = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleResponderRelease: function (e: PressEvent) {
+  touchableHandleResponderRelease: function (e: GestureResponderEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
   },
@@ -497,7 +497,7 @@ const TouchableMixin = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleResponderTerminate: function (e: PressEvent) {
+  touchableHandleResponderTerminate: function (e: GestureResponderEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
   },
@@ -507,7 +507,7 @@ const TouchableMixin = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleResponderMove: function (e: PressEvent) {
+  touchableHandleResponderMove: function (e: GestureResponderEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
       return;
@@ -737,14 +737,14 @@ const TouchableMixin = {
 
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _handleDelay: function (e: PressEvent) {
+  _handleDelay: function (e: GestureResponderEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _handleLongDelay: function (e: PressEvent) {
+  _handleLongDelay: function (e: GestureResponderEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
     if (
@@ -765,7 +765,7 @@ const TouchableMixin = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _receiveSignal: function (signal: Signal, e: PressEvent) {
+  _receiveSignal: function (signal: Signal, e: GestureResponderEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
     const nextState = Transitions[curState] && Transitions[curState][signal];
@@ -820,7 +820,7 @@ const TouchableMixin = {
 
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _savePressInLocation: function (e: PressEvent) {
+  _savePressInLocation: function (e: GestureResponderEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
     const pageY = touch && touch.pageY;
@@ -857,7 +857,7 @@ const TouchableMixin = {
     curState: State,
     nextState: State,
     signal: Signal,
-    e: PressEvent,
+    e: GestureResponderEvent,
   ) {
     const curIsHighlight = this._isHighlight(curState);
     const newIsHighlight = this._isHighlight(nextState);
@@ -916,14 +916,14 @@ const TouchableMixin = {
 
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _startHighlight: function (e: PressEvent) {
+  _startHighlight: function (e: GestureResponderEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  _endHighlight: function (e: PressEvent) {
+  _endHighlight: function (e: GestureResponderEvent) {
     if (this.touchableHandleActivePressOut) {
       if (
         this.touchableGetPressOutDelayMS &&
@@ -951,12 +951,12 @@ const {
   touchableHandleFocus,
   touchableHandleBlur,
   ...TouchableMixinWithoutDefaultFocusAndBlur
-} = TouchableMixin;
-TouchableMixin.withoutDefaultFocusAndBlur =
+} = TouchableMixinImpl;
+TouchableMixinImpl.withoutDefaultFocusAndBlur =
   TouchableMixinWithoutDefaultFocusAndBlur;
 
-const Touchable = {
-  Mixin: TouchableMixin,
+const TouchableImpl = {
+  Mixin: TouchableMixinImpl,
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
    */
@@ -965,7 +965,7 @@ const Touchable = {
     hitSlop,
   }: {
     color: ColorValue,
-    hitSlop: EdgeInsetsProp,
+    hitSlop?: EdgeInsetsProp,
     ...
   }): null | React.Node => {
     if (__DEV__) {
@@ -975,4 +975,4 @@ const Touchable = {
   },
 };
 
-export default Touchable;
+export default TouchableImpl;

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 Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...React.ElementConfig<TouchableWithoutFeedback>,
 
   onPressAnimationComplete?: ?() => void,
@@ -29,12 +29,12 @@ type Props = $ReadOnly<{|
   style?: ?ViewStyleProp,
 
   hostRef: React.RefSetter<React.ElementRef<typeof Animated.View>>,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
   scale: Animated.Value,
-|}>;
+}>;
 
 class TouchableBounce extends React.Component<Props, State> {
   state: State = {
@@ -214,9 +214,9 @@ class TouchableBounce extends React.Component<Props, State> {
   }
 }
 
-module.exports = (React.forwardRef((props, hostRef) => (
+export default (React.forwardRef((props, hostRef: React.RefSetter<mixed>) => (
   <TouchableBounce {...props} hostRef={hostRef} />
 )): component(
   ref: React.RefSetter<mixed>,
-  ...props: $ReadOnly<$Diff<Props, {|hostRef: mixed|}>>
+  ...props: $ReadOnly<$Diff<Props, {hostRef: mixed}>>
 ));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
 import Pressability, {
@@ -20,42 +20,60 @@ import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
   nextFocusRight?: ?number,
   nextFocusUp?: ?number,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
-|}>;
-
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-  ...AndroidProps,
-  ...IOSProps,
+}>;
 
+type TouchableHighlightBaseProps = $ReadOnly<{
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   */
   activeOpacity?: ?number,
+  /**
+   * The color of the underlay that will show through when the touch is active.
+   */
   underlayColor?: ?ColorValue,
+  /**
+   * @see https://reactnative.dev/docs/view#style
+   */
   style?: ?ViewStyleProp,
+  /**
+   * Called immediately after the underlay is shown
+   */
   onShowUnderlay?: ?() => void,
+  /**
+   * Called immediately after the underlay is hidden
+   */
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
   hostRef: React.RefSetter<React.ElementRef<typeof View>>,
-|}>;
+}>;
+
+type TouchableHighlightProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...AndroidProps,
+  ...IOSProps,
+  ...TouchableHighlightBaseProps,
+}>;
 
-type ExtraStyles = $ReadOnly<{|
+type ExtraStyles = $ReadOnly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -153,7 +171,10 @@ type State = $ReadOnly<{|
  * ```
  *
  */
-class TouchableHighlight extends React.Component<Props, State> {
+class TouchableHighlightImpl extends React.Component<
+  TouchableHighlightProps,
+  State,
+> {
   _hideTimeout: ?TimeoutID;
   _isMounted: boolean = false;
 
@@ -368,7 +389,7 @@ class TouchableHighlight extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableHighlightProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -381,13 +402,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>
+const TouchableHighlight: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<TouchableHighlightProps, {+hostRef: mixed}>>
 ) = React.forwardRef((props, hostRef) => (
-  <TouchableHighlight {...props} hostRef={hostRef} />
+  <TouchableHighlightImpl {...props} hostRef={hostRef} />
 ));
 
-Touchable.displayName = 'TouchableHighlight';
+TouchableHighlight.displayName = 'TouchableHighlight';
 
-module.exports = Touchable;
+export default TouchableHighlight;

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import type {PressEvent} from '../../Types/CoreEventTypes';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
 import Pressability, {
@@ -23,61 +23,82 @@ import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-
+type TVProps = {
   /**
-   * Determines the type of background drawable that's going to be used to
-   * display feedback. It takes an object with `type` property and extra data
-   * depending on the `type`. It's recommended to use one of the static
-   * methods to generate that dictionary.
-   */
-  background?: ?(
-    | $ReadOnly<{|
-        type: 'ThemeAttrAndroid',
-        attribute:
-          | 'selectableItemBackground'
-          | 'selectableItemBackgroundBorderless',
-        rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
-        type: 'RippleAndroid',
-        color: ?number,
-        borderless: boolean,
-        rippleRadius: ?number,
-      |}>
-  ),
-
-  /**
-   * TV preferred focus (see documentation for the View component).
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
    */
   hasTVPreferredFocus?: ?boolean,
 
   /**
-   * TV next focus down (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusDown?: ?number,
 
   /**
-   * TV next focus forward (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusForward?: ?number,
 
   /**
-   * TV next focus left (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusLeft?: ?number,
 
   /**
-   * TV next focus right (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusRight?: ?number,
 
   /**
-   * TV next focus up (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusUp?: ?number,
+};
 
+export type TouchableNativeFeedbackProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  /**
+   * Determines the type of background drawable that's going to be used to display feedback.
+   * It takes an object with type property and extra data depending on the type.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: ?(
+    | $ReadOnly<{
+        type: 'ThemeAttrAndroid',
+        attribute:
+          | 'selectableItemBackground'
+          | 'selectableItemBackgroundBorderless',
+        rippleRadius: ?number,
+      }>
+    | $ReadOnly<{
+        type: 'RippleAndroid',
+        color: ?number,
+        borderless: boolean,
+        rippleRadius: ?number,
+      }>
+  ),
   /**
    * Set to true to add the ripple effect to the foreground of the view, instead
    * of the background. This is useful if one of your child views has a
@@ -89,56 +110,80 @@ type Props = $ReadOnly<{|
    * versions, this will fallback to background.
    */
   useForeground?: ?boolean,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
-|}>;
+}>;
 
-class TouchableNativeFeedback extends React.Component<Props, State> {
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+class TouchableNativeFeedback extends React.Component<
+  TouchableNativeFeedbackProps,
+  State,
+> {
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for selectable elements.
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackground',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackground',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for borderless selectable elements. Requires API 21+.
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackgroundBorderless',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackgroundBorderless',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android ripple with
-   * the supplied color. If `borderless` is true, the ripple will render outside
-   * of the view bounds. Requires API 21+.
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
    */
   static Ripple: (
     color: string,
     borderless: boolean,
-    rippleRadius: ?number,
-  ) => $ReadOnly<{|
+    rippleRadius?: ?number,
+  ) => $ReadOnly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,
     type: 'RippleAndroid',
-  |}> = (color: string, borderless: boolean, rippleRadius: ?number) => {
+  }> = (color: string, borderless: boolean, rippleRadius?: ?number) => {
     const processedColor = processColor(color);
     invariant(
       processedColor == null || typeof processedColor === 'number',
@@ -220,7 +265,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     }
   }
 
-  _dispatchHotspotUpdate(event: PressEvent): void {
+  _dispatchHotspotUpdate(event: GestureResponderEvent): void {
     if (Platform.OS === 'android') {
       const {locationX, locationY} = event.nativeEvent;
       const hostComponentRef = findHostInstance_DEPRECATED(this);
@@ -336,7 +381,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     );
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(
+    prevProps: TouchableNativeFeedbackProps,
+    prevState: State,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -363,4 +411,4 @@ const getBackgroundProp =
 
 TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
-module.exports = TouchableNativeFeedback;
+export default TouchableNativeFeedback;