Skip to content
This repository has been archived by the owner on Sep 16, 2020. It is now read-only.

Touch event too hard to trigger on Android #60

Closed
wvengen opened this issue Jan 22, 2016 · 10 comments
Closed

Touch event too hard to trigger on Android #60

wvengen opened this issue Jan 22, 2016 · 10 comments

Comments

@wvengen
Copy link

wvengen commented Jan 22, 2016

Thanks for adding proper Android support! It works quite well, but for one thing: a touch event requires holding the finger very still.

Consider the following components:

<Swipeout right={{component: 'MyButton', onPress: this._onMyButtonPress}} close={true}>
  <View>
    <TouchableHighlight onPress={this._onRowPress}>
      <... />
    </TouchableHighlight>
  </View>
</Swipeout>

On iOS this works fine, but on Android triggering the TouchableHighlight is very hard: only a slight movement of the finger during the press triggers the swipeout action, which makes _onRowPress hard to trigger.

trippcr@ce2b048 on 2.0.9 still works.

@braco
Copy link

braco commented May 11, 2016

@dancormier: would it make sense to add an onPress to the Swipeout component?

wvengen referenced this issue in trippcr/react-native-swipeout May 19, 2016
@esutton
Copy link

esutton commented Jun 7, 2016

The Swipeout onOpen function appears to be *** super *** sensitive on Android.

Is there any configuration for sensitivity?

I have to press a ListView row 4 or 5 times. I have to press very deliberate and straight and perpendicular to the tablet.

See:
#78

Using:
Android 6.0
Nexus 7 tablet
"react": "15.0.2",
"react-native": "^0.26.2",
react-native-swipeout@2.0.12

@esutton
Copy link

esutton commented Jun 7, 2016

Using adb logacat, I can see that the _handlePanResponderGrant function gets called almost every time the ListView row is touched. Unless you press straight and quick ( not very easy ).

This seems to prevent the ListView row's onPress method being called. I assume until the gesture has ended?

https://github.com/dancormier/react-native-swipeout/blob/master/index.js

  _handlePanResponderGrant: function(e: Object, gestureState: Object) {
    console.log('_handlePanResponderGrant:', gestureState);
    if(this.props.onOpen){
      this.props.onOpen(this.props.sectionID, this.props.rowID);
    }
    this.refs.swipeoutContent.measure((ox, oy, width, height) => {
      this.setState({
        btnWidth: (width/5),
        btnsLeftWidth: this.props.left ? (width/5)*this.props.left.length : 0,
        btnsRightWidth: this.props.right ? (width/5)*this.props.right.length : 0,
        swiping: true,
        timeStart: (new Date()).getTime(),
      });
    });
  },

Perhaps there is someway to de-bounce or de-sensitive PanResponder to make it not detect a PAN gesture so easily? Set a deltaX or deltaY threshold?

I cannot find anything in the react-native PanResponder documentation.

06-07 15:48:55.681 11603 12179 I ReactNativeJS: '_handlePanResponderGrant:', { stateID: 0.45550999348051846,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   moveX: 482.1539611816406,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   moveY: 87,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   x0: 482.1539611816406,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   y0: 87,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   dx: 0,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   dy: 0,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   vx: -9.19479990933698e-7,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   vy: 1.608545913133419e-7,
06-07 15:48:55.681 11603 12179 I ReactNativeJS:   numberActiveTouches: 1,

https://facebook.github.io/react-native/docs/panresponder.html

@chkchk
Copy link

chkchk commented Dec 1, 2016

set sensitivity to 1, it works for me

@esutton
Copy link

esutton commented Dec 1, 2016

@chkchk Thank you!

I searched this repo for "sensitivity".

I see it being used but not referenced. How can sensitivity be doing anything?

I will give it a try anyway.

https://github.com/dancormier/react-native-swipeout

Props

Prop Type Optional Default Description
autoClose bool Yes false auto close on button press
backgroundColor string Yes '#dbddde'
close bool Yes close swipeout
left array Yes [] swipeout buttons on left
onOpen func Yes
right array Yes [] swipeout buttons on right
scroll func Yes prevent parent scroll
style style Yes style of the container
sensitivity number Yes 0 change the sensitivity of gesture

@minzhitang
Copy link

thanks @chkchk works for me too

@philographer
Copy link

It works for me too nicely! Thanks

@junshengpierre
Copy link

Hi, I've tried setting sensitivity to 1 but it's not working for me on an android device. The touch event is incredibly difficult to trigger and requires me to press the list item a few times quickly to work.
It works perfectly on an iOS device.

The following is my renderRow code:

<Swipeout
    scroll={event => this._allowScroll(event)}
    sensitivity={1}
    autoClose={true}
    right={swipeoutButtons}>
    <TouchableOpacity
       style={styles.transaction}
       key={rowData.id}
       onPress={() => { this._goToScreen(rowData) }}>
         <View style={styles.listItemContainer}
            {...}
          </View>
     </TouchableOpacity>
 </Swipeout>

react-native 0.40.0
Samsung Galaxy S6
Android 6.0.1

Anyone knows what I might have done wrong?

@wp2123
Copy link

wp2123 commented May 10, 2017

Still hard to trigger onPress event of TouchableOpacity after set sensitivity to 1.
react-native 0.43.3
iPhone 6s

@benevbright
Copy link

I just published extension of Swipeout to make it works like Android behavior on Android.
Try this.
https://www.npmjs.com/package/react-native-swipeout-longpressforandroid

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants