Closing a Swipeable element when another is opened

I’m currently using Swipeable to create a list of items, each of which the user can swipe to delete. It’s working fine but if I swipe a row and open one and then swipe another, the previously-opened row is still swiped open but I’d like it to be closed.

I’ve searched for solutions and made a little progress myself using refs but I’ve not been able to get it working perfectly. I’ve also come across quite a few people asking for the same thing and it seems like pretty standard behaviour. It’d be great if you could add some documentation with examples covering this.

Thank you.

[anniewey]

I tried using ref as well and it seems to be working fine except that the close animation is delayed a little.

can you show us your workaround ?

@AmanSharma2609 The idea is using ref and close(). Hope it helps

let row: Array<any> = [];
let prevOpenedRow;

renderItem ({ item, index }) {
  return (
    <Swipeable
	ref={ref => row[index] = ref}
	friction={2}
	leftThreshold={80}
	rightThreshold={40}
	renderRightActions={renderRightActions}
	containerStyle={style.swipeRowStyle}
        onSwipeableOpen={closeRow(index)}
	...
    >
    ...
    </Swipeable>);
}

closeRow(index) {
    if (prevOpenedRow && prevOpenedRow !== row[index]) {
		prevOpenedRow.close();
    }
    prevOpenedRow = row[index];
}

[Lsleiman]

This seems to be working for me. Sharing just in case

 let rowRefs = new Map();
  
  const renderItem = ({item}) => (
  <Swipeable
    key={item.key}
    ref={ref => {
      if (ref && !rowRefs.get(item.key)) {
        rowRefs.set(item.key, ref);
      }
    }}
    onSwipeableWillOpen={()=>{
        [...rowRefs.entries()].forEach(([key, ref]) => {
          if (key !== item.key && ref) ref.close();
        });
     }}
     >
   </Swipeable>
  );