search

meteor-factory / react-native-tinder-swipe-cards

Tinder-like swipe cards for your React Native app
MIT License
1.13k stars 301 forks source link

stops working within other horizontal scrollview #5

Open faceyspacey opened 8 years ago

faceyspacey commented 8 years ago

I'm using reactive swipe cards as a page within: https://github.com/brentvatne/react-native-scrollable-tab-view

That also uses horizontal swiping gestures. I'd like the card to respond to the gesture while denying the containing scrolling component from responding to it. The scrolling component would respond to it you drag anywhere on the page besides the card.

So I'm assuming this has something to do with grant and release gesture mechanisms. I don't suppose you or anyone have any hints how to implement this before I go on a wild goose chase?

yogiben commented 8 years ago

Maybe you could put it in a modal or remove it from the scrollview somehow?

Maybe loop @brentvatne in

ryanthegiantlion commented 8 years ago

The scrollable tab view has a 'locked' property which can be set to prevent scrolling. Setting locked to true in the grant method should solve the issue.

EDIT: FYI the issue is described here. The article talks about scrollview which it seems is what the scrollable tab view uses internally

indivisable commented 7 years ago

Ever figure this out? I am trying to put this inside a Vertical Scroll View and it does not seem to like, going to see if I can stop the touch events from propagating.

ryanthegiantlion commented 7 years ago

So I have seemed to have misplaced the code but I built a prototype using the method I mentioned above. Here is the outcome . . .

demo

indivisable commented 7 years ago

So you lock and unlock the ScrollView when the PanResponder in SwipeCard.js?

ryanthegiantlion commented 7 years ago

Actually I used https://github.com/Ryanthegiantlion/react-native-tinder-swipe but the code is similar. But yes, that is how I did it. In the panresponder I set a locked state on the component to true and passed that down as a prop to the scrollview.

indivisable commented 7 years ago

Thanks Ryan,

Ended up passing down a callback to be called 

 onPanResponderGrant: (e, gestureState) => {
        this.props.lock(false);
...

  onPanResponderRelease: (e, {vx, vy, dx, dy}) => {
        this.props.lock(true);
...

Here is the callback:

lock(mode) {
    this.refs.scrollView.setNativeProps({ scrollEnabled: mode });
 }

Also I Found an alternative solution, this works great I may move to this: (Ended up using this) https://github.com/mjracca/react-native-scroll-block

ryanthegiantlion commented 7 years ago

Guess the issue can be closed then . . .