Updates from Fri 5 Jun

Libraries/Components/Touchable/TouchableHighlight.js

@@ -23,6 +23,7 @@ var View = require('View');
 
 var cloneWithProps = require('cloneWithProps');
 var ensureComponentIsNative = require('ensureComponentIsNative');
+var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var keyOf = require('keyOf');
 var merge = require('merge');
 var onlyChild = require('onlyChild');
@@ -111,6 +112,7 @@ var TouchableHighlight = React.createClass({
   },
 
   componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
@@ -119,6 +121,7 @@ var TouchableHighlight = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
+    ensurePositiveDelayProps(nextProps);
     if (nextProps.activeOpacity !== this.props.activeOpacity ||
         nextProps.underlayColor !== this.props.underlayColor ||
         nextProps.style !== this.props.style) {
@@ -152,7 +155,8 @@ var TouchableHighlight = React.createClass({
   touchableHandlePress: function() {
     this.clearTimeout(this._hideTimeout);
     this._showUnderlay();
-    this._hideTimeout = this.setTimeout(this._hideUnderlay, 100);
+    this._hideTimeout = this.setTimeout(this._hideUnderlay,
+      this.props.delayPressOut || 100);
     this.props.onPress && this.props.onPress();
   },
 
@@ -164,6 +168,18 @@ var TouchableHighlight = React.createClass({
     return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
   },
 
+  touchableGetHighlightDelayMS: function() {
+    return this.props.delayPressIn;
+  },
+
+  touchableGetLongPressDelayMS: function() {
+    return this.props.delayLongPress;
+  },
+
+  touchableGetPressOutDelayMS: function() {
+    return this.props.delayPressOut;
+  },
+
   _showUnderlay: function() {
     this.refs[UNDERLAY_REF].setNativeProps(this.state.activeUnderlayProps);
     this.refs[CHILD_REF].setNativeProps(this.state.activeProps);

Libraries/Components/Touchable/TouchableOpacity.js

@@ -15,11 +15,13 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var POPAnimationMixin = require('POPAnimationMixin');
 var React = require('React');
+var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
 var cloneWithProps = require('cloneWithProps');
 var ensureComponentIsNative = require('ensureComponentIsNative');
+var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var flattenStyle = require('flattenStyle');
 var keyOf = require('keyOf');
 var onlyChild = require('onlyChild');
@@ -50,7 +52,7 @@ var onlyChild = require('onlyChild');
  */
 
 var TouchableOpacity = React.createClass({
-  mixins: [Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
+  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
 
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
@@ -72,6 +74,7 @@ var TouchableOpacity = React.createClass({
   },
 
   componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
@@ -79,6 +82,10 @@ var TouchableOpacity = React.createClass({
     ensureComponentIsNative(this.refs[CHILD_REF]);
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    ensurePositiveDelayProps(nextProps);
+  },
+
   setOpacityTo: function(value) {
     if (POPAnimationMixin) {
       // Reset with animation if POP is available
@@ -86,6 +93,7 @@ var TouchableOpacity = React.createClass({
       var anim = {
         type: this.AnimationTypes.linear,
         property: this.AnimationProperties.opacity,
+        duration: 0.15,
         toValue: value,
       };
       this.startAnimation(CHILD_REF, anim);
@@ -102,20 +110,26 @@ var TouchableOpacity = React.createClass({
    * defined on your component.
    */
   touchableHandleActivePressIn: function() {
-    this.refs[CHILD_REF].setNativeProps({
-      opacity: this.props.activeOpacity
-    });
+    this.clearTimeout(this._hideTimeout);
+    this._hideTimeout = null;
+    this._opacityActive();
     this.props.onPressIn && this.props.onPressIn();
   },
 
   touchableHandleActivePressOut: function() {
-    var child = onlyChild(this.props.children);
-    var childStyle = flattenStyle(child.props.style) || {};
-    this.setOpacityTo(childStyle.opacity === undefined ? 1 : childStyle.opacity);
+    if (!this._hideTimeout) {
+      this._opacityInactive();
+    }
     this.props.onPressOut && this.props.onPressOut();
   },
 
   touchableHandlePress: function() {
+    this.clearTimeout(this._hideTimeout);
+    this._opacityActive();
+    this._hideTimeout = this.setTimeout(
+      this._opacityInactive,
+      this.props.delayPressOut || 100
+    );
     this.props.onPress && this.props.onPress();
   },
 
@@ -128,7 +142,30 @@ var TouchableOpacity = React.createClass({
   },
 
   touchableGetHighlightDelayMS: function() {
-    return 0;
+    return this.props.delayPressIn || 0;
+  },
+
+  touchableGetLongPressDelayMS: function() {
+    return this.props.delayLongPress === 0 ? 0 :
+      this.props.delayLongPress || 500;
+  },
+
+  touchableGetPressOutDelayMS: function() {
+    return this.props.delayPressOut;
+  },
+
+  _opacityActive: function() {
+    this.setOpacityTo(this.props.activeOpacity);
+  },
+
+  _opacityInactive: function() {
+    this.clearTimeout(this._hideTimeout);
+    this._hideTimeout = null;
+    var child = onlyChild(this.props.children);
+    var childStyle = flattenStyle(child.props.style) || {};
+    this.setOpacityTo(
+      childStyle.opacity === undefined ? 1 : childStyle.opacity
+    );
   },
 
   render: function() {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -12,7 +12,9 @@
 'use strict';
 
 var React = require('React');
+var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
+var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var onlyChild = require('onlyChild');
 
 /**
@@ -31,23 +33,44 @@ type Event = Object;
  * one of the primary reason a "web" app doesn't feel "native".
  */
 var TouchableWithoutFeedback = React.createClass({
-  mixins: [Touchable.Mixin],
+  mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).
      */
+    accessible: React.PropTypes.bool,
     onPress: React.PropTypes.func,
     onPressIn: React.PropTypes.func,
     onPressOut: React.PropTypes.func,
     onLongPress: React.PropTypes.func,
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called.
+     */
+    delayPressIn: React.PropTypes.number,
+    /**
+     * Delay in ms, from the release of the touch, before onPressOut is called.
+     */
+    delayPressOut: React.PropTypes.number,
+    /**
+     * Delay in ms, from onPressIn, before onLongPress is called.
+     */
+    delayLongPress: React.PropTypes.number,
   },
 
   getInitialState: function() {
     return this.touchableGetInitialState();
   },
 
+  componentDidMount: function() {
+    ensurePositiveDelayProps(this.props);
+  },
+
+  componentWillReceiveProps: function(nextProps: Object) {
+    ensurePositiveDelayProps(nextProps);
+  },
+
   /**
    * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
    * defined on your component.
@@ -73,13 +96,22 @@ var TouchableWithoutFeedback = React.createClass({
   },
 
   touchableGetHighlightDelayMS: function(): number {
-    return 0;
+    return this.props.delayPressIn || 0;
+  },
+
+  touchableGetLongPressDelayMS: function(): number {
+    return this.props.delayLongPress === 0 ? 0 :
+      this.props.delayLongPress || 500;
+  },
+
+  touchableGetPressOutDelayMS: function(): number {
+    return this.props.delayPressOut || 0;
   },
 
   render: function(): ReactElement {
     // Note(avik): remove dynamic typecast once Flow has been upgraded
     return (React: any).cloneElement(onlyChild(this.props.children), {
-      accessible: true,
+      accessible: this.props.accessible !== false,
       testID: this.props.testID,
       onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
       onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,

Libraries/Components/Touchable/ensurePositiveDelayProps.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ensurePositiveDelayProps
+ * @flow
+ */
+'use strict';
+
+var invariant = require('invariant');
+
+var ensurePositiveDelayProps = function(props: any) {
+  invariant(
+    !(props.delayPressIn < 0 || props.delayPressOut < 0 ||
+      props.delayLongPress < 0),
+    'Touchable components cannot have negative delay properties'
+  );
+};
+
+module.exports = ensurePositiveDelayProps;