Hi,
My code produce this weird error:

import 'react-native-get-random-values';
import React, {useState} from 'react';
import {uuid} from 'uuidv4';
import {View, Text, StyleSheet} from 'react-native';
import SwipeToDelete from 'react-swipe-to-delete-component';

const App = () => {
  const [items, setItems] = useState([
    {id: uuid(), text: 'Milk'},
    {id: uuid(), text: 'Eggs'},
    {id: uuid(), text: 'Bread'},
    {id: uuid(), text: 'Juice'},
  ]);

  const List = items.map(item => (
    <SwipeToDelete key={item.id} item={item}>
      <a className="list-group-item">
        <h4 className="list-group-item-heading">{item.id}</h4>
        <p className="list-group-item-text">{item.text}</p>
      </a>
    </SwipeToDelete>
  ));

  return (
    <View>
      {List}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
});

export default App;

I don't think it is related to my code but more to the execution of react-swipe-to-delete-component.
Tested on Pixel 3 emulator with npx react-native run-android
It's too bad tis component looks so cool

Would you be willing to implement a delete transition so that the vertical movement of the list is less abrupt?

It is not working with Next JS whenever I am trying to implement this it is showing this error i.e. mentioned below.

<SwipeToDelete onRight={deleteHandler}>
    {/* Some Content */}
</SwipeToDelete>

I am using onDelete but I don't want it to be able to delete from swiping either way.
Is it possible to disable a swipe direction? Or better yet a prop that you can provide to say which swipe direction will trigger the delete?

This line was throwing an error on mobile:
https://github.com/gaer87/react-swipe-to-delete-component/blob/master/src/js/utils/device.js#L8

Changing

return e.originalEvent.targetTouches[0].pageX;

to

return e.targetTouches[0].pageX;

solved it.

Hi,

This looks great. However, I can't get it to work. I've imported it at the top, and put some dummy data there. However, alll I see is large bin icons. Any ideas why? Here is my setup:

import SwipeToDelete from 'react-swipe-to-delete-component';

    <SwipeToDelete key={result._id}>
          <b>HELLO</b>
  </SwipeToDelete>

Hi! Thanks for this great component.
Is there any way to pass the key value upon delete?
I would like to use the key in the onDelete function.

I can't make the react-swipe-to-delete-component work on a touch screen.
It works well on a normal screen with a mouse but not a touch screen.
I tried on two different touch screens, verified the drivers and other swipe type of components are working fine but I can't get that one to work somehow.

As a developer I want to have onLeft and onRight events, so that I can implement particular behavior in swipe to each side

Currently supported node version is ^10.0.0:
https://github.com/gaer87/react-swipe-to-delete-component/blob/master/package.json#L36
node 10.x is EOL now, the oldest maintained version is 12 and recent LTS is 17:
https://nodejs.org/en/about/releases/

You have onLeft={onLeft} and onRight={onRight} functions, but there is no styling provision (that I could find) for making left and right call-to-actions. that are separated. (The trash icon).

I created a basic hook:

    const [isRight, setRight] = useState(false);
    const [isLeft, setLeft] = useState(false);

    const onLeft = (...args) => {
        setLeft(true);
        setRight(false);
    }
    const onRight = (...args) => {
        setRight(true);
        setLeft(false);
    }

And added classNameTag to the <SwipeToDelete object.

<SwipeToDelete
     key={item.id}
    onLeft={onLeft}
    onRight={onRight}
    classNameTag={isRight ? "is-right" : isLeft ? "is-left" : ""}
>

Then I just created some CSS to override the default CSS behavior:

.list-group{
    padding:15px;
    background-color:#FFF;
    border:2px solid #DDD;
    overflow-y:scroll;
    display:flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    height: calc(100vh - 11rem);
    border-radius: 0.75rem;
    margin-bottom: 30px;
    overflow-x: hidden;
}

.swipe-to-delete.is-right .js-delete {
    background-color: #6fc76f;
    background-image: url('data:image/svg+xml, CUSTOM SVG HERE');
    background-size: 25px 25px;
    background-position: 10px center;
    background-repeat: no-repeat;

    }
.swipe-to-delete.is-left .js-delete {
    background-color: #fd8681;
    background-image: url('data:image/svg+xml, CUSTOM SVG HERE>');
    background-size: 25px 25px;
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
}
.swipe-to-delete .js-delete svg:first-child {
    display:none;
}
.swipe-to-delete .js-delete svg {
    display:none;
}
.swipe-to-delete {
    overflow: visible !important;
}

This allows for two different background colors depending on the swipe direction, and also allows for custom icon based on swipe direction.

Hello again!
If I wrap the individual swipeable boxes in <Link> so they can be clicked to go to another page, sometimes I get an error and the app crashes.
The Chrome DevTools console says:

Paused on promise rejection
TypeError: Cannot read property 'firstChild' of null

Which points to line 397 of swipe-to-delete.min.js.
Is there any way around this? If I switch <Link> to an anchor tag <a>, I do not get this error, but using <a> in a SPA is not favourable.

Please let me know if you've got any ideas! Thanks.

Hello,

thanks a lot for your awesome component!
It's working well except when you have to scroll a list on mobile. The vertical swipe gesture is intercepted by the component. The element is slightly moving (left or right) when you scroll. It's visually disturbing. Can you try to detect that the gesture is horizontal before trigger the element animation?

Hi, I'm trying to set up this module, but I got this error on fresh project build with create react app (typescript) :

Cannot find module 'semver' (While processing: "/node_modules/babel-preset-react-app/index.js")
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213