Add example for triggering actions on swipe

[sampl]

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]

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]

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

[monstersintokyo]

@sampl you're welcome :-)

[tim-soft]

@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]

@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]

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]

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]

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]

I see. Could i interest you in adding these events back via PR?

now: https://github.com/react-spring/react-with-gesture/blob/master/index.js

then: https://github.com/react-spring/react-with-gesture/blob/5f243e0b1da7cf7e2c7ba5dc41f440993e8acca2/src/index.js

[tim-soft]

definitely 👍

[arpitprod]

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]

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