CODEWITHSUNDEEP
react-native
rnn
rnn

Reputation: 2563

How to use TouchableWithoutFeedback's props according to situation

I use TouchableWithoutFeedback as a button. But when I press the button I want it do 'A'. When I do a long press of the button, I want it do 'B'. How do I can do this?

<TouchableWithoutFeedback onPressIn={() => console.warn('OnPressIN')} onLongPress={() => console.warn('OnLongPress')}>
    <Image source={require('../Images/add2.png')} style={{ height: 30, width: 30 }} />
</TouchableWithoutFeedback>

What is happening is that when I do a long press, it gives me OnPressIN, and OnLongPress. but I want just OnLongPress.

Upvotes: 1

Views: 59

Answers (1)

wicky
wicky

Reputation: 978

You can use onPressOut with a state 

<TouchableWithoutFeedback
  onPressIn={() => this.setState({buttonPress: 'short'})}
  onLongPress={() => this.setState({buttonPress: 'long'})}
  onPressOut={() => {
    const {buttonPress} = this.state;
    if(buttonPress === 'short') {
      //do 'A'
    } else if (buttonPress === 'long') {
      //do 'B'
    }
    this.setState({buttonPress: 'none'});
  }}
>

Upvotes: 2

Related Questions