glepur / react-native-swipe-gestures Goto Github PK

onPress event missing.
Is there any way to get onPress/onClick callback from child component of <GestureRecognizer/>
e.g

<GestureRecognizer
         onSwipeLeft={state => this.onSwipeLeft(state)}
         onSwipeRight={state => this.onSwipeRight(state)}
         config={config}
       >
     <TouchableOpacity  onPress={this.onViewClick.bind(this)}>
       <Text >{this.props.text}</Text>
     </TouchableOpacity>     
  </GestureRecognizer>

OR

<GestureRecognizer
          onSwipeLeft={state => this.onSwipeLeft(state)}
          onSwipeRight={state => this.onSwipeRight(state)}
          onPress={this.onViewClick.bind(this)}
          config={config}
        >
        <Text >{this.props.text}</Text>
  </GestureRecognizer>

<GestureRecognizer
velocityThreshold={0.1}
onSwipeDown={(state) => this.onSwipeDown(state)}
style={style}>
{this.state.myText}
onSwipe callback received gesture: {this.state.gestureName}
{MyCustomView}
{MyHorizontalScroll}

Now i can not listening when i scrolling my scrollview :(

I'm working in a user case in which I need to stopPropagate the event in the swipe right event handler, but it's not in the payload received (which is just gestureState).

Since this is a high level event, I don't know if it's correct to just use the event that the Pan Responder sends, but it may be useful at the very least to have something like a "getOriginalEvent" method on the new Synthetic Event created for this new event, or some solution like that.
Let's discuss it.

I can workaround it with a internal state, but it will be cool to have access to the synthetic event object.

Let me know if you're interested I can create a PR.

Would be great if you could override these from outside the class:

const swipeConfig = {
  velocityThreshold: 0.3,
  directionalOffsetThreshold: 80
};

Ive implemented swipe-gestures in parts of my app, but had issues in a modal. I found this issue and it seems like there is no real concrete solution. But then I realized I am also using React-Native-Snap-Carousel and swipe works just fine in the modal. Any idea what the difference is?

Hi sorry I looked through whole Read me but I wasn't able to determine how to do it, I've a modal which I show on clicking button(using react-native-navigation by wix), it was all working well but when I added GestureRecongnizer to it, the modal won't pop up. I get the following log in my console:

React: Got DOWN touch before receiving UP or CANCEL from last gesture

Following is my code:
renderLoadingView() { return ( <GestureRecognizer onSwipeDown={() => closeModal()} config={SWIPE_CONFIG}> <View style={styles.loading} > <Text> {this.state.loadingText} </Text> </View> </GestureRecognizer> ); }

I need to add detect swipe down action on whole page if there is a better place please let me know.

Hi,

Swipe gesture works absolutely fine in all devices except one plus mobiles.

Button click( Touchable actions) are not working inside the swipe gestures in One plus mobile
devices.

Please help.

When I set the flat list inside the gesture recognizer, It works fine on android but flatlist is not able to scroll on iOS..Any help please!

I really liked the simplicity from this library and now I'm aiming to Animate the Swipe Right and Left. The Animation I need is similar to Tab switching. Is there any way to do it?

I have a ScrollView wrapped in a <GestureRecognizer> component. The Swipe action works great, but the scroll view stopped scrolling properly. It's very glitchy and hardly detects scroll events.

Also i m adding view as you said but its not working proper number of attempts for swipe down then model will be closed

So please help me

i am using react-native-carousel inside react-native-swipe-gestures but... recognize duplicate in my view..

HI,
I have horizontal gallery and when swipe left it not happens in one swipe . I need multiple swipe to get it work.
Please look into the issue.

<GestureRecognizer
onSwipeLeft={() => {
let currentPosition = this.state.currentPosition;
if (this.state.alreadyVoted == true) {
currentPosition = this.state.nextVotingPosition
}
if (currentPosition < this.state.contentList.length - 1) {
this.setState({
currentPosition: currentPosition + 1,
contentId: this.state.contentList[currentPosition + 1],
alreadyVoted: false
})
console.log('Displaying next item - ', currentPosition)
} else {
console.log('No more items to display!!')
this.setState({
currentPosition: currentPosition + 1,
alreadyVoted: false
})

                                        }
                                        this.saveLastViewedContentForCampaign(
                                            this.state.campaignId,
                                            currentPosition + 1)
                                    }}
                                    config={{
                                        detectSwipeUp: false,
                                        detectSwipeDown: false,
                                        detectSwipeRight: false,
                                        velocityThreshold: 0.3,
                                        directionalOffsetThreshold: 80
                                    }}>{this.renderGallery(tabVerticalStyles)}
                                </GestureRecognizer>

I have swipe-gesture elements inside of scroll view, and the scrollw view no longer detects scrolling up or down.

I customize it follow comment #13 (comment)
But in webview react native it slow down

Hi there,

I am making good use of the package at the moment however there seems to be an 'issue' or in my case likely an oversight. Most situations I am only applying a behaviour to one or 2 of the directions available, for example I am making use of left and right swipe in conjunction with a sliding pane component, however the gestures are blocking the regular up and down ScollView/ListView from being able to scroll up and down (forces them to 2 fingers). Even though I am omitting anything to do with the Swipe Up & Down, it seems those are still reserved (for lack of a better word) by the package regardless of whether they are used or not.

Is there a way to free up the unused gestures to perform their normal behaviour?

Thanks

I was going through React-Native-swipe docs where they have written something like this

velocityThreshold: Number 0.3 Velocity that has to be breached in order for swipe to be triggered (vx and vy peroperties of gestureState)

directionalOffsetThreshold: Number 80 Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe)

For some reason I am unable to comprehend, Like if the number is greater than 0.3 means that the user needs to swipe harder (with greater velocity)

and same goes for directionalOffsetThreshold

Great component, thank you so much. Works great. I am wondering, is there any way to pass through the up/down gestures while capturing the left/right gestures with your component? I ask because I would like a ListView on the screen that can still be naturally scrolled up and down but capture a left/right swipe to change sections..

Is it possible to detect partial swipe with this library?

The same code works fine on android, but when I put a scrollview inside of the GestureRecognizer the scrolling is interrupted and it only moves a fraction of an inch.

  <GestureRecognizer
          onSwipeLeft={(state) => this.onSwipeLeft(state)}
          onSwipeRight={(state) => this.onSwipeRight(state)}
  >
     <ListView
             dataSource={this.dataSource}
             renderRow={this.renderRow.bind(this)}
            />
  </GestureRecognizer>

If I use GestureRecognizer, vertical scroll is getting stuck.
i.e vertical scroll is not flexible.

Does this package supports diagonal gestures?

i was trying to implemented this lib to my project and it works perfectly fine on iOS but doesn't work on Android. Is this lib is for iOS only??

Does this terminate the touch? It seems that if you put a button inside the GestureRecognizer it stops working.

It works fine on android somehow but when I wrap the text input inside gesture handler it doesn't seem to be working at all.

Is there a possiblity to include a doubleTap callback? Thanks!

The swipe gestures work perfectly on iOS, yet on Android, it doesn't work. The action will fire randomly when swiping.. maybe once every 10-20 swipe attempts?

Any suggestions or solutions?

Thank you.

Is there a way to detect the start of a swipe?

I would love to be able to attach a listener to the Recognizer.

I have a gesture recognizer inside a view. Inside that view there's a button that opens a modal. Inside that modal I have another gesture recognizer.

Whenever I'm swiping on the gesture recognizer inside the modal view, the handles in the parent gesture recognizer are called.

Is this the expected behaviour or am I doing something wrong? Can I do anything to have the gesture recognizer in the modal receive the touches instead of the parent gesture recognizer?

Is it possible to add prop swipeEnabled so that we can have the control to enable and disable swiping?

Cannot detect any swipes on ios simulator / react-native 0.44.0

I have added a down gesture to a model, and it doesn't recognize it

Just putting this out there to see if anyone else is seeing the same response. I had the GestureRecognizer inside of a TouchableWithoutFeedback with an onPress prop and that stopped the GestureRecognizer from recognizing any swipes.

<TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    <View>
        <GestureRecognizer
            onSwipe={(direction, state) => this.onSwipe(direction, state)}>
            ...
        </GestureRecognizer>
    </View>
</TouchableWithoutFeedback>

Debugging showed that the gestureState was:

{
    dx: 0
    dy: 0
    moveX: 0
    moveY: 0
    numberActiveTouches: 1
    stateID: 0.3603969835877927
    vx: 0
    vy: 0
    x0: 0
    y0: 0
    _accountsForMovesUpTo: 0
}

And this was the response every time I tried to swipe.

I don't fully understand why, but just wanted to see if anyone else was getting the same response.

Here is the detail

<GestureRecognizer
                onSwipe={(direction, state) => this.onSwipe(direction, state, item)}
For Onswipe 
    onSwipe(gestureName, gestureState, item) {
        console.log("direction is="+gestureName);
        let { outletInfo, assetFilter, tags, imageOlderThanHrs, locationClassification, market, imageStatus } = this.state;
        const { SWIPE_LEFT, SWIPE_RIGHT } = swipeDirections;
        let paramsObj = {
            AssetPurityId: item.AssetPurityId ? item.AssetPurityId : 0,
            AssetId: item.AssetId
        };
        switch (gestureName) {
            case SWIPE_LEFT:
                Object.assign(paramsObj, { PrevNext: 1 });
                break;
            case SWIPE_RIGHT:
                Object.assign(paramsObj, { PrevNext: -1 });
                break;
        }

Gatting null direction in starting 3-4 attempt

Added this to a modal, not registering any gesture, up, down, left, or even right...

Currently running version 1.0.5 on React Native version 0.63.2

Happening on react-native 0.60.x due to storybook 5 using this library.

Hi, I have a component defined like this prerry much

<View style={{flex: 1, alignItems: 'stretch'}}>
	<View style={{flex: 92}}>
		<GestureRecognizer onSwipeLeft={this.showNext} onSwipeRight={this.showPrevious} config={config} style={{flex: 1}}>
			<View style={{flex: 93, alignItems: 'stretch'}}>
				<View style={{flex: 18}}/>
				<View style={{flex: 9, alignItems: 'center'}}>
					<Image source={LOGO} style={{flex:1, resizeMode: 'contain'}}/>
				</View>
				<View style={{flex: 11}}/>
				<View style={{flex: 62}}>
					{this.getTab()}
				</View>
			</View>
			<View style= {{flex: 7, alignItems: 'center', justifyContent: 'center'}}>
				<View style={{flexDirection: 'row'}}>
					<View style={{height: circleSize, width: circleSize, marginRight: 5, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(0)}}/>
					<View style={{height: circleSize, width: circleSize, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(1)}}/>
					<View style={{height: circleSize, width: circleSize, marginLeft: 5, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(2)}}/>
				</View>
			</View>
		</GestureRecognizer>
	</View>
	<View style={{flex: 8, backgroundColor: 'rgb(23,168,104)', alignItems: 'center', justifyContent: 'center'}}>
		<Text style={[Styles.buttonTextAttributes]}>SALTA</Text>
	</View>
</View>

Essentially it is a bigger view with most of the content and a view on the bottom that will act like a button and I want to catch the swipes on the bigger view. Where I call the getTab function I got some code to render inside (an image and some text, nothing incredible here). The strange thing is that by default the GestureRecognizer seems to stop to grab the swipes after the last component returned by the getTab function, and also it seems to not be able to get it on the three view on the bottom (essentially they are three view shaped like a dot), even if they are all inside the GestureRecognizer.
The strange thing is that if I set a background on the gesture recognizer I see it is filling the expected area and also it starts to catch the swipes correctly. As workaround for now I use a transparent background, like
<GestureRecognizer onSwipeLeft={this.showNext} onSwipeRight={this.showPrevious} config={config} style={{flex: 1, backgroundColor: 'rgba(255,0,0,0)'}}>

and like this it seems to works, but there is something strange happening there.

when i am trying to swipe right it always gives me SWIPE_LEFT..anyone know how to fix it?

Hi, here is the same code as used in the code sample but with React Hooks:

import React, {Component} from 'react';
import {Text} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
 
export default function TestFile(){
    const [myText, setMyText] = React.useState('I\'m ready to get swiped!');
    const [gestureName, setGestureName] = React.useState('none');
    const [backgroundColor, setBackgroundColor] = React.useState('#fff');
 
  const onSwipeUp = (gestureState) => {
    setMyText('You swiped up!');
  }
 
  const onSwipeDown = (gestureState) => {
    setMyText('You swiped down!');
  }
 
  const onSwipeLeft = (gestureState) => {
    setMyText('You swiped left!');
  }
 
  const onSwipeRight = (gestureState) => {
    setMyText('You swiped right!');
  }
 
  const onSwipe = (gestureName, gestureState) => {
    const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
    setGestureName(gestureName);
    switch (gestureName) {
      case SWIPE_UP:
        setBackgroundColor('red');
        break;
      case SWIPE_DOWN:
        setBackgroundColor('green');
        break;
      case SWIPE_LEFT:
        setBackgroundColor('blue');
        break;
      case SWIPE_RIGHT:
        setBackgroundColor('yellow');
        break;
    }
  }
 
  const config = {
    velocityThreshold: 0.3,
    directionalOffsetThreshold: 80
  };

  return (
    <GestureRecognizer
      onSwipe={(direction, state) => onSwipe(direction, state)}
      onSwipeUp={(state) => onSwipeUp(state)}
      onSwipeDown={(state) => onSwipeDown(state)}
      onSwipeLeft={(state) => onSwipeLeft(state)}
      onSwipeRight={(state) => onSwipeRight(state)}
      config={config}
      style={{
        flex: 1,
        backgroundColor: backgroundColor,
      }}
      >
      <Text>{myText}</Text>
      <Text>onSwipe callback received gesture: {gestureName}</Text>

    </GestureRecognizer>
  );
}

Logs

• Typescript support: @ifiokjr
• Remove deprecate lifecycle methods

onSwipe events doesn't fire when used over react-native-maps on IOS. It works fine on Android.

example code
<GestureRecognizer onSwipeLeft={() => props.navigation.navigate('app.explorecollectionview')} onSwipeRight={() => props.navigation.goBack()} style={{flex: 1}}> <MapView ref={ref => _map = ref} ........./> </GestureRecognizer >

Is there any solution to this problem. Am I doing something wrong. Any workaround i may apply please guide!

Hey, I was making kinda like a snapchat app and used rncamera to show the camera on the whole screen, I tried different configurations but gesture recognizer only works when its background color is set to some color, otherwise it does not.

Also when i try to place gesture recognizer above all the other elements then it only works on a small distance around the text which displays onSwipe callback recieved gesture

this is the rendered part :
``
<View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch',backgroundColor: 'black'}}>

<RNCamera ref={ref=> { this.camera = ref; }} style = {styles.preview} type={this.state.cameraType}   flashMode={this.state.flash} autoFocus={this.state.autoFocus} mirrorImage={this.state.mirrorMode} permissionDialogTitle={'Permission to use camera'} permissionDialogMessage={'We need your permission to use your camera phone'} onGoogleVisionBarcodesDetected={({ barcodes }) => { console.log(barcodes) }} >  
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'stretch', }}>  
        <GestureRecognizer onSwipeLeft={(state)=> this.onSwipeLeft(state)} config={config} style={{ flex: 1, backgroundColor: None, }} >  
            <Text>{this.state.myText}</Text>  
            <Text>onSwipe callback received gesture: {this.state.gestureName}</Text>  
            <View style={styles.blehh}>  
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <TouchableOpacity onPress={ this.changeCameraType.bind(this)} style={ [this.state.cameraType=='back' ?styles.backButton:styles.backButtonNew,{marginLeft: '1%'}]}>
                        <Icon name={ "camera"} size={16} color={this.state.cameraType=='back' ? "#ffff": '#000'} />
                    </TouchableOpacity>
                </View>
                <View style={{flex: 1}}>
                    <TouchableOpacity onPress={ this.takePicture.bind(this)} style={ styles.capture}>
                    </TouchableOpacity>
                </View>
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <TouchableOpacity onPress={ this.changeFlashType.bind(this)} style={ [this.state.flashActive?styles.flashOnButton:styles.backButton,{marginLeft: '23%'}]}>
                        <Icon name={ "bolt"} style={{ color: this.state.flashActive? '#000': '#fff'}}size={28} />
                    </TouchableOpacity>
                </View>
            </View>
        </GestureRecognizer>
    </View>
</RNCamera>

Any help on how to make gesture swipe cover the whole screen without background color will be appreciated

when GestureRecognizer in a list of item array it slow down scrolling



....
.
.
.
.
.
.
.

any speed?

Hi @glepur. I am having trouble triggering onSwipe for horizontal swipe gestures. I have used default config parameters

const config = {
      velocityThreshold: 0.3,
      directionalOffsetThreshold: 100
    };

I have messed around altering params but still cannot reliable horizontal swipe when using ios simulator.

Could you provide more context on the range of velocityThreshold and directionalOffsetThreshold

I have the react-native-video-controls over a video, i want to implement some swipe events to change the video source. I manage to make this work. However i am now unable to swipe the volume down or even move the seek bar. Hope i can find any help