Delete on swipe is not closing the Swipeable React native

Question

I am using react-native-gesture-handler for swipe delete purpose.it is doing fine but whenever I swipe to delete it deletes that row but not closing the Swipeable. I have to swipe left to close it. Not understanding why this is happening. I am providing the code here:-

import Swipeable from 'react-native-gesture-handler/Swipeable';

    LeftActions = (progress,dragX)=>{
  const scale = dragX.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });
  return(
    <View style={styles.leftAction}>
      <Animated.Text 
      style={[
          styles.textAction,
          {
            transform:[{
              scale
            }]
          }
        ]}>Delete</Animated.Text>
    </View>
  )
}

class SwipeList extends React.Component {
constructor(props) {
    super(props);
}

SwipeableRow = ({ item, index }) => {
  return (
      <Swipeable
        renderLeftActions={LeftActions}
        renderRightActions={RightActions}
        onSwipeableLeftOpen={()=>this.deleteRow(index)}
      >
        <View style={{paddingHorizontal:10,backgroundColor:'#fff',paddingVertical:20}}>
          <Text style={styles.fromText}>{item.from}</Text>
          <Text numberOfLines={2} style={styles.messageText}>
            {item.message}
          </Text>
        </View>
       </Swipeable>
    );
};
state = {
    list:[
      {
        from: "1",
        when: '3:11 PM',
        message: 'message 1',
      },
      {
        from: '2',
        when: '11:46 AM',
        message:'message 2',
      }
    ]
}

deleteRow = (index) =>{
  this.setState(prev=>{
    return{
      list:prev.list.filter((single,i)=>{
        if(index!=i){
          return single
        }
      })
    }
  })

}

render() {
    return (
        <FlatList
          data={this.state.list}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          renderItem={this.SwipeableRow}
          keyExtractor={(item, index) => `message ${index}`}
        />
      );
}

}

Here are the styles I am using:-

const styles = StyleSheet.create({
    leftAction:{
                  backgroundColor:'violet',
                  justifyContent:'center',
                  flex:1
                }
     });

Here is an animation of what is happening:-

May be I am doing some silly mistake, I am new to React Native. It will be helpful if I get any kind of guidance.

I'm running into the same issue while using `react-native-swipeout`. Have you resolved the issue? — tim, May 24 '20 at 21:04
@tim @Ujjwal Manandhar set unique `key`s on your ``s to fix this issue ([see my answer below](https://stackoverflow.com/a/64512907/780291)) — Alexander Sandberg, Oct 24 '20 at 11:37

score 9 · Answer 1 · answered Oct 24 '20 at 11:34

9

Assign unique `key`s to your `<Swipeable>`s.

This will fix your issue of items sharing the opened state when another item is removed.

<Swipeable
  key={someUniqueKey}
  ...
>
  ...
</Swipeable>

answered Oct 24 '20 at 11:34

Alexander Sandberg

1,265
11
19

score 2 · Answer 2 · answered Oct 07 '19 at 12:28

I have just encountered the same issue and tried to solve it using their documentation but didn't find any luck. Here's a workaround I coded to escape it.

<Swipeable
        overshootRight={false}
        renderRightActions={(progress, dragX) => (
            <RightActions progress={progress} dragX={dragX} onPress={() => {
                styles.rightActionStyle.display ='none';
                onRightPress(index);
                styles.rightActionStyle.display ='flex';
            }}/>
        )}
    >... //code continues

'Right actions' is just the Swipeable component I am showing when a user swipes:

    const RightActions = ({dragX, onPress}) => {
    const scale = dragX.interpolate({
        inputRange: [-100, 0],
        outputRange: [1, 0],
        extrapolate: 'clamp',
    });
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={rightActionStyle}>
                <Animated.Text style={[actionTextStyle, {transform: [{scale}]}]}>
                    Delete
                </Animated.Text>
            </View>
        </TouchableOpacity>
    );
};

I am making use of

styles.rightActionStyle.display ='none';

and when action is completed I bring the component back.

styles.rightActionStyle.display ='flex';

Just in case if you are interested, the styles are:

   rightActionStyle: {
        backgroundColor: '#d41359',
        justifyContent: 'center',
        flex: 1,
        alignItems: 'flex-end',
    },

It is a temporary solution. I will be glad if somebody shows how to do it better.

I was looking for a way to attach an event listener only when the user clicks on the opened swipe component. Passing the `onPress` functionality as a prop seems to be a clever idea, and that helped me get to the desired result. Thanks for the share. — Prajwal Kulkarni, May 07 '21 at 16:30

score 1 · Answer 3 · answered Nov 20 '19 at 14:09

1

I believe that you are supposed to call this.close() within the onPress method where you render the right or left actions

answered Nov 20 '19 at 14:09

Deluxe Grove

81
4

Delete on swipe is not closing the Swipeable React native

3 Answers3

Assign unique `key`s to your `<Swipeable>`s.

Linked

Delete on swipe is not closing the Swipeable React native

3 Answers3

Assign unique keys to your <Swipeable>s.

Linked

Assign unique `key`s to your `<Swipeable>`s.