Differentiate between onPress, onPressIn and onPressOut

Is this a bug report?

Yes (write your answer here)

Have you read the Bugs section of the Contributing to React Native Guide?

Yes (Write your answer here.)

Environment

react-native -v: 0.46.2 node -v: 6.4.0 npm -v: 3.10.3 yarn --version (if you use Yarn):

Then, specify:

• Target Platform: iOS

• Development Operating System: Mac OSX ELC

• Build tools:

Steps to Reproduce

  <ToucableOpacity
      onPress={()=>console.log('onPress')}
      onPressIn={()=>console.log('onPressIn')}
      onPressOut={()=>console.log('onPressOut')}
      delayPressIn={100}
  />

The onPress event should not fire if onPressIn is triggered. If delayPressIn and delayPressOut passes, only the pressIn and pressOut should be triggered.

(Write your steps here:)

Expected Behavior

Dont fire pressIn

(Write what you thought would happen.)

Actual Behavior

pressIn is fired inspite of holding it.

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[srameshr]

After onPressIn event is fired, i see the onPress event is fired to, when onPressIn and onPress handlers are added on the same <TouchableHighlight>. Basically I was trying to emulate click to capture and press and hold to record and release to stop recording on the same button.

[mfoncho]

This should patch the RNTouchable components. and works as expected. Reproduces the behavior of snapchat or instagram touch and hold shutter botton

import React, { Component, createElement, Children } from 'react';

export default class Touchable extends Component {

        _pressThreshold = 300;

	_pressedIn = null;

	_pressInBubbling = null;

	_onPressIn(event){

		this._pressedIn = Date.now();

		this._pressInBubbling = setTimeout( () => {
			this.props.onPressIn ? this.props.onPressIn(event) : null;
		},0);
	}

	_onPressOut(event){
		clearTimeout(this._pressInBubbling);
		this.props.onPressOut ? this.props.onPressOut(event) : null;
	}

	_onPress(event){
		if( (Date.now() - this._pressedIn) < this._pressThreshold ){
			this.props.onPress ? this.props.onPress(event) : null;
		} 
		this._pressedIn = null;
	}

	getProperty(property, props){
		const prop = props[property];
		delete props[property];
		return  prop;
	}

	bindInteractions(props){
		return {
			...props,
			onPress:this._onPress.bind(this),
			onPressIn:this._onPressIn.bind(this),
			onPressOut:this._onPressOut.bind(this),
		}
	}

	render(){
		const props = this.props;
		const children = this.getProperty('children', props);
		const component = this.getProperty('as', props);
		const newProps = this.bindInteractions(props);
		return createElement(component, newProps, Children.toArray(children));
	}
}

Implementation

  <Touchable
      as={TouchableOpacity}
      onPress={()=>console.log('onPress')}
      onPressIn={()=>console.log('onPressIn')}
      onPressOut={()=>console.log('onPressOut')}
      delayPressIn={100}
  />