@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Components/TextInput/TextInputState.win32.js

@@ -12,18 +12,37 @@
 // TextInputs. All calls relating to the keyboard should be funneled
 // through here.
 
-const React = require('react');
-const Platform = require('../../Utilities/Platform');
-const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
+import type {
+  HostComponent,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../Renderer/shims/ReactNativeTypes';
+
 import {Commands as AndroidTextInputCommands} from '../../Components/TextInput/AndroidTextInputNativeComponent';
 import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import {UIManager} from 'react-native';
+
+const {findNodeHandle} = require('../../ReactNative/RendererProxy');
+const Platform = require('../../Utilities/Platform');
+const React = require('react');
+
 type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
 let currentlyFocusedInputRef: ?ComponentRef = null;
-const inputs = new Set();
+const inputs = new Set<{
+  blur(): void,
+  focus(): void,
+  measure(callback: MeasureOnSuccessCallback): void,
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
+  measureLayout(
+    relativeToNativeNode: number | React.ElementRef<HostComponent<mixed>>,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void,
+  setNativeProps(nativeProps: {...}): void,
+}>();
 
 function currentlyFocusedInput(): ?ComponentRef {
   return currentlyFocusedInputRef;

package/Libraries/Components/ToastAndroid/NativeToastAndroid.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Components/ToastAndroid/ToastAndroid.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+/**
+ * This exposes the native ToastAndroid module as a JS module. This has a function 'show'
+ * which takes the following parameters:
+ *
+ * 1. String message: A string with the text to toast
+ * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
+ *
+ * There is also a function `showWithGravity` to specify the layout gravity. May be
+ * ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER
+ */
+export interface ToastAndroidStatic {
+  /**
+   * String message: A string with the text to toast
+   * int duration: The duration of the toast.
+   * May be ToastAndroid.SHORT or ToastAndroid.LONG
+   */
+  show(message: string, duration: number): void;
+  /** `gravity` may be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER */
+  showWithGravity(message: string, duration: number, gravity: number): void;
+
+  showWithGravityAndOffset(
+    message: string,
+    duration: number,
+    gravity: number,
+    xOffset: number,
+    yOffset: number,
+  ): void;
+  // Toast duration constants
+  SHORT: number;
+  LONG: number;
+  // Toast gravity constants
+  TOP: number;
+  BOTTOM: number;
+  CENTER: number;
+}
+
+export const ToastAndroid: ToastAndroidStatic;
+export type ToastAndroid = ToastAndroidStatic;

package/Libraries/Components/Touchable/Tests/TouchableWin32Test.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchableWin32Test.js","sourceRoot":"","sources":["../../../../src/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx"],"names":[],"mappings":"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","sourcesContent":["'use strict';\n\nimport React from 'react'\nimport { Insets, NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';\n\nimport { TextWin32 } from '../../Text/TextWin32';\nimport { ViewWin32 } from '../../View/ViewWin32';\nimport { IViewWin32Props, IKeyboardEvent } from '../../View/ViewWin32.Props';\nimport { TouchableWin32 } from '../TouchableWin32';\nimport { IPressEvent, IRenderChild } from '../TouchableWin32.Types';\nimport { ITouchableWin32State } from '../TouchableWin32.Props';\n\n/**\n * Styles used across both examples\n */\nconst styles = StyleSheet.create({\n  largeContainer: {\n    height: 200,\n    width: 600,\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  smallContainer: {\n    height: 90,\n    width: 90,\n    justifyContent: 'center',\n    alignContent: 'center',\n  },\n  highlight: {\n    height: 150,\n    width: 150,\n    justifyContent: 'space-around',\n    alignContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  outerTouch: {\n    height: 150,\n    width: 150,\n    justifyContent: 'space-around',\n    alignContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  innerTouch: {\n    height: 90,\n    width: 90,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Constant press rect offset, used to demonstrate press geometry\n */\nconst PRESS_RETENTION_OFFSET: Insets = {\n  top: 100,\n  left: 100,\n  right: 100,\n  bottom: 100,\n};\n\ninterface ITouchableWin32WithoutFeedbackProps extends IViewWin32Props {\n  delayLongPress?: number;\n  delayPressIn?: number;\n  delayPressOut?: number;\n  onPress?: (e: IPressEvent) => void;\n  onPressIn?: (e: IPressEvent) => void;\n  onPressOut?: (e: IPressEvent) => void;\n  onLongPress?: (e: IPressEvent) => void;\n  pressRetentionOffset?: Insets;\n  rejectResponderTermination?: boolean;\n}\n\ninterface ITouchableWin32WithoutFeedbackState {\n  isFocused: boolean;\n}\n\n/**\n * Example implementation of TouchableWithoutFeedback - not meant for use outside these examples\n * This is mainly there to show the ability to respond to touches without providing visual feedback,\n * though we do show a red border on focus to know where starts start and end and whether press rect\n * offsets are respected.\n */\nclass TouchableWin32WithoutFeedback extends React.Component<ITouchableWin32WithoutFeedbackProps, ITouchableWin32WithoutFeedbackState> {\n  constructor(props) {\n    super(props);\n\n    this.state = { isFocused: false };\n  }\n\n  public render() {\n    return (\n      <TouchableWin32\n        focusable\n        rejectResponderTermination={true}\n        disabled={false}\n        touchableHandleActivePressIn={this._touchableHandleActivePressIn}\n        touchableHandleActivePressOut={this._touchableHandleActivePressOut}\n        touchableHandlePress={this._touchableHandlePress}\n        touchableHandleLongPress={this._touchableHandleLongPress}\n        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}\n        touchableGetPressRectOffset={this._touchableGetPressRectOffset}\n        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}\n        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}\n        touchableGetHitSlop={this._touchableGetHitSlop}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        renderStyle={this._generateStyle}\n      >\n        {React.Children.only(this.props.children)}\n      </TouchableWin32>\n    );\n  }\n\n  private readonly _touchableHandlePress = (e: IPressEvent) => {\n    this.props.onPress && this.props.onPress(e);\n  };\n\n  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {\n    this.props.onPressIn && this.props.onPressIn(e);\n  };\n\n  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {\n    this.props.onPressOut && this.props.onPressOut(e);\n  };\n\n  private readonly _touchableHandleLongPress = (e: IPressEvent) => {\n    this.props.onLongPress && this.props.onLongPress(e);\n  };\n\n  private readonly _touchableGetPressRectOffset = (): Insets => {\n    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;\n  };\n\n  private readonly _touchableGetHitSlop = (): Insets => {\n    return this.props.hitSlop;\n  };\n\n  private readonly _touchableGetHighlightDelayMS = (): number => {\n    return this.props.delayPressIn || 0;\n  };\n\n  private readonly _touchableGetLongPressDelayMS = (): number => {\n    return this.props.delayLongPress === 0 ? 0 : this.props.delayLongPress || 500;\n  };\n\n  private readonly _touchableGetPressOutDelayMS = (): number => {\n    return this.props.delayPressOut || 0;\n  };\n\n  private readonly _onFocus = () => {\n    this.setState({ isFocused: true });\n  };\n\n  private readonly _onBlur = () => {\n    this.setState({ isFocused: false });\n  };\n\n  /**\n   * The generated style uses hard-coded border width values\n   */\n  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {\n    const finalStyle: ViewStyle = {\n      borderWidth: state.isFocused ? 5 : 0,\n      borderColor: 'red',\n    };\n    return Object.assign({}, this.props.style, finalStyle);\n  };\n}\n\ninterface ITouchableWin32HighlightProps extends Omit <IViewWin32Props, 'children'> {\n  delayLongPress?: number;\n  delayLongPressIn?: number;\n  delayPressOut?: number;\n  onPress?: (e: IPressEvent) => void;\n  onPressIn?: (e: IPressEvent) => void;\n  onPressOut?: (e: IPressEvent) => void;\n  onLongPress?: (e: IPressEvent) => void;\n  onKeyPress?: (e: IKeyboardEvent) => void;\n  onKeyPressDown?: (e: IKeyboardEvent) => void;\n  pressRetentionOffset?: Insets;\n  rejectResponderTermination?: boolean;\n  underlayColor?: string;\n  children?: IRenderChild<ITouchableWin32State>;\n}\n\ninterface ITouchableWin32HighlightComponentProps extends ITouchableWin32HighlightProps {\n  // Used as an imperative handle to the TouchableWin32 interface - primarily for focus()\n  innerRef?: React.Ref<TouchableWin32>;\n}\n\n/**\n * Example implementation of TouchableHighlight - not meant for use outside these examples\n * The main difference between a ful TouchableHiglight implementation and this example is that\n * TouchableHighlight should manipulate the opacity of the wrapped view to display the underlay color.\n * This example merely uses hard coded color values to distinguish between different control states\n */\nclass TouchableWin32HighlightComponent extends React.Component<ITouchableWin32HighlightComponentProps, {}> {\n\n  public render() {\n    return (\n      <TouchableWin32\n        focusable\n        rejectResponderTermination={this.props.rejectResponderTermination}\n        disabled={false}\n        touchableHandleActivePressIn={this._touchableHandleActivePressIn}\n        touchableHandleActivePressOut={this._touchableHandleActivePressOut}\n        touchableHandlePress={this._touchableHandlePress}\n        touchableHandleLongPress={this._touchableHandleLongPress}\n        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}\n        touchableGetPressRectOffset={this._touchableGetPressRectOffset}\n        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}\n        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}\n        touchableGetHitSlop={this._touchableGetHitSlop}\n        touchableHandleKeyPress={this._touchableHandleKeyPress}\n        touchableHandleKeyPressDown={this._touchableHandleKeyPressDown}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        onMouseEnter={this._mouseEnter}\n        onMouseLeave={this._mouseLeave}\n        renderStyle={this._generateStyle}\n        children={this.props.children}\n        ref={this.props.innerRef}\n      />\n    );\n  }\n\n  private readonly _touchableHandlePress = (e: IPressEvent) => {\n    this.props.onPress && this.props.onPress(e);\n    this.setState({ isPressed: false });\n  };\n  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {\n    this.props.onPressIn && this.props.onPressIn(e);\n    this.setState({ isPressed: true });\n  };\n  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {\n    this.props.onPressOut && this.props.onPressOut(e);\n    this.setState({ isPressed: false });\n  };\n  private readonly _touchableHandleLongPress = (e: IPressEvent) => {\n    this.props.onLongPress && this.props.onLongPress(e);\n  };\n  private readonly _touchableGetPressRectOffset = (): Insets => {\n    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;\n  };\n  private readonly _touchableGetHitSlop = (): Insets => {\n    return { left: 100, right: 100, top: 100, bottom: 100 };\n  };\n  private readonly _touchableGetHighlightDelayMS = (): number => {\n    return this.props.delayLongPressIn || 0;\n  };\n  private readonly _touchableGetLongPressDelayMS = (): number => {\n    return this.props.delayLongPress || 500;\n  };\n  private readonly _touchableGetPressOutDelayMS = (): number => {\n    return this.props.delayPressOut || 0;\n  };\n  private readonly _touchableHandleKeyPress = (ev: IKeyboardEvent) => {\n    this.props.onKeyPress && this.props.onKeyPress(ev);\n  }\n  private readonly _touchableHandleKeyPressDown = (ev: IKeyboardEvent) => {\n    this.props.onKeyPressDown && this.props.onKeyPressDown(ev);\n  }\n  private readonly _mouseEnter = (): void => {\n    this.props.onMouseEnter && this.props.onMouseEnter();\n    this.setState({ isMouseIn: true });\n  };\n  private readonly _mouseLeave = (): void => {\n    this.props.onMouseLeave && this.props.onMouseLeave();\n    this.setState({ isMouseIn: false });\n  };\n  private readonly _onFocus = (ev: NativeSyntheticEvent<{}>): void => {\n    this.props.onFocus && this.props.onFocus(ev);\n    this.setState({ isFocused: true });\n  };\n  private readonly _onBlur = (ev: NativeSyntheticEvent<{}>): void => {\n    this.props.onBlur && this.props.onBlur(ev);\n    this.setState({ isFocused: false });\n  };\n\n  /**\n   * The generated style uses hard-coded color values,\n   * though it is trivial to pass these values as props.\n   * This is an example of a render style (one that is a\n   * funtion passed on to TouchableWin32 and resolved according\n   * to the internal state of TouchableWin32).\n   */\n  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {\n    const finalStyle: ViewStyle = {};\n    finalStyle.borderColor = state.isFocused ? 'red' : 'blue';\n    finalStyle.borderWidth = state.isFocused ? 10 : 5;\n    if (state.isHovered) {\n      if (state.isPressed) {\n        finalStyle.backgroundColor = 'black';\n      } else {\n        finalStyle.backgroundColor = 'gray';\n      }\n    } else {\n      if (state.isPressed) {\n        finalStyle.backgroundColor = 'green';\n      } else {\n        finalStyle.backgroundColor = 'white';\n      }\n    }\n    return Object.assign({}, this.props.style, finalStyle);\n  };\n}\n\n// Demonstrating ref forwarding - forwarding a ref using an innerRef prop on a class component\nconst TouchableWin32Highlight = React.forwardRef<TouchableWin32, ITouchableWin32HighlightProps>(\n  (props, ref) => {\n    return (\n      <TouchableWin32HighlightComponent innerRef={ref} {...props} />\n    );\n  }\n);\n\n/**\n * Both examples merely track number of presses\n */\ninterface IExampleState {\n  numberOfPresses: number;\n}\n\n/**\n * TouchableHighlightExamples\n */\nclass TouchableWithoutFeedbackExample extends React.Component<{}, IExampleState> {\n  constructor(props) {\n    super(props);\n    this.state = { numberOfPresses: 0 };\n  }\n\n  public render() {\n    return (\n      <ViewWin32 style={styles.largeContainer}>\n        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32>\n            <TextWin32>Press me</TextWin32>\n          </ViewWin32>\n        </TouchableWin32WithoutFeedback>\n\n        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32 style={styles.smallContainer}>\n            <TouchableWin32WithoutFeedback style={styles.innerTouch} onPress={this._onPress}>\n              <ViewWin32>\n                <TextWin32>You can also have nested Touchables</TextWin32>\n              </ViewWin32>\n            </TouchableWin32WithoutFeedback>\n          </ViewWin32>\n        </TouchableWin32WithoutFeedback>\n        <TextWin32>{'Number of Recognized Presses: ' + this.state.numberOfPresses}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _onPress = () => {\n    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });\n  };\n}\n\n/**\n * TouchableHighlightExamples\n */\nclass TouchableHighlightExample extends React.Component<{}, IExampleState> {\n  constructor(props) {\n    super(props);\n    this.state = { numberOfPresses: 0 };\n  }\n\n  public render() {\n    return (\n      <ViewWin32 style={styles.largeContainer}>\n        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32>\n            <TextWin32>Press me</TextWin32>\n          </ViewWin32>\n        </TouchableWin32Highlight>\n\n        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32 style={styles.smallContainer}>\n            <TouchableWin32Highlight style={styles.innerTouch} onPress={this._onPress} children={this._getChildrenOfInnerTouchable} />\n          </ViewWin32>\n        </TouchableWin32Highlight>\n        <TextWin32 style={{ color: 'red' }} textStyle=\"None\">\n          {'Number of Recognized Presses: ' + this.state.numberOfPresses}\n        </TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  /**\n   * This is primarily to demonstrate render children as a function\n   * of state, here we change text color depending on interaction state.\n   */\n  private readonly _getChildrenOfInnerTouchable = (state: ITouchableWin32State) => {\n    return (\n      <ViewWin32\n        style={{\n          borderColor: state.isFocused ? 'green' : 'pink',\n          borderWidth: state.isHovered ? 10 : 5,\n          height: 70,\n          width: 70,\n        }}\n      >\n        <TextWin32\n          style={{\n            color: this._pickColor(state.isHovered, state.isPressed),\n            fontSize: state.isFocused ? 8 : 10,\n          }}\n          textStyle=\"None\"\n        >\n          Press Me!\n        </TextWin32>\n      </ViewWin32>\n    );\n  };\n\n  private _pickColor(hovered: boolean, pressed: boolean) {\n    if (hovered) {\n      if (pressed) {\n        return 'white';\n      } else {\n        return 'red';\n      }\n    } else {\n      if (pressed) {\n        return 'purple';\n      } else {\n        return 'black';\n      }\n    }\n  }\n\n  private readonly _onPress = () => {\n    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });\n  };\n}\n\nconst TouchableFocusExample = () => {\n  const [focused, setFocused] = React.useState(false);\n  const focusableRef = React.useRef<TouchableWin32>(null);\n\n  // onPress callback\n  const focusOnPress = React.useCallback(() => {\n    focusableRef.current && focusableRef.current.focus();\n    focused || setFocused(true);\n  }, [focused]);\n\n  // onFocus and onBlur callbacks\n  const onFocus = React.useCallback(() => {\n    setFocused(true);\n  }, []);\n  const onBlur = React.useCallback(() => {\n    setFocused(false);\n  }, []);\n\n  return (\n    <ViewWin32 style={styles.largeContainer}>\n      <TouchableWin32Highlight onPress={focusOnPress}>\n        <Text>Press me to focus my friend</Text>\n      </TouchableWin32Highlight>\n\n      <TouchableWin32Highlight\n        ref={focusableRef}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      >\n        <Text>{'Focused: ' + focused}</Text>\n      </TouchableWin32Highlight>\n    </ViewWin32>\n  );\n}\n\nexport const displayName = 'TouchableWin32 Examples';\nexport const title = 'TouchableWin32';\nexport const description = 'Demonstration of touchable + focus + hover behavior all in one component';\n\nexport const examples = [\n  {\n    title: 'TouchableWithoutFeedback Example',\n    description: 'A simple example implementation of without feedback behavior',\n    render(): JSX.Element {\n      return <TouchableWithoutFeedbackExample />;\n    },\n  },\n  {\n    title: 'TouchableHighlight Example',\n    description: 'A simple example implementation of highlight behavior',\n    render(): JSX.Element {\n      return <TouchableHighlightExample />;\n    },\n  },\n  {\n    title: 'Imperative Focus on TouchableWin32 Example',\n    description: 'A simple example implementation of imperative focus behavior',\n    render(): JSX.Element {\n      return <TouchableFocusExample />;\n    },\n  }\n];\n"]}
+{"version":3,"file":"TouchableWin32Test.js","sourceRoot":"","sources":["../../../../src/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx"],"names":[],"mappings":"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","sourcesContent":["'use strict';\n\nimport React from 'react'\nimport {NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';\nimport {Insets} from 'react-native/types/public/Insets';\nimport { TextWin32 } from '../../Text/TextWin32';\nimport { ViewWin32 } from '../../View/ViewWin32';\nimport { IViewWin32Props, IKeyboardEvent } from '../../View/ViewWin32.Props';\nimport { TouchableWin32 } from '../TouchableWin32';\nimport { IPressEvent, IRenderChild } from '../TouchableWin32.Types';\nimport { ITouchableWin32State } from '../TouchableWin32.Props';\n\n/**\n * Styles used across both examples\n */\nconst styles = StyleSheet.create({\n  largeContainer: {\n    height: 200,\n    width: 600,\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  smallContainer: {\n    height: 90,\n    width: 90,\n    justifyContent: 'center',\n    alignContent: 'center',\n  },\n  highlight: {\n    height: 150,\n    width: 150,\n    justifyContent: 'space-around',\n    alignContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  outerTouch: {\n    height: 150,\n    width: 150,\n    justifyContent: 'space-around',\n    alignContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  innerTouch: {\n    height: 90,\n    width: 90,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Constant press rect offset, used to demonstrate press geometry\n */\nconst PRESS_RETENTION_OFFSET: Insets = {\n  top: 100,\n  left: 100,\n  right: 100,\n  bottom: 100,\n};\n\ninterface ITouchableWin32WithoutFeedbackProps extends IViewWin32Props {\n  delayLongPress?: number;\n  delayPressIn?: number;\n  delayPressOut?: number;\n  onPress?: (e: IPressEvent) => void;\n  onPressIn?: (e: IPressEvent) => void;\n  onPressOut?: (e: IPressEvent) => void;\n  onLongPress?: (e: IPressEvent) => void;\n  pressRetentionOffset?: Insets;\n  rejectResponderTermination?: boolean;\n}\n\ninterface ITouchableWin32WithoutFeedbackState {\n  isFocused: boolean;\n}\n\n/**\n * Example implementation of TouchableWithoutFeedback - not meant for use outside these examples\n * This is mainly there to show the ability to respond to touches without providing visual feedback,\n * though we do show a red border on focus to know where starts start and end and whether press rect\n * offsets are respected.\n */\nclass TouchableWin32WithoutFeedback extends React.Component<ITouchableWin32WithoutFeedbackProps, ITouchableWin32WithoutFeedbackState> {\n  constructor(props) {\n    super(props);\n\n    this.state = { isFocused: false };\n  }\n\n  public render() {\n    return (\n      <TouchableWin32\n        focusable\n        rejectResponderTermination={true}\n        disabled={false}\n        touchableHandleActivePressIn={this._touchableHandleActivePressIn}\n        touchableHandleActivePressOut={this._touchableHandleActivePressOut}\n        touchableHandlePress={this._touchableHandlePress}\n        touchableHandleLongPress={this._touchableHandleLongPress}\n        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}\n        touchableGetPressRectOffset={this._touchableGetPressRectOffset}\n        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}\n        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}\n        touchableGetHitSlop={this._touchableGetHitSlop}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        renderStyle={this._generateStyle}\n      >\n        {React.Children.only(this.props.children)}\n      </TouchableWin32>\n    );\n  }\n\n  private readonly _touchableHandlePress = (e: IPressEvent) => {\n    this.props.onPress && this.props.onPress(e);\n  };\n\n  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {\n    this.props.onPressIn && this.props.onPressIn(e);\n  };\n\n  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {\n    this.props.onPressOut && this.props.onPressOut(e);\n  };\n\n  private readonly _touchableHandleLongPress = (e: IPressEvent) => {\n    this.props.onLongPress && this.props.onLongPress(e);\n  };\n\n  private readonly _touchableGetPressRectOffset = (): Insets => {\n    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;\n  };\n\n  private readonly _touchableGetHitSlop = (): Insets => {\n    return this.props.hitSlop;\n  };\n\n  private readonly _touchableGetHighlightDelayMS = (): number => {\n    return this.props.delayPressIn || 0;\n  };\n\n  private readonly _touchableGetLongPressDelayMS = (): number => {\n    return this.props.delayLongPress === 0 ? 0 : this.props.delayLongPress || 500;\n  };\n\n  private readonly _touchableGetPressOutDelayMS = (): number => {\n    return this.props.delayPressOut || 0;\n  };\n\n  private readonly _onFocus = () => {\n    this.setState({ isFocused: true });\n  };\n\n  private readonly _onBlur = () => {\n    this.setState({ isFocused: false });\n  };\n\n  /**\n   * The generated style uses hard-coded border width values\n   */\n  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {\n    const finalStyle: ViewStyle = {\n      borderWidth: state.isFocused ? 5 : 0,\n      borderColor: 'red',\n    };\n    return Object.assign({}, this.props.style, finalStyle);\n  };\n}\n\ninterface ITouchableWin32HighlightProps extends Omit <IViewWin32Props, 'children'> {\n  delayLongPress?: number;\n  delayLongPressIn?: number;\n  delayPressOut?: number;\n  onPress?: (e: IPressEvent) => void;\n  onPressIn?: (e: IPressEvent) => void;\n  onPressOut?: (e: IPressEvent) => void;\n  onLongPress?: (e: IPressEvent) => void;\n  onKeyPress?: (e: IKeyboardEvent) => void;\n  onKeyPressDown?: (e: IKeyboardEvent) => void;\n  pressRetentionOffset?: Insets;\n  rejectResponderTermination?: boolean;\n  underlayColor?: string;\n  children?: IRenderChild<ITouchableWin32State>;\n}\n\ninterface ITouchableWin32HighlightComponentProps extends ITouchableWin32HighlightProps {\n  // Used as an imperative handle to the TouchableWin32 interface - primarily for focus()\n  innerRef?: React.Ref<TouchableWin32>;\n}\n\n/**\n * Example implementation of TouchableHighlight - not meant for use outside these examples\n * The main difference between a ful TouchableHiglight implementation and this example is that\n * TouchableHighlight should manipulate the opacity of the wrapped view to display the underlay color.\n * This example merely uses hard coded color values to distinguish between different control states\n */\nclass TouchableWin32HighlightComponent extends React.Component<ITouchableWin32HighlightComponentProps, {}> {\n\n  public render() {\n    return (\n      <TouchableWin32\n        focusable\n        rejectResponderTermination={this.props.rejectResponderTermination}\n        disabled={false}\n        touchableHandleActivePressIn={this._touchableHandleActivePressIn}\n        touchableHandleActivePressOut={this._touchableHandleActivePressOut}\n        touchableHandlePress={this._touchableHandlePress}\n        touchableHandleLongPress={this._touchableHandleLongPress}\n        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}\n        touchableGetPressRectOffset={this._touchableGetPressRectOffset}\n        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}\n        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}\n        touchableGetHitSlop={this._touchableGetHitSlop}\n        touchableHandleKeyPress={this._touchableHandleKeyPress}\n        touchableHandleKeyPressDown={this._touchableHandleKeyPressDown}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        onMouseEnter={this._mouseEnter}\n        onMouseLeave={this._mouseLeave}\n        renderStyle={this._generateStyle}\n        children={this.props.children}\n        ref={this.props.innerRef}\n      />\n    );\n  }\n\n  private readonly _touchableHandlePress = (e: IPressEvent) => {\n    this.props.onPress && this.props.onPress(e);\n    this.setState({ isPressed: false });\n  };\n  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {\n    this.props.onPressIn && this.props.onPressIn(e);\n    this.setState({ isPressed: true });\n  };\n  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {\n    this.props.onPressOut && this.props.onPressOut(e);\n    this.setState({ isPressed: false });\n  };\n  private readonly _touchableHandleLongPress = (e: IPressEvent) => {\n    this.props.onLongPress && this.props.onLongPress(e);\n  };\n  private readonly _touchableGetPressRectOffset = (): Insets => {\n    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;\n  };\n  private readonly _touchableGetHitSlop = (): Insets => {\n    return { left: 100, right: 100, top: 100, bottom: 100 };\n  };\n  private readonly _touchableGetHighlightDelayMS = (): number => {\n    return this.props.delayLongPressIn || 0;\n  };\n  private readonly _touchableGetLongPressDelayMS = (): number => {\n    return this.props.delayLongPress || 500;\n  };\n  private readonly _touchableGetPressOutDelayMS = (): number => {\n    return this.props.delayPressOut || 0;\n  };\n  private readonly _touchableHandleKeyPress = (ev: IKeyboardEvent) => {\n    this.props.onKeyPress && this.props.onKeyPress(ev);\n  }\n  private readonly _touchableHandleKeyPressDown = (ev: IKeyboardEvent) => {\n    this.props.onKeyPressDown && this.props.onKeyPressDown(ev);\n  }\n  private readonly _mouseEnter = (): void => {\n    this.props.onMouseEnter && this.props.onMouseEnter();\n    this.setState({ isMouseIn: true });\n  };\n  private readonly _mouseLeave = (): void => {\n    this.props.onMouseLeave && this.props.onMouseLeave();\n    this.setState({ isMouseIn: false });\n  };\n  private readonly _onFocus = (ev: NativeSyntheticEvent<{}>): void => {\n    this.props.onFocus && this.props.onFocus(ev);\n    this.setState({ isFocused: true });\n  };\n  private readonly _onBlur = (ev: NativeSyntheticEvent<{}>): void => {\n    this.props.onBlur && this.props.onBlur(ev);\n    this.setState({ isFocused: false });\n  };\n\n  /**\n   * The generated style uses hard-coded color values,\n   * though it is trivial to pass these values as props.\n   * This is an example of a render style (one that is a\n   * funtion passed on to TouchableWin32 and resolved according\n   * to the internal state of TouchableWin32).\n   */\n  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {\n    const finalStyle: ViewStyle = {};\n    finalStyle.borderColor = state.isFocused ? 'red' : 'blue';\n    finalStyle.borderWidth = state.isFocused ? 10 : 5;\n    if (state.isHovered) {\n      if (state.isPressed) {\n        finalStyle.backgroundColor = 'black';\n      } else {\n        finalStyle.backgroundColor = 'gray';\n      }\n    } else {\n      if (state.isPressed) {\n        finalStyle.backgroundColor = 'green';\n      } else {\n        finalStyle.backgroundColor = 'white';\n      }\n    }\n    return Object.assign({}, this.props.style, finalStyle);\n  };\n}\n\n// Demonstrating ref forwarding - forwarding a ref using an innerRef prop on a class component\nconst TouchableWin32Highlight = React.forwardRef<TouchableWin32, ITouchableWin32HighlightProps>(\n  (props, ref) => {\n    return (\n      <TouchableWin32HighlightComponent innerRef={ref} {...props} />\n    );\n  }\n);\n\n/**\n * Both examples merely track number of presses\n */\ninterface IExampleState {\n  numberOfPresses: number;\n}\n\n/**\n * TouchableHighlightExamples\n */\nclass TouchableWithoutFeedbackExample extends React.Component<{}, IExampleState> {\n  constructor(props) {\n    super(props);\n    this.state = { numberOfPresses: 0 };\n  }\n\n  public render() {\n    return (\n      <ViewWin32 style={styles.largeContainer}>\n        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32>\n            <TextWin32>Press me</TextWin32>\n          </ViewWin32>\n        </TouchableWin32WithoutFeedback>\n\n        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32 style={styles.smallContainer}>\n            <TouchableWin32WithoutFeedback style={styles.innerTouch} onPress={this._onPress}>\n              <ViewWin32>\n                <TextWin32>You can also have nested Touchables</TextWin32>\n              </ViewWin32>\n            </TouchableWin32WithoutFeedback>\n          </ViewWin32>\n        </TouchableWin32WithoutFeedback>\n        <TextWin32>{'Number of Recognized Presses: ' + this.state.numberOfPresses}</TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  private readonly _onPress = () => {\n    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });\n  };\n}\n\n/**\n * TouchableHighlightExamples\n */\nclass TouchableHighlightExample extends React.Component<{}, IExampleState> {\n  constructor(props) {\n    super(props);\n    this.state = { numberOfPresses: 0 };\n  }\n\n  public render() {\n    return (\n      <ViewWin32 style={styles.largeContainer}>\n        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32>\n            <TextWin32>Press me</TextWin32>\n          </ViewWin32>\n        </TouchableWin32Highlight>\n\n        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>\n          <ViewWin32 style={styles.smallContainer}>\n            <TouchableWin32Highlight style={styles.innerTouch} onPress={this._onPress} children={this._getChildrenOfInnerTouchable} />\n          </ViewWin32>\n        </TouchableWin32Highlight>\n        <TextWin32 style={{ color: 'red' }} textStyle=\"None\">\n          {'Number of Recognized Presses: ' + this.state.numberOfPresses}\n        </TextWin32>\n      </ViewWin32>\n    );\n  }\n\n  /**\n   * This is primarily to demonstrate render children as a function\n   * of state, here we change text color depending on interaction state.\n   */\n  private readonly _getChildrenOfInnerTouchable = (state: ITouchableWin32State) => {\n    return (\n      <ViewWin32\n        style={{\n          borderColor: state.isFocused ? 'green' : 'pink',\n          borderWidth: state.isHovered ? 10 : 5,\n          height: 70,\n          width: 70,\n        }}\n      >\n        <TextWin32\n          style={{\n            color: this._pickColor(state.isHovered, state.isPressed),\n            fontSize: state.isFocused ? 8 : 10,\n          }}\n          textStyle=\"None\"\n        >\n          Press Me!\n        </TextWin32>\n      </ViewWin32>\n    );\n  };\n\n  private _pickColor(hovered: boolean, pressed: boolean) {\n    if (hovered) {\n      if (pressed) {\n        return 'white';\n      } else {\n        return 'red';\n      }\n    } else {\n      if (pressed) {\n        return 'purple';\n      } else {\n        return 'black';\n      }\n    }\n  }\n\n  private readonly _onPress = () => {\n    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });\n  };\n}\n\nconst TouchableFocusExample = () => {\n  const [focused, setFocused] = React.useState(false);\n  const focusableRef = React.useRef<TouchableWin32>(null);\n\n  // onPress callback\n  const focusOnPress = React.useCallback(() => {\n    focusableRef.current && focusableRef.current.focus();\n    focused || setFocused(true);\n  }, [focused]);\n\n  // onFocus and onBlur callbacks\n  const onFocus = React.useCallback(() => {\n    setFocused(true);\n  }, []);\n  const onBlur = React.useCallback(() => {\n    setFocused(false);\n  }, []);\n\n  return (\n    <ViewWin32 style={styles.largeContainer}>\n      <TouchableWin32Highlight onPress={focusOnPress}>\n        <Text>Press me to focus my friend</Text>\n      </TouchableWin32Highlight>\n\n      <TouchableWin32Highlight\n        ref={focusableRef}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      >\n        <Text>{'Focused: ' + focused}</Text>\n      </TouchableWin32Highlight>\n    </ViewWin32>\n  );\n}\n\nexport const displayName = 'TouchableWin32 Examples';\nexport const title = 'TouchableWin32';\nexport const description = 'Demonstration of touchable + focus + hover behavior all in one component';\n\nexport const examples = [\n  {\n    title: 'TouchableWithoutFeedback Example',\n    description: 'A simple example implementation of without feedback behavior',\n    render(): JSX.Element {\n      return <TouchableWithoutFeedbackExample />;\n    },\n  },\n  {\n    title: 'TouchableHighlight Example',\n    description: 'A simple example implementation of highlight behavior',\n    render(): JSX.Element {\n      return <TouchableHighlightExample />;\n    },\n  },\n  {\n    title: 'Imperative Focus on TouchableWin32 Example',\n    description: 'A simple example implementation of imperative focus behavior',\n    render(): JSX.Element {\n      return <TouchableFocusExample />;\n    },\n  }\n];\n"]}

package/Libraries/Components/Touchable/Touchable.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {Insets} from '../../../types/public/Insets';
+import {GestureResponderEvent} from '../../Types/CoreEventTypes';
+
+/**
+ * //FIXME: need to find documentation on which component is a TTouchable and can implement that interface
+ * @see React.DOMAtributes
+ */
+export interface Touchable {
+  onTouchStart?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchMove?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchEnd?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchCancel?: ((event: GestureResponderEvent) => void) | undefined;
+  onTouchEndCapture?: ((event: GestureResponderEvent) => void) | undefined;
+}
+
+export const Touchable: {
+  TOUCH_TARGET_DEBUG: boolean;
+  renderDebugView: (config: {
+    color: string | number;
+    hitSlop?: Insets | undefined;
+  }) => React.ReactElement | null;
+};
+
+/**
+ * @see https://github.com/facebook/react-native/blob/0.34-stable\Libraries\Components\Touchable\Touchable.js
+ */
+interface TouchableMixin {
+  /**
+   * Invoked when the item should be highlighted. Mixers should implement this
+   * to visually distinguish the `VisualRect` so that the user knows that
+   * releasing a touch will result in a "selection" (analog to click).
+   */
+  touchableHandleActivePressIn(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is "active" (in that it is still eligible to become
+   * a "select") but the touch has left the `PressRect`. Usually the mixer will
+   * want to unhighlight the `VisualRect`. If the user (while pressing) moves
+   * back into the `PressRect` `touchableHandleActivePressIn` will be invoked
+   * again and the mixer should probably highlight the `VisualRect` again. This
+   * event will not fire on an `touchEnd/mouseUp` event, only move events while
+   * the user is depressing the mouse/touch.
+   */
+  touchableHandleActivePressOut(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is "selected" - meaning the interaction ended by
+   * letting up while the item was either in the state
+   * `RESPONDER_ACTIVE_PRESS_IN` or `RESPONDER_INACTIVE_PRESS_IN`.
+   */
+  touchableHandlePress(e: GestureResponderEvent): void;
+
+  /**
+   * Invoked when the item is long pressed - meaning the interaction ended by
+   * letting up while the item was in `RESPONDER_ACTIVE_LONG_PRESS_IN`. If
+   * `touchableHandleLongPress` is *not* provided, `touchableHandlePress` will
+   * be called as it normally is. If `touchableHandleLongPress` is provided, by
+   * default any `touchableHandlePress` callback will not be invoked. To
+   * override this default behavior, override `touchableLongPressCancelsPress`
+   * to return false. As a result, `touchableHandlePress` will be called when
+   * lifting up, even if `touchableHandleLongPress` has also been called.
+   */
+  touchableHandleLongPress(e: GestureResponderEvent): void;
+
+  /**
+   * Returns the amount to extend the `HitRect` into the `PressRect`. Positive
+   * numbers mean the size expands outwards.
+   */
+  touchableGetPressRectOffset(): Insets;
+
+  /**
+   * Returns the number of millis to wait before triggering a highlight.
+   */
+  touchableGetHighlightDelayMS(): number;
+
+  // These methods are undocumented but still being used by TouchableMixin internals
+  touchableGetLongPressDelayMS(): number;
+  touchableGetPressOutDelayMS(): number;
+  touchableGetHitSlop(): Insets;
+}

package/Libraries/Components/Touchable/Touchable.flow.js

@@ -0,0 +1,258 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {PressEvent} from '../../Types/CoreEventTypes';
+
+import * as React from 'react';
+
+/**
+ * `Touchable`: Taps done right.
+ *
+ * You hook your `ResponderEventPlugin` events into `Touchable`. `Touchable`
+ * will measure time/geometry and tells you when to give feedback to the user.
+ *
+ * ====================== Touchable Tutorial ===============================
+ * The `Touchable` mixin helps you handle the "press" interaction. It analyzes
+ * the geometry of elements, and observes when another responder (scroll view
+ * etc) has stolen the touch lock. It notifies your component when it should
+ * give feedback to the user. (bouncing/highlighting/unhighlighting).
+ *
+ * - When a touch was activated (typically you highlight)
+ * - When a touch was deactivated (typically you unhighlight)
+ * - When a touch was "pressed" - a touch ended while still within the geometry
+ *   of the element, and no other element (like scroller) has "stolen" touch
+ *   lock ("responder") (Typically you bounce the element).
+ *
+ * A good tap interaction isn't as simple as you might think. There should be a
+ * slight delay before showing a highlight when starting a touch. If a
+ * subsequent touch move exceeds the boundary of the element, it should
+ * unhighlight, but if that same touch is brought back within the boundary, it
+ * should rehighlight again. A touch can move in and out of that boundary
+ * several times, each time toggling highlighting, but a "press" is only
+ * triggered if that touch ends while within the element's boundary and no
+ * scroller (or anything else) has stolen the lock on touches.
+ *
+ * To create a new type of component that handles interaction using the
+ * `Touchable` mixin, do the following:
+ *
+ * - Initialize the `Touchable` state.
+ *
+ *   getInitialState: function() {
+ *     return merge(this.touchableGetInitialState(), yourComponentState);
+ *   }
+ *
+ * - Choose the rendered component who's touches should start the interactive
+ *   sequence. On that rendered node, forward all `Touchable` responder
+ *   handlers. You can choose any rendered node you like. Choose a node whose
+ *   hit target you'd like to instigate the interaction sequence:
+ *
+ *   // In render function:
+ *   return (
+ *     <View
+ *       onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
+ *       onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
+ *       onResponderGrant={this.touchableHandleResponderGrant}
+ *       onResponderMove={this.touchableHandleResponderMove}
+ *       onResponderRelease={this.touchableHandleResponderRelease}
+ *       onResponderTerminate={this.touchableHandleResponderTerminate}>
+ *       <View>
+ *         Even though the hit detection/interactions are triggered by the
+ *         wrapping (typically larger) node, we usually end up implementing
+ *         custom logic that highlights this inner one.
+ *       </View>
+ *     </View>
+ *   );
+ *
+ * - You may set up your own handlers for each of these events, so long as you
+ *   also invoke the `touchable*` handlers inside of your custom handler.
+ *
+ * - Implement the handlers on your component class in order to provide
+ *   feedback to the user. See documentation for each of these class methods
+ *   that you should implement.
+ *
+ *   touchableHandlePress: function() {
+ *      this.performBounceAnimation();  // or whatever you want to do.
+ *   },
+ *   touchableHandleActivePressIn: function() {
+ *     this.beginHighlighting(...);  // Whatever you like to convey activation
+ *   },
+ *   touchableHandleActivePressOut: function() {
+ *     this.endHighlighting(...);  // Whatever you like to convey deactivation
+ *   },
+ *
+ * - There are more advanced methods you can implement (see documentation below):
+ *   touchableGetHighlightDelayMS: function() {
+ *     return 20;
+ *   }
+ *   // In practice, *always* use a predeclared constant (conserve memory).
+ *   touchableGetPressRectOffset: function() {
+ *     return {top: 20, left: 20, right: 20, bottom: 100};
+ *   }
+ */
+
+// Default amount "active" region protrudes beyond box
+
+/**
+ * By convention, methods prefixed with underscores are meant to be @private,
+ * and not @protected. Mixers shouldn't access them - not even to provide them
+ * as callback handlers.
+ *
+ *
+ * ========== Geometry =========
+ * `Touchable` only assumes that there exists a `HitRect` node. The `PressRect`
+ * is an abstract box that is extended beyond the `HitRect`.
+ *
+ *  +--------------------------+
+ *  |                          | - "Start" events in `HitRect` cause `HitRect`
+ *  |  +--------------------+  |   to become the responder.
+ *  |  |  +--------------+  |  | - `HitRect` is typically expanded around
+ *  |  |  |              |  |  |   the `VisualRect`, but shifted downward.
+ *  |  |  |  VisualRect  |  |  | - After pressing down, after some delay,
+ *  |  |  |              |  |  |   and before letting up, the Visual React
+ *  |  |  +--------------+  |  |   will become "active". This makes it eligible
+ *  |  |     HitRect        |  |   for being highlighted (so long as the
+ *  |  +--------------------+  |   press remains in the `PressRect`).
+ *  |        PressRect     o   |
+ *  +----------------------|---+
+ *           Out Region    |
+ *                         +-----+ This gap between the `HitRect` and
+ *                                 `PressRect` allows a touch to move far away
+ *                                 from the original hit rect, and remain
+ *                                 highlighted, and eligible for a "Press".
+ *                                 Customize this via
+ *                                 `touchableGetPressRectOffset()`.
+ *
+ *
+ *
+ * ======= State Machine =======
+ *
+ * +-------------+ <---+ RESPONDER_RELEASE
+ * |NOT_RESPONDER|
+ * +-------------+ <---+ RESPONDER_TERMINATED
+ *     +
+ *     | RESPONDER_GRANT (HitRect)
+ *     v
+ * +---------------------------+  DELAY   +-------------------------+  T + DELAY     +------------------------------+
+ * |RESPONDER_INACTIVE_PRESS_IN|+-------->|RESPONDER_ACTIVE_PRESS_IN| +------------> |RESPONDER_ACTIVE_LONG_PRESS_IN|
+ * +---------------------------+          +-------------------------+                +------------------------------+
+ *     +            ^                         +           ^                                 +           ^
+ *     |LEAVE_      |ENTER_                   |LEAVE_     |ENTER_                           |LEAVE_     |ENTER_
+ *     |PRESS_RECT  |PRESS_RECT               |PRESS_RECT |PRESS_RECT                       |PRESS_RECT |PRESS_RECT
+ *     |            |                         |           |                                 |           |
+ *     v            +                         v           +                                 v           +
+ * +----------------------------+  DELAY  +--------------------------+               +-------------------------------+
+ * |RESPONDER_INACTIVE_PRESS_OUT|+------->|RESPONDER_ACTIVE_PRESS_OUT|               |RESPONDER_ACTIVE_LONG_PRESS_OUT|
+ * +----------------------------+         +--------------------------+               +-------------------------------+
+ *
+ * T + DELAY => LONG_PRESS_DELAY_MS + DELAY
+ *
+ * Not drawn are the side effects of each transition. The most important side
+ * effect is the `touchableHandlePress` abstract method invocation that occurs
+ * when a responder is released while in either of the "Press" states.
+ *
+ * The other important side effects are the highlight abstract method
+ * invocations (internal callbacks) to be implemented by the mixer.
+ *
+ *
+ * @lends Touchable.prototype
+ */
+interface TouchableMixinType {
+  /**
+   * Invoked when the item receives focus. Mixers might override this to
+   * visually distinguish the `VisualRect` so that the user knows that it
+   * currently has the focus. Most platforms only support a single element being
+   * focused at a time, in which case there may have been a previously focused
+   * element that was blurred just prior to this. This can be overridden when
+   * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
+   */
+  touchableHandleFocus: (e: Event) => void;
+
+  /**
+   * Invoked when the item loses focus. Mixers might override this to
+   * visually distinguish the `VisualRect` so that the user knows that it
+   * no longer has focus. Most platforms only support a single element being
+   * focused at a time, in which case the focus may have moved to another.
+   * This can be overridden when using
+   * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
+   */
+  touchableHandleBlur: (e: Event) => void;
+
+  componentDidMount: () => void;
+
+  /**
+   * Clear all timeouts on unmount
+   */
+  componentWillUnmount: () => void;
+
+  /**
+   * It's prefer that mixins determine state in this way, having the class
+   * explicitly mix the state in the one and only `getInitialState` method.
+   *
+   * @return {object} State object to be placed inside of
+   * `this.state.touchable`.
+   */
+  touchableGetInitialState: () => $TEMPORARY$object<{|
+    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
+  |}>;
+
+  // ==== Hooks to Gesture Responder system ====
+  /**
+   * Must return true if embedded in a native platform scroll view.
+   */
+  touchableHandleResponderTerminationRequest: () => any;
+
+  /**
+   * Must return true to start the process of `Touchable`.
+   */
+  touchableHandleStartShouldSetResponder: () => any;
+
+  /**
+   * Return true to cancel press on long press.
+   */
+  touchableLongPressCancelsPress: () => boolean;
+
+  /**
+   * Place as callback for a DOM element's `onResponderGrant` event.
+   * @param {SyntheticEvent} e Synthetic event from event system.
+   *
+   */
+  touchableHandleResponderGrant: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderRelease` event.
+   */
+  touchableHandleResponderRelease: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderTerminate` event.
+   */
+  touchableHandleResponderTerminate: (e: PressEvent) => void;
+
+  /**
+   * Place as callback for a DOM element's `onResponderMove` event.
+   */
+  touchableHandleResponderMove: (e: PressEvent) => void;
+
+  withoutDefaultFocusAndBlur: {...};
+}
+
+export type TouchableType = {
+  Mixin: TouchableMixinType,
+  /**
+   * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
+   */
+  renderDebugView: ({
+    color: ColorValue,
+    hitSlop: EdgeInsetsProp,
+    ...
+  }) => null | React.Node,
+};

package/Libraries/Components/Touchable/Touchable.js

@@ -8,18 +8,18 @@
  * @format
  */
 
-import * as React from 'react';
-import BoundingDimensions from './BoundingDimensions';
-import Platform from '../../Utilities/Platform';
-import Position from './Position';
-import UIManager from '../../ReactNative/UIManager';
-import SoundManager from '../Sound/SoundManager';
-
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {TouchableType} from './Touchable.flow';
+
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import UIManager from '../../ReactNative/UIManager';
+import Platform from '../../Utilities/Platform';
+import SoundManager from '../Sound/SoundManager';
+import BoundingDimensions from './BoundingDimensions';
+import Position from './Position';
+import * as React from 'react';
 
 const extractSingleTouch = (nativeEvent: {
   +changedTouches: $ReadOnlyArray<PressEvent['nativeEvent']>,
@@ -927,7 +927,7 @@ const TouchableMixin = {
     }
   },
 
-  withoutDefaultFocusAndBlur: ({}: $TEMPORARY$object<{||}>),
+  withoutDefaultFocusAndBlur: ({}: {...}),
 };
 
 /**
@@ -944,7 +944,7 @@ const {
 TouchableMixin.withoutDefaultFocusAndBlur =
   TouchableMixinWithoutDefaultFocusAndBlur;
 
-const Touchable = {
+const Touchable: TouchableType = {
   Mixin: TouchableMixin,
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).