Flow type TouchableHighlight

Reviewed By: yungsters

Differential Revision: D7983631

fbshipit-source-id: 98b3708b26e2bf96426d5acaa5c7e2311a3a34f6

Libraries/Components/Touchable/TouchableHighlight.js

@@ -25,6 +25,9 @@ const createReactClass = require('create-react-class');
 const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 
 import type {PressEvent} from 'CoreEventTypes';
+import type {Props as TouchableWithoutFeedbackProps} from 'TouchableWithoutFeedback';
+import type {ViewStyleProp} from 'StyleSheet';
+import type {ColorValue} from 'StyleSheetTypes';
 
 const DEFAULT_PROPS = {
   activeOpacity: 0.85,
@@ -34,6 +37,23 @@ const DEFAULT_PROPS = {
 
 const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
+type IOSProps = $ReadOnly<{|
+  hasTVPreferredFocus?: ?boolean,
+  tvParallaxProperties?: ?Object,
+|}>;
+
+type Props = $ReadOnly<{|
+  ...TouchableWithoutFeedbackProps,
+  ...IOSProps,
+
+  activeOpacity?: ?number,
+  underlayColor?: ?ColorValue,
+  style?: ?ViewStyleProp,
+  onShowUnderlay?: ?Function,
+  onHideUnderlay?: ?Function,
+  testOnly_pressed?: ?boolean,
+|}>;
+
 /**
  * A wrapper for making views respond properly to touches.
  * On press down, the opacity of the wrapped view is decreased, which allows
@@ -131,7 +151,7 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  *
  */
 
-const TouchableHighlight = createReactClass({
+const TouchableHighlight = ((createReactClass({
   displayName: 'TouchableHighlight',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
@@ -362,6 +382,6 @@ const TouchableHighlight = createReactClass({
       </View>
     );
   },
-});
+}): any): React.ComponentType<Props>);
 
 module.exports = TouchableHighlight;

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,17 +13,11 @@
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const React = require('React');
 const PropTypes = require('prop-types');
-/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
- * found when Flow v0.54 was deployed. To see the error delete this comment and
- * run Flow. */
 const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');
 
 const createReactClass = require('create-react-class');
 const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
-/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
- * found when Flow v0.54 was deployed. To see the error delete this comment and
- * run Flow. */
 const warning = require('fbjs/lib/warning');
 
 const {
@@ -35,21 +29,21 @@ import type {PressEvent} from 'CoreEventTypes';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type {
   AccessibilityComponentType,
-  AccessibilityTrait,
+  AccessibilityTraits as AccessibilityTraitsFlow,
 } from 'ViewAccessibility';
 
 const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
-type Props = $ReadOnly<{|
-  accessible?: boolean,
-  accessibilityComponentType?: AccessibilityComponentType,
+export type Props = $ReadOnly<{|
+  accessible?: ?boolean,
+  accessibilityComponentType?: ?AccessibilityComponentType,
   accessibilityLabel?:
     | null
     | React$PropType$Primitive<any>
     | string
     | Array<any>
     | any,
-  accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
+  accessibilityTraits?: ?AccessibilityTraitsFlow,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,

Libraries/Components/View/ViewAccessibility.js

@@ -29,6 +29,10 @@ export type AccessibilityTrait =
   | 'allowsDirectInteraction'
   | 'pageTurn';
 
+export type AccessibilityTraits =
+  | AccessibilityTrait
+  | $ReadOnlyArray<AccessibilityTrait>;
+
 export type AccessibilityComponentType =
   | 'none'
   | 'button'

RNTester/js/RNTesterExampleList.js

@@ -53,7 +53,10 @@ class RowComponent extends React.PureComponent<{
   render() {
     const {item} = this.props;
     return (
-      <TouchableHighlight {...this.props} onPress={this._onPress}>
+      <TouchableHighlight
+        onShowUnderlay={this.props.onShowUnderlay}
+        onHideUnderlay={this.props.onHideUnderlay}
+        onPress={this._onPress}>
         <View style={styles.row}>
           <Text style={styles.rowTitleText}>{item.module.title}</Text>
           <Text style={styles.rowDetailText}>{item.module.description}</Text>

RNTester/js/TouchableExample.js

@@ -55,7 +55,6 @@ exports.examples = [
             <TouchableHighlight
               style={styles.wrapper}
               activeOpacity={1}
-              animationVelocity={0}
               tvParallaxProperties={{
                 pressMagnification: 1.3,
                 pressDuration: 0.6,
@@ -348,7 +347,6 @@ class TouchableDisabled extends React.Component<{}> {
         <TouchableHighlight
           activeOpacity={1}
           disabled={true}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={() => console.log('custom THW text - highlight')}>
@@ -357,7 +355,6 @@ class TouchableDisabled extends React.Component<{}> {
 
         <TouchableHighlight
           activeOpacity={1}
-          animationVelocity={0}
           underlayColor="rgb(210, 230, 255)"
           style={[styles.row, styles.block]}
           onPress={() => console.log('custom THW text - highlight')}>