Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example for triggering actions on swipe #8

Closed
sampl opened this issue Oct 9, 2018 · 12 comments
Closed

Add example for triggering actions on swipe #8

sampl opened this issue Oct 9, 2018 · 12 comments

Comments

@sampl
Copy link

sampl commented Oct 9, 2018

I'd love to know the best way to trigger an event based on a gesture.

For ex: let's say someone using the demo drags the box to the right and releases it to "accept" that item. Where and how would you actually call an acceptItem function?

Happy to refile elsewhere if this isn't the right place. Thanks!

@monstersintokyo
Copy link

Hey @sampl,

you can use the provided callbacks for that. I modified the example:
https://codesandbox.io/embed/w0x1030lwk

Don't forget to return the props in every callback. They are used in the event hooks of react-with-gesture.

Cheers.

@sampl
Copy link
Author

sampl commented Oct 10, 2018

@monstersintokyo just what I needed--thank you so much!

@monstersintokyo
Copy link

@sampl you're welcome :-)

@rppld rppld closed this as completed Dec 30, 2018
@tim-soft
Copy link
Contributor

tim-soft commented Mar 5, 2019

@drcmda how would this example work now that we only have the onAction callback?

Including onAction means we can update component state based on events but the children of <Gesture /> don't re-render.

Doing it like this isn't gonna work well

updateState = () => this.setState({ ... });

<Gesture>
  {({ ... }) => {
      // Calling this.setState() from render() is bad...
      if (some gesture condition is met) this.updateState();

      return (
        <Spring>
            {...}
        </Spring>
      );
    }
  }
</Gesture>

@drcmda
Copy link
Member

drcmda commented Mar 6, 2019

@tim-soft did something change? how did you do it before? i think otherwise in the class base api that needs to be componentDidUpdate that does the updateState().

@tim-soft
Copy link
Contributor

tim-soft commented Mar 6, 2019

In an older version, we could call setState() based on some gesture event like in https://codesandbox.io/embed/w0x1030lwk without interfering in the animation

updateState = (props) => {
  if (some gesture condition is met) this.setState({ ... });

  return props;
}

<Gesture onMove={this.updateState}>
  {({ ... }) => (
      <Spring>
          {...}
      </Spring>
    );
  }
</Gesture>

Using the onAction prop causes the spring to not animate

@drcmda
Copy link
Member

drcmda commented Mar 6, 2019

the last bit i don't understand yet. if you're in onAction and you cause a setState, why wouldn't the spring animate? It's been a while but i think i've had trouble figuring out what to do with the renderprops api as it didn't lend itself to this sort of stuff, but using local state as a model for the animation should always work.

@tim-soft
Copy link
Contributor

tim-soft commented Mar 6, 2019

Here's a codepen where I try to replicate https://codesandbox.io/embed/3vv25z07j6

The top slider uses onAction to decide when to call setState()
The bottom slider tries to call setState() inside the render function --> obviously a noop

You'll notice the top slider set the state, but doesn't move when you drag it around

@drcmda
Copy link
Member

drcmda commented Mar 6, 2019

@tim-soft
Copy link
Contributor

tim-soft commented Mar 6, 2019

definitely 👍

@arpitprod
Copy link

codesandbox demo code not working. showing this error

ModuleNotFoundError Could not find module in path: '@babel/runtime/helpers/builtin/es6/objectSpread' relative to '/node_modules/react-spring/dist/react-spring.es.js'

How to solve ?

@dbismut
Copy link
Collaborator

dbismut commented Jul 8, 2020

@arpitprod This is an old issue. Swipe is documented in the documentation.

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

No branches or pull requests

7 participants